1

我创建了一个 javascript，它在 div 的单击事件上打开 ckeditor，并将数据从 div 获取到 ckeditor，现在我想要一些可以将更新的数据从 ckeditor 再次返回到该 div 的东西。并且是动态发生的。

我正在使用这个 javascript 从 div 获取数据 

//var editor, html = '';
function createEditor(ele)
{
var x = ele.innerHTML;


CKEDITOR.instances.editor1.setData(x);


 var y = document.getElementById("editor1").value;
alert(y);
//ele.innerHTML = y;
document.getElementById("editor1").style.display = "block";

}


    </script>

我的 HTML 是

 <div onclick="createEditor(this);" id="id2"> hello how r u? </div>

请帮助我

4

2 回答 2

4

所以我猜你想要 CKEditor 的实时预览？您将无法使用事件执行此操作keyup，但您可以使用 CKEditor 事件，如key( instance.on('key', doSomething());)。

第 1 步：向页面添加两个元素：

  1. 带有 ID 的文本区域：编辑器
  2. 带有 ID 的 div：预览

...
<body>
    <textarea id="editor"></textarea>
    <div id="preview"></div>
</body>
...

第 2 步：添加 javascript 以检测key事件并更新#preview：

CKEDITOR.replace('editor'); //new ckeditor instance
var editor = CKEDITOR.instances.editor; //reference to instance

//on `key` event
editor.on('key', function(){

  var data = editor.getData(); //reference to ckeditor data
  $('#preview').html(data); //update `div` html

});

我在 JSBin 创建了一个预览。

于 2012-11-21T13:46:40.080 回答
1

我认为，在您的 ckeditor textarea 上绑定 onKeyUp 事件应该可以解决问题。 http://www.w3schools.com/jsref/event_onkeyup.asp

于 2012-11-21T09:15:58.610 回答