用 jQuery 同步 CKEditor 和 TEXTAREA

Posted 2023-05-07

【中文标题】用 jQuery 同步 CKEditor 和 TEXTAREA

【英文标题】：Sync CKEditor and a TEXTAREA with jQuery

【发布时间】：2015-10-04 00:09:43

【问题描述】：

我需要 TEXTAREA 和 CKEditor 实例中的内容保持同步。 （我不需要插入符号位置相同，只需内容。）

我有 jQuery 事件侦听器来处理往返，但推荐的 CKEditor jQuery 事件是“更改”。这意味着当我输入 TEXTAREA 时，内容会复制到 CKEditor，然后立即复制回我正在输入的 TEXTAREA。如果我打字慢，我会在字母之间插入额外的空格。请参阅 https://jsfiddle.net/L4gotgb2/1/，其中重要的代码是：

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

CKEditor 文档 (http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData) 在 setData() 上提到了一个“internal: true”选项，这听起来很有希望，因为当我以编程方式更新内容时，我需要防止 CKEditor 'change' 被触发。我无法选择做任何事情。它实际上完全阻止了 CKEditor 的更新。

我错过了什么？

【参考方案1】：

只需告诉 on change 事件作为更新底层元素的选项。

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

【参考方案2】：

我已经在这里更新了你的 jquery 代码。您必须检查 ckeditor 更改事件中的焦点条件。因为当 textarea 改变时也会触发 CKeditor 事件。从而出现问题；我的情况如下： 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);
);

【讨论】：

我喜欢你检查焦点的想法，但 $('#textarea').focus() 实际上专注于 #textarea 而不是返回布尔值。所以它不能解决问题（正如我们在您的jsfiddle.net/L4gotgb2/2 中看到的那样）。但是，它给了我在“更改”事件侦听器中检查 document.activeElement 的想法，并且我已经接近了一个解决方案，一旦我完成了更多测试，我将发布该解决方案。

【参考方案3】：

我仍然无法弄清楚“internal:true”是做什么的，但在这种情况下它似乎没有帮助。

我在ckeditor onKeyUp event how? 回答了类似的问题。我不会在这里重新发布我的答案。