[英]ckeditor onKeyUp event how?
此代码段必须将文本从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到textarea同步的演示,反之亦然: https : //jsfiddle.net/ty5ks393/1/ 。 输入三个白框之一,然后查看所有四个容器中的内容复制。
它使用Bootstrap保持整洁,并显示经典和内联CKEditor。 此处提取了相关部分(没有外部资源,注释和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中弹回。
希望对您有所帮助。
在四处搜寻之后,我发现了一篇文章( ckeditor-keyup-event ),指出CKEditor api不支持“ keyup ”事件。 仅支持侦听按键事件的“ key ”方法。
本文作者在editor.setData()的回调中使用editor.document.on ('keyup') ,该回调仅在初始化后可用。
我宁愿在初始化期间附加必需的keyup事件,因为他的解决方法不适用于我的用例。 我更改了您的代码,如下所示,尽管它实际上未附加到keyup事件,但对我来说效果很好。
CKEDITOR.replace( 'text' ,
{
allowedContent: true,
enterMode: CKEDITOR.ENTER_BR,
}).on('key',
function(e){
setTimeout(function(){
document.getElementById('text_hidden').value = e.editor.getData();
},10);
}
);
没有setTimeout()函数, getData()将无法获取最后一个按键。
如果要使所见即所得内容与文本区域同步,只需将on change事件作为选项来更新基础元素。
CKEDITOR.replace('editor', {
on: {
change: function() {
this.updateElement();
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.