此代码段必须将文本从 textarea text
复制到 textarea text_hidden
,此代码在没有 ckeditor 的情况下工作
onKeyUp="document.getElementById('text_hidden').value = this.value;
但是当ckeditor启用时
onKeyUp="document.getElementById('text_hidden').value = this.value;
无效。
如何解决这个问题?
<textarea name="text" id="text" rows="6" cols="80" onKeyUp="document.getElementById('text_hidden').value = this.value;" ></textarea></p>
<textarea name="text_hidden" id="text_hidden" rows="6" cols="80" ></textarea>
<script>
CKEDITOR.replace( 'text' ,
{
allowedContent: true,
enterMode: CKEDITOR.ENTER_BR,
});
CKFinder.SetupCKEditor( editor, '/ckfinder/' );
config.startupPath = "/files/";
</script>
最佳答案
这是我的 CKEditor-to-textarea 同步演示,反之亦然: https://jsfiddle.net/ty5ks393/1/ 强>。输入三个白框之一,然后看到内容在所有四个容器中复制。
它使用 Bootstrap 来保持整洁,并显示经典和内联 CKEditors。相关部分(没有外部资源、评论和 console.logs)被提取在这里:
<div class="row">
<div class="col-sm-3">
<h2>TEXTAREA</h2>
<textarea id="textarea" class="box"></textarea>
</div>
<div class="col-sm-3">
<h2>CK EDITOR INLINE</h2>
<div contenteditable="true" id="contentedit" class="box"></div>
</div>
<div class="col-sm-3">
<h2>CK EDITOR</h2>
<textarea id="ckeditor" class="box"></textarea>
</div>
<div class="col-sm-3">
<h2>RESULT DIV</h2>
<div id="result" class="box"></div>
</div>
</div>
还有 jQuery:
$(function() {
CKEDITOR.disableAutoInline = true;
var ce = CKEDITOR.inline("contentedit", {
removePlugins: 'toolbar'
});
var ck = CKEDITOR.replace('ckeditor').on('change', function(e) {
if (document.activeElement.nodeName == "IFRAME") {
var thisHTML = e.editor.getData();
var tempDiv = $('<div>').html(thisHTML);
thisText = tempDiv.text();
$('#textarea').val(thisText);
$('#contentedit, #result').html(thisHTML);
}
});
var timer;
$('#textarea').keyup(function() {
var _this = this;
clearTimeout(timer);
timer = setTimeout(function() {
var thisText =$(_this).val().replace(/\n/g, "<br/>");
$('#result, #contentedit').html(thisText);
CKEDITOR.instances.ckeditor.setData(thisText);
}, 200);
});
$('#contentedit').keyup(function(e) {
var _this = this;
clearTimeout(timer);
timer = setTimeout(function() {
var thisHTML = $(_this).html();
var tempDiv = $('<div>').html(thisHTML.replace(/\<\/p\>/g,"</p>\n\n"));
thisText = tempDiv.text();
$('#textarea').val(thisText);
$('#result').html(thisHTML);
CKEDITOR.instances.ckeditor.setData(thisHTML);
}, 200);
});
});
所以我使用超时来避免使用 setData() 时 keyup 带来的瓶颈。我检测我是否在 IFRAME 中,以确保当我使用 setData() 更改其他容器之一的内容时,我不会将内容更改从 CKEditor 弹回。
希望对大家有所帮助。
关于javascript - ckeditor onKeyUp 事件如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22804731/