Получение значения textarea для текстового поля ckeditor с помощью javascript

Question

Я изучаю JS, и хотя я потратил немало часов, читая учебники, которые очень помогли, но у меня все еще возникают проблемы с выяснением того, как именно я узнаю, что печатает пользовательтекстовое поле ckeditor.

Я пытаюсь сделать так, чтобы при вводе текста в текстовое поле все, что он печатал, появлялось в div в другой части страницы.

У меня есть простой текстовый ввод, который делает это просто отлично, но поскольку текстовая область - ckEditor, подобный код не работает.

Я знаю, что ответ здесь: Значение текстовой области API ckEditor но я не знаю достаточно, чтобы понять, что я должен делать.Я не думаю, что кто-нибудь может мне помочь?

Код, с которым я работаю:

$('#CampaignTitle').bind("propertychange input", function() {
  $('#titleBar').text(this.value);
});

и

<label for="CampaignTitle">Title</label>
<input name="data[Campaign][title]" type="text" id="CampaignTitle" />

и

<div id="titleBar" style="max-width:960px; max-height:76px;"></div>

Answer 1

У меня все еще есть проблемы с выяснением, как именно я узнаю, что пользователь вводит текст в ckeditor.

Хорошо, это довольно просто. Предполагая, что ваш редактор называется «editor1», вы получите предупреждение с его содержимым:

alert(CKEDITOR.instances.editor1.getData());

Сложнее определить, когда пользователь печатает. Из того, что я могу сказать, на самом деле нет поддержки, чтобы сделать это (и я не слишком впечатлен документацией между прочим). Смотрите эту статью: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html

Вместо этого я бы предложил установить таймер, который будет непрерывно обновлять ваш второй div со значением текстовой области:

timer = setInterval(updateDiv,100);
function updateDiv(){
    var editorText = CKEDITOR.instances.editor1.getData();
    $('#trackingDiv').html(editorText);
}

Кажется, это работает просто отлично. Вот все для ясности:

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

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

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

    timer = setInterval(updateDiv,100);
    function updateDiv(){
        var editorText = CKEDITOR.instances.editor1.getData();
        $('#trackingDiv').html(editorText);
    }
</script>

Answer 2

По крайней мере, начиная с CKEDITOR 4.4.5, вы можете настроить прослушиватель для каждого изменения содержимого редактора вместо запуска таймера:

CKEDITOR.on("instanceCreated", function(event) {
    event.editor.on("change", function () {
        $("#trackingDiv").html(event.editor.getData());
    });
});

Я понимаю, что это может быть слишком поздно для ОП, и оно не показывается как правильный ответ или у него нет голосов (пока), но я решил обновить пост для будущих читателей.

Answer 3

Просто выполнить

CKEDITOR.instances[elementId].getData();

с элементом id = id элемента, назначенного редактору.

Answer 4

Вы можете интегрировать функцию в JQuery

jQuery.fn.CKEditorValFor = function( element_id ){
  return CKEDITOR.instances[element_id].getData();
}

и передача в качестве параметра идентификатора элемента ckeditor

var campaign_title_value = $().CKEditorValFor('CampaignTitle');

Answer 5

var campaignTitle= CKEDITOR.instances['CampaignTitle'].getData();

Answer 6

вы можете добавить следующий код: данные поля ckeditor будут сохраняться в $ ('# ELEMENT_ID'). Val () при каждом клике.Я использовал метод, и он работает очень хорошо.Данные поля ckeditor будут сохранены в реальном времени и будут готовы к отправке.

$().click(function(){
    $('#ELEMENT_ID').val(CKEDITOR.instances['ELEMENT_ID'].getData());
});

Answer 7

Хорошо.Вы спрашивали о получении значения из textarea, но в своем примере вы используете вход.В любом случае, здесь мы идем:

$("#CampaignTitle").bind("keyup", function()
{
    $("#titleBar").text($(this).val());
});

Если вы действительно хотите, чтобы текстовая область изменила ваш тип ввода текста на

<textarea id="CampaignTitle"></textarea>

Надеюсь, это поможет.