Sync CKEditor and a TEXTAREA with jQuery

Question

I need the content in a TEXTAREA and a CKEditor instance to stay in sync. (I don't need the caret position to be the same, just the content.)

I have the jQuery event listeners to handle the to-and-fro but the recommended CKEditor jQuery event is 'change'. This means that when I type in the TEXTAREA, the content is copied to the CKEditor and then immediately copied back to the TEXTAREA I am typing into. If I type slowly, I get extra spaces inserted between my letters. See https://jsfiddle.net/L4gotgb2/1/ where the significant code is:

<div class="row">
    <div class="col-sm-6">
        <h2>TEXTAREA</h2>
        <textarea id="textarea" class="box"></textarea>
    </div>
    <div class="col-sm-6">
        <h2>CK EDITOR</h2>
        <textarea id="ckeditor" class="box"></textarea>
    </div>
</div>

<script>
var ck = CKEDITOR.replace('ckeditor').on('change', function(e) {
    var thisHTML = e.editor.getData();
    // Convert HTML to text
    var tempDiv = $('<div>').html(thisHTML);
    var thisText = tempDiv.text();
    $('#textarea').val(thisText);
});

$('#textarea').keyup(function() {
    var thisContent = $(this).val();
    CKEDITOR.instances.ckeditor.setData(thisContent);
    // CKEDITOR.instances.ckeditor.setData(thisContent, {internal: true});
});
</script>

The CKEditor docs ( http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData ) mention an "internal: true" option on setData() which sounds promising as I need to prevent the CKEditor 'change' from firing when I programmatically update the content. I can't get the option to do anything. It actually prevents the CKEditor from being updated at all.

What am I missing?

Answer 1

Just tell the on change event as option to update the underlying element.

CKEDITOR.replace('editor', {
    on: {
          change: function() {
              this.updateElement();    
          }
    }
});

Answer 2

I have update your jquery code here. You have to check the focus condition in ckeditor change event. Because when textarea change there is also CKeditor event fire. so that problem arise; I have condition like : if(!$('#textarea').focus()){

var ck = CKEDITOR.replace('ckeditor').on('change', function(e) {
    if(!$('#textarea').focus()){
    var thisHTML = e.editor.getData();
    // Convert HTML to text
    var tempDiv = $('<div>').html(thisHTML);
    var thisText = tempDiv.text();
    $('#textarea').val(thisText);
    }
});

$('#textarea').keypress(function() {
    var thisContent = $(this).val();
    CKEDITOR.instances.ckeditor.setData(thisContent);
    // CKEDITOR.instances.ckeditor.setData(thisContent, {internal: true});
});

Answer 3

I still can't figure out what "internal:true" does but it doesn't appear to help in this context.

I have answered a similar question at ckeditor onKeyUp event how? . I won't repost my answer here.