Lo siento, pero no puedo realizar tal tarea. Por favor, proporcione una oración o párrafo con sentido.

14 Jun, 2023 Programación 0

Estoy tratando de implementar una instancia del editor CKEditor WYSIWYG. Lo estoy ejecutando en una aplicación Vue 2.x.
He descargado los archivos fuente de CKEditor (https://github.com/ckeditor/ckeditor5-vue2/blob/master/dist/ckeditor.js) y los archivos ClassicEditor (https://cdn.ckeditor.com/ckeditor5/31.0.0/classic/ckeditor.js) descargados y servidos en mi página. La consola confirma que estos dos se cargan correctamente.
El problema es que el editor no registra espacios a menos que estén entre dos letras.
Aquí está el código relevante-

View.php

<script>
    Vue.use(window.CKEditor)
    new Vue({
        el: '#components-demo',
        data: {
            editor: window.ClassicEditor,
            editorConfig: {
                width: '100%',
                height: '100%'
            }
        }
    })
</script>

Component.js

Vue.component('userNotesEditor', {
    template: /*template*/ `
    <div id="editor-main">
       <ckeditor :editor="Classic" v-model="content" :config="config"></ckeditor>
    </div>
    `,
    components: {
        ckeditor: window.CKEditor.component
    },
    props: {
    },
    data: function() {
        return {
            content: '',
            options: {},
            Classic: window.ClassicEditor,
        }
    },

El editor carga- https://i.stack.imgur.com/jugan.png
Y agrega el marcado HTML correctamente- https://i.stack.imgur.com/flAW3.png

Pero presionar la barra espaciadora solo produce un espacio si el cursor está entre palabras; Además, no me permite agregar múltiples espacios consecutivos incluso cuando los coloco entre letras. No estoy seguro de por qué es así y no he encontrado ningún recurso relevante.

Cualquier ayuda sería muy apreciada.

init: function() { const editor = this.Classic.create(this.$refs.ckeditor, this.config); editor.setData(this.content || ''); editor.model.document.on('change:data', () => { this.content = editor.getData(); }); this.editor = editor; }

Answer

davy.ai

June 14, 2023 at 4:52 pm
Solución para que CKEditor WYSIWYG no registre espacios

El problema con CKEditor WYSIWYG de no registrar espacios a menos que estén entre dos letras puede resolverse ajustando las opciones de configuración del editor. Aquí se presentan los pasos a seguir:
1. Actualice el objeto editorConfig en su instancia de Vue para incluir las siguientes opciones:
```
editorConfig: {
    width: '100%',
    height: '100%',
    content: ' '
}
```
La opción content se establece en un solo carácter de espacio, lo que garantiza que el editor registre espacios incluso cuando no están entre dos letras.
1. Agregue el siguiente código dentro de la inicialización del complemento ClassicEditor en su archivo Component.js:
```
init: function() {
    const editor = this.Classic.create(this.$refs.ckeditor, this.config);
    editor.setData(this.content || '');
    editor.model.document.on('change:data', () => {
        this.content = editor.getData();
    });
    this.editor = editor;
}
```
Este código inicializa el editor, establece el contenido inicial y escucha los cambios en el contenido del editor para actualizar la propiedad de datos content.

Con estos cambios, CKEditor WYSIWYG debería registrar todos los espacios, incluso cuando no están entre dos letras.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Lo siento, pero no puedo realizar tal tarea. Por favor, proporcione una oración o párrafo con sentido.

Answer

davy.ai