¿Cómo obtener el valor de CKEditor 5?

Presta atención porque en esta sección hallarás la contestación que buscas.Esta crónica ha sido analizado por nuestros especialistas para garantizar la calidad y exactitud de nuestro post.

Solución:

Debe obtener o guardar el editor creado y luego usar el getData() función. Puedes agregar un .then() en la creación para guardar su editor.

    var myEditor;

    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => 
            console.log( 'Editor was initialized', editor );
            myEditor = editor;
         )
        .catch( err => 
            console.error( err.stack );
         );

y luego obtener datos usando

myEditor.getData();

Yo uso otra forma de trabajar con ckEditors.

Lo primero es: no quiero inicializar ckEditor en cada página donde uso Editores.

Lo segundo es: a veces necesito acceder a ckEditors por nombre.

Entonces, ahí está mi punto de vista:

Agregue a su diseño:

Úsalo en tu vista:

Un poco de CSS:

.ck-classic 
    display: none;


.ck-classic-min 
    display: none;

Agregue un pequeño JS al diseño (una mejor manera de agregar un archivo JS separado):

const ckEditorClassicOptions = 
    toolbar: ['heading', ';

const ckEditorClassicOptionsMin = 
    toolbar: ['bold', 'italic']
;

var allCkEditors = [];
$(document).ready(function() 
    // Initialize All CKEditors
    allCkEditors = [];

    var allHtmlElements = document.querySelectorAll('.ck-classic');
    for (var i = 0; i < allHtmlElements.length; ++i) 
        ClassicEditor
            .create(allHtmlElements[i], ckEditorClassicOptions)
            .then(editor => 
                allCkEditors.push(editor);
            )
            .catch(error => 
                console.error(error);
            );
    

    allHtmlElements = document.querySelectorAll('.ck-classic-min');
    for (var j = 0; j < allHtmlElements.length; ++j) 
        ClassicEditor
            .create(allHtmlElements[j], ckEditorClassicOptionsMin)
            .then(editor => 
                allCkEditors.push(editor);
            )
            .catch(error => 
                console.error(error);
            );
    

);

function ckEditor(name) 
    for (var i = 0; i < allCkEditors.length; i++) 
        if (allCkEditors[i].sourceElement.id === name) return allCkEditors[i];
    

    return null;

Y después de eso, obtenga datos de donde necesita:

ckEditor("tbxQuestion").getData()

Si te sientes a gusto, tienes la libertad de dejar una sección acerca de qué le añadirías a esta crónica.

---

---

Utiliza Nuestro Buscador