サーバからTinymceエディタにHTMLファイルを読み込む方法

Question

TinyMceでHTMLファイルを読み込んで編集可能なテキストエリアに読み込む必要がありました。 TinymceのWebサイトのドキュメントには、これに関する明確な説明はありません。

私はコードをSpring MVCのThymeleafテンプレートに入れています。

Answer 1

まず、ajaxとjqueryを使用してファイルをロードする必要があります。

<script> 
$(document).ready(function(){ 
    $("button.ext").click(function(){ 
     $.ajax({url: "hello", success: function(result){ 
      $("#div1").html(result); 
     }}); 
    }); 
}); 
</script> 

このスクリプトでは、クラスがextのボタンが必要です。私たちが必要なのTinyMCEスクリプト

tinymce.init({ 
    selector: "textarea", 
    plugins: [ 
     "advlist autolink lists link image charmap print preview anchor", 
     "searchreplace visualblocks code fullscreen", 
     "insertdatetime media table contextmenu paste" 
    ], 
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image" 
}); 

を持っている必要がで... HTML本文では、ご覧のように、セレクタがテキストエリアがあるヘッダーには、このボタンを

<button class="ext">Get External Content</button> 

を作成する必要があります。

html本文には、このテキストエリアを配置します。

<textarea id="t1" style="width: 300px; height: 100px;"></textarea> 

id = "t1"に注意してください。

はのは、今では

<script type="text/javascript"> 
function updateEditor(taClass) { 
    var table = $("#div1").html(); 
    tinyMCE.get(taClass).setContent(table); 
} 
</script> 

は、したがって、上記のスクリプトでは、最初のパラメータ（taClass）を通過させる能力を持つ関数があるテキストエリアの内容を設定します入れましょう。私たちの場合、これはt1（id = "t1"の場合）になります。

次に、最初のajaxスクリプトで設定したid＃div1に変数テーブルを割り当てます。

この例では、ジョブonClickを完了するボタンを使用します。

<button id="div1button" onclick="updateEditor('t1'); return false;">Set content to tinyMCE textarea 1</button> 

これは100％完璧ではないことに注意してください。これはどのようにこれを行うことができるかの概念を説明するための教育的な例であることを意図しています。 ajaxによって読み込まれたコンテンツは明白になります。それを隠すか、あなたが望むものを何でもして、それをきれいにすることはあなたの仕事になります。

私にとっては、この例はThymeleafで途中で機能します。