Question

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

我正在使用此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>

请帮我解决这个问题

Answer 1

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

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

textarea with ID：editor
带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

});

<强> I've created a preview in JSBin

Answer 2

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

我想从ckeditor动态获取数据到div

2 个答案: