微小的MCE按鍵按下

我試圖做一個預覽框，其上.keyPress()像一個工作，當您提交的問題堆棧溢出，所不同的是怎麼過的我希望用微小的MCE編輯器，並將它識別輸入鍵，以便將保持相同的格式，用戶輸入什麼，我有一個看看這裏微小的MCE按鍵按下

Tinymce on keypress I am try to display the preview of the content

但說實話，我很新的這一點，並沒有真正理解如何實現它正確。我有微小的MCE編輯偉大的工作，但現在

我所想要做的就是創建一個div它得到從微小的MCE編輯器的內容和另一個DIV預覽。

來源

2011-11-10 Friendly Tech

您是否知道tinymce有預覽按鈕？在我的情況下，它被列在「字體大小」箭頭下方的最右邊。它的圖標類似於一個空白頁中有一個放大鏡（我用的是先進的主題） –

什麼，我想是有一個完全地不同的div它預覽 –

你提到的問題幾乎總結了它。首先，你要做的是一個預覽<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的實例。

來源

2011-11-10 20:07:31

微小的MCE按鍵按下

回答

相關問題