1

divのクリックイベントでckeditorを開き、divからckeditorにデータを取得するJavaScriptを作成しました。今度は、更新されたデータを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イベントを使用することはできます。keyinstance.on('key', doSomething());

ステップ1：ページに2つの要素を追加します。

  1. IDのテキストエリア：エディター
  2. ID付きのdiv：プレビュー

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

ステップ2：keyイベントを検出して更新するJavaScriptを追加します#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 に答える