How To Get Value Of Ckeditor 5?

I want to be able to return the value of the CKEditor textarea, and also write my text inside it. I used CKEditor 5 CDN. First this my code for the textarea it works fine

Solution 1:

You need to get or save the editor created and then use the getData() function. You can add a .then() on creation to save your editor.

var myEditor;

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

and then get data using

myEditor.getData();

Solution 2:

I use another way to work with ckEditors.

First thing is - I don't want to initialize ckEditor in every page where I use Editors.

Second thing is - Sometimes I need to access to ckEditors by name.

So, there is my point of view:

Add to your Layout:

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>

Use it in your view:

<inputtype="text" name="tbxQuestion"class="ck-classic"/>
<inputtype="text" name="tbxAnswer1"class="ck-classic-min"/>
<inputtype="text" name="tbxAnswer2"class="ck-classic-min"/>
<inputtype="text" name="tbxAnswer3"class="ck-classic-min"/>

A little css:

.ck-classic {
    display: none;
}

.ck-classic-min {
    display: none;
}

Add tiny JS to Layout (better way to add as separated JS file):

const ckEditorClassicOptions = {
    toolbar: ['heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link', 'insertTable', 'undo', 'redo'],
    heading: {
        options: [
            { model: 'paragraph', title: 'Параграф' },
            //{ model: 'heading1', view: 'h1', title: 'Heading 1' },
            { model: 'heading2', view: 'h2', title: 'Заголовок 2' },
            { model: 'heading3', view: 'h3', title: 'Заголовок 3' },
            { model: 'heading4', view: 'h4', title: 'Заголовок 4' },
            { model: 'heading5', view: 'h5', title: 'Заголовок 5' }
        ]
    }
};

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);
            });
    }

});

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

    returnnull;
}

And after that get Data from where you need:

ckEditor("tbxQuestion").getData()

Solution 3:

Actually, there are lots of ways to achieve this but this way is very short and optimized and also this setup can work perfectly with single as well as multiple <textarea>.

document.querySelectorAll('.ckeditor').forEach(e => {
  ClassicEditor
    .create(e)
    .then(editor => {
      editor.model.document.on('change:data', () => {
        e.value = editor.getData();
      });
    })
    .catch(error => {
      console.error(error);
    });
})

<scriptsrc="https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js"></script><!--Native Text Field--><textareaclass="ckeditor"></textarea>

Solution 4:

Using the developer console, I found this to work for me:

CKEDITOR.instances.(textarea_id).getData();

Solution 5:

Most easiest way:

//global varsvarCKEditorArray = [];//CKEditor access array//initialize functionfunctionCKEditorInit(selector_name){
    ClassicEditor
        .create(document.querySelector(selector_name),{
            //some optionstoolbar: {
                items: [
                    'undo', 'redo', '|',
                    'fontSize', 'bold', 'italic', 'underline', '|',
                    'alignment', 'bulletedList', 'numberedList', '|',
                    'outdent', 'indent', '|',
                    'fontColor', 'fontBackgroundColor', '|',
                    'sourceEditing'
                ],
            },
        })
        .then(editor => {
            console.log(editor);
            CKEditorArray[selector_name] = editor;//save editor with selector name as index to array
        })
        .catch(error => {
            console.error(error);
        });
}

//then we need to init CKEditor, we just call functionCKEditorInit('#textarea-id');

//access to Editor like:alert(CKEditorArray['#textarea-id'].getData());

Share