小さなMCEキープレス

Question

.keyPress()のようなプレビューボックスを作成しようとしていますが、Stack Overflowに質問を送信するときのように、ちょっと違います。小さなmceエディタを使用して、それは、ユーザが入力したものと同じ形式を維持するようにキーが、私はここで見て

Tinymce on keypress I am try to display the preview of the contentを持っていた

しかし、私はこれに非常に新しいですし、実際に実装する方法を理解していない正直に言うとそれは適切です。私は小さなmceのエディタを偉大な今働いている

私がしたいのは、小さなmceエディタからコンテンツを取得し、別のdivでプレビューするdivを作成することです。

Answer 1

あなたがリンクしている質問は、それをかなり要約しています。まず、何をやることはあなたのページにプレビュー<div>を追加している、何かのように：

<div id="tiny-mce-preview"></div> 

（あなたはこの質問がjQueryタグが付いているので、私はあなたがTinyMCEをjQueryのパッケージを使用していると仮定するつもりです）TinyMCE初期化の中で、onKeyPressイベントに関数を追加して、TinyMCEコンテンツをプレビュー<div>にコピーします。だから、完全な初期化は次のようなもののようになります。

var theEditor = $('textarea').tinymce({ 
    script_url: 'path/to/your/tinymce/tiny_mce.js', 
    height: "400", 
    width: "600", 

    // 
    // ... whatever other options you may have ... 
    // 

    // Capture the onKeyPress event and do something with TinyMCE's content 
    setup: function (theEditor) { 
     // "theEditor" refers to the current TinyMCE instance 
     theEditor.onKeyPress.add(function() { 
      // Get the current editor's content 
      var content = theEditor.getContent(); 
      // Find our "preview" div 
      // Set it's content to be the same as the editor's 
      document.getElementById("tiny-mce-preview").innerHTML = content; 
     }) 
    } 
}); 

キーはTinyMCEのインスタンス内で押されたときはいつでも、プレビューdivのコンテンツは、TinyMCEのインスタンスのものに設定されます。