javascript 我想从ckeditor动态获取数据到div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13489827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I want to get data from ckeditor dynamically to the div
提问by Nishant Solanki
I have created a javascript which opens ckeditor on click event of div, and gets the data from the div to ckeditor, now i want something what can get that updated data from ckeditor back to that div again. and which happens dynamically.
我创建了一个 javascript，它在 div 的点击事件上打开 ckeditor，并将数据从 div 获取到 ckeditor，现在我想要一些可以将更新的数据从 ckeditor 再次返回到该 div 的东西。这是动态发生的。
I am using this javascript to get data from 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>
And my HTML is
我的 HTML 是
<div onclick="createEditor(this);" id="id2"> hello how r u? </div>
Please help me on this
请帮我解决这个问题
回答by Nadav S.
So I guess you want a live preview for CKEditor? You'll not be able to do this with the event keyup, but you can use CKEditor events like key(instance.on('key', doSomething());).
所以我猜你想要 CKEditor 的实时预览？您将无法使用 event 执行此操作keyup，但您可以使用 CKEditor 事件，例如key( instance.on('key', doSomething());)。
Step 1:Add two elements to the page:
第一步：在页面中添加两个元素：
- textarea with ID: editor
- div with ID: preview
- 带有 ID 的文本区域：编辑器
- 带 ID 的 div：预览
...
<body>
<textarea id="editor"></textarea>
<div id="preview"></div>
</body>
...
Step 2:Add javascript to detect keyevents and update #preview:
第 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
});
回答by skipi
I think, that binding onKeyUp event on your ckeditor textarea, should do the trick. http://www.w3schools.com/jsref/event_onkeyup.asp
我认为，在您的 ckeditor textarea 上绑定 onKeyUp 事件应该可以解决问题。 http://www.w3schools.com/jsref/event_onkeyup.asp
