Как установить значение в CKEditor с помощью Javascript?

Мне интересно, как я могу установить значение в CKEditor с помощью Javascript?

Я пробовал следующее, но ни один из них не работает...

document.[form name].[textarea name].value=data;
$('#textareaID').val(data);

Однако оба они работают без применения редактора. Есть ли способ сделать это с помощью редактора?


javascript ckeditor
person dcp3450    schedule 31.08.2010    source источник
comment
Я снова столкнулся с той же проблемой, 17 месяцев спустя. Может ли быть переоткрытый я ответил на этот вопрос давным-давно. Спасибо, мой значок?   -  person Wick    schedule 20.11.2013

Ответы (10)


arrow_upward
95
arrow_downward

Используйте метод CKEditor setData():

CKEDITOR.instances[**fieldname**].setData(**your data**)
person efeyc    schedule 04.12.2012
comment
Спасибо, ваш код работает, но я поставил CKEDITOR.instances.**ckeditorname**.setData(yourdata) - person r.vengadesh; 08.04.2014
comment
документация здесь - person reergymerej; 02.03.2015
comment
Я добавляю вместо ckeditorname идентификатор текстовой области, отображаемой как CkEditor. Например: JavaScript: CKEDITOR.instances[my-content].setData(‹p›Hello World‹/p›); HTML: ‹textarea id=my-content cols=80 name=profile rows=10›‹/textarea› - person Alex Sanséau; 13.05.2015

arrow_upward
33
arrow_downward

Методы insertHtml() и insertText() будут вставлять данные в окно редактора, добавляя к тому, что там уже есть.

Однако для замены всего содержимого редактора используйте setData().

person Wick    schedule 23.06.2012

arrow_upward
12
arrow_downward

Используйте insertHtml() или insertText().

person Anpher    schedule 31.08.2010
comment
Они вставляют новый материал в положение каретки. setData() заменяет весь контент. - person oleq; 05.04.2013

arrow_upward
8
arrow_downward

Попробуй это

CKEDITOR.instances['textareaId'].setData(value);
person Sunil kumar    schedule 16.06.2016

arrow_upward
7
arrow_downward

Я использовал приведенный ниже код, и он отлично работает, как описано ->

CKEDITOR.instances.mail_msg.insertText(obj["template"]);

Здесь-> CKEDITOR -> Имя вашего редактора, mail_msg -> Идентификатор вашего текстового поля (к которому вы привязываете ckeditor), obj["template"]-> это значение, которое вы хотите привязать

person Sachin    schedule 15.06.2012
comment
Не работает. Это делает: CKEDITOR.instances.taCKEDITOR_Email.setData('‹b›‹h1›testing‹/h1›‹/b›’) - person FrenkyB; 29.11.2017
comment
@FrenkyB, как вы конвертируете необработанный HTML-текст в форматированный текст, когда setData() используется в CKEDITOR? - person Mahesh; 19.01.2020

arrow_upward
6
arrow_downward 

<textarea id="editor1" name="editor1">This is sample text</textarea>

<div id="trackingDiv" ></div>

<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );

</script>

Давай попробуем это..

Обновление:

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

Сначала создать экземпляр ::

var editor = CKEDITOR.instances['editor1'];

Затем,

editor.setData('your data');

or

editor.insertHtml('your html data');

or

editor.insertText('your text data');

И получить данные из вашего редактора ::

editor.getData();

Если изменить определенные данные пара HTML в CKEditor.

var html = $(editor.editable.$);
$('#id_of_para',html).html('your html data');

Это возможные способы, которые я знаю в CKEditor

person Mari Selvan    schedule 18.11.2016

arrow_upward
4
arrow_downward

Поскольку сегодня запущен CKEditor 4+, мы должны его использовать. Документация по ekeditor 4 setData

CKEDITOR.instances['editor1'].setData(value);

Где editor1 – идентификатор текстовой области.

Старые методы, такие как insertHtml('html data') и insertText('text data'), также прекрасно работают.

и использовать данные

var ckdata =  CKEDITOR.instances['editor1'].getData();
var data = CKEDITOR.instances.editor1.getData();

документация по Ckedtor 4

person Deva    schedule 31.12.2018
comment
Я не нашел экземпляр CKEDITOR в консоли браузера, но, наконец, нашел его в window.CKEDITOR - person Qiushi Huang; 15.05.2019
comment
@QiushiHuang, вы не можете найти его в консоли браузера, но он работает нормально, и я думаю, что ответ на соответствующий вопрос, а не на то, как найти экземпляр. - person Deva; 15.05.2019

arrow_upward
3
arrow_downward

Устанавливает данные редактора. Данные должны быть предоставлены в необработанном формате (HTML). CKEDITOR.instances.editor1.setData('Поместите ваши данные'); ссылка на эту страницу

person Satya Prakash    schedule 19.01.2015
comment
Спасибо, братан, это полезно для меня. - person Bijender Singh Shekhawat; 18.10.2016

arrow_upward
1
arrow_downward

Позаботьтесь о том, чтобы удалить символы новой строки из любой строки, которую вы передаете setData().. В противном случае будет выдано исключение.

Также обратите внимание, что даже если вы сделаете это, то впоследствии снова получите эти данные с помощью getData(), CKEditor вернет разрывы строк.

person bcr    schedule 06.05.2013

arrow_upward
1
arrow_downward

Я пробовал это и работал на меня.

success: function (response) {
    document.getElementById('packageItems').value = response.package_items;

    ClassicEditor
    .create(document.querySelector('#packageItems'), {
        removePlugins: ['dragdrop']
    })
    .then(function (editor) {
        editor.setData(response.package_items);
    })
    .catch(function (err) {
        console.error(err);
    });
},
person Dhanushka Udayanga    schedule 07.11.2019