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

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

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

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

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

Код, который у меня есть:

$('#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>

Ответы

Ответ 1

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

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

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

Чем сложнее определить, когда пользователь набирает. Из того, что я могу сказать, на самом деле нет поддержки для этого (и я не слишком впечатлен документацией по btw). См. Эту статью: 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>

Ответ 2

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

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

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

Ответ 3

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

CKEDITOR.instances[elementId].getData();

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

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

Ответ 7

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