Как получить ценность CKEditor 5?

Я хочу иметь возможность возвращать значение текстового поля CKEditor, а также записывать в него свой текст.

Я использовал CKEditor 5 CDN. Сначала это мой код для текстового поля, он отлично работает

<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>

Раньше я получал данные из текстового поля до CKEditor:

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

и установите данные:

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

но я потерялся сейчас? я пробовал много способов ... какой правильный?


javascript html ckeditor5 textarea
person Latifa Khalid    schedule 30.10.2017    source источник
comment
поделитесь дополнительным кодом, как вы создали ckedit, создавая экземпляр и как получить данные   -  person Yogesh H Shenoy    schedule 30.10.2017

Ответы (3)


arrow_upward
31
arrow_downward

Вам нужно получить или сохранить созданный редактор, а затем использовать getData(). Вы можете добавить .then() при создании, чтобы сохранить ваш редактор.

    var myEditor;

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

а затем получить данные, используя

myEditor.getData();
person itdoesntwork    schedule 30.10.2017
comment
... а myEditor.setData() предназначен для установки данных в редакторе. Имейте в виду, что данные редактора не сохраняются автоматически в текстовое поле, поэтому перед отправкой формы вы должны сделать что-то вроде $('textarea#editor').html( myEditor.getData() ). - person Szymon Cofalik; 30.10.2017
comment
Я попробовал именно это, как показано ниже, и получил не могу прочитать свойство getData, равное undefined. Это мой код: var editorinstance; ClassicEditor.create (document.querySelector ('# editor')) .then (editor = ›{editorinstance = editor;}). Catch (error =› {console.error (error);}); оповещение (editorinstance.getData ()); - person Scott; 06.12.2017
comment
@Scott, вы, вероятно, получаете ошибку при создании. Проверьте свою консоль на наличие ошибки. Идентификатор вашей текстовой области = редактор ?? - person itdoesntwork; 07.12.2017
comment
Для тех, кто получил ответ, что getData () не является функцией или не определен, это потому, что вам нужно подождать, пока ckeditor загрузится, чтобы получить его значение .. document.addEventListener("DOMContentLoaded", function(event){console.log(my_editor.getData())}); - person Marek Bernád; 03.12.2018

arrow_upward
5
arrow_downward

Я использую другой способ работы с ckEditors.

Во-первых, я не хочу инициализировать ckEditor на каждой странице, где я использую редакторы.

Во-вторых, иногда мне нужно получить доступ к ckEditors по имени.

Итак, вот моя точка зрения:

Добавьте в свой макет:

<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>

Используйте это в своем представлении:

<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"/>

Немного css:

.ck-classic {
    display: none;
}

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

Добавьте крошечный JS в макет (лучший способ добавить как отдельный файл JS):

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

И после этого получите Данные откуда вам нужно:

ckEditor("tbxQuestion").getData()
person Rustem Bayetov    schedule 25.02.2019

arrow_upward
0
arrow_downward

Используя консоль разработчика, я обнаружил, что это работает для меня:

CKEDITOR.instances. (Textarea_id) .getData ();

person Davie Overman    schedule 21.04.2019