CODEWITHSUNDEEP
javascripthtmltextareackeditor5
Latifa Khalid
Latifa Khalid

Reputation: 153

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

<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.1/classic/ckeditor.js"></script>

<textarea class="inputStyle" id="editor" name="content" placeholder="Write your email.."></textarea>
<script>ClassicEditor.create(document.querySelector('#editor')).catch( error => { console.error( error );  } ); </script>

I used to get the data from the textarea before the CKEditor by:

var text = $('textarea#editor').val();

and set the data by: 

$('textarea#editor').html("");

but i'm lost now? i tried many ways... what is the correct way?

Upvotes: 15

Views: 37840

Answers (5)

Enow
Enow

Reputation: 1

Most easiest way:

//global vars
var CKEditorArray = [];//CKEditor access array

//initialize function
function CKEditorInit(selector_name){
    ClassicEditor
        .create(document.querySelector(selector_name),{
            //some options
            toolbar: {
                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 function
CKEditorInit('#textarea-id');

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

Upvotes: 0

Abhishek Singh
Abhishek Singh

Reputation: 607

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);
    });
})
<script src="https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js"></script>

<!--Native Text Field-->
<textarea class="ckeditor"></textarea>

Upvotes: 4

Davie Overman
Davie Overman

Reputation: 114

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

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

Upvotes: 0

Rustem Bayetov
Rustem Bayetov

Reputation: 143

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:

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

Use it in your view:

<input type="text" name="tbxQuestion" class="ck-classic"/>
<input type="text" name="tbxAnswer1" class="ck-classic-min"/>
<input type="text" name="tbxAnswer2" class="ck-classic-min"/>
<input type="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);
            });
    }

});

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

    return null;
}

And after that get Data from where you need:

ckEditor("tbxQuestion").getData()

Upvotes: 6

itdoesntwork
itdoesntwork

Reputation: 1891

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

Upvotes: 40

Related Questions