ファイルをtinyMCEエディタにロード

Question

私はファイルピッカーを持っており、tinyMCEエディタのテキストエリアに選択されたHTMLファイルとXMLファイルをロードしたいと思っています。

以下のコードがあり、動作しません。

<script type="text/javascript"> 
tinymce.init({ 
selector: 'textarea', // change this value according to your HTML 
height: 400, 
browser_spellcheck: true, 
plugins: "code,table,textcolor,save,preview,searchreplace,advlist,textcolor,hr,fullscreen", 
toolbar: [ 
'save | undo redo | styleselect | fontsizeselect | bold strikethrough italic forecolor backcolor | link image | alignleft aligncenter alignright | numlist bullist | indent outdent | table | code | fullscreen' 
], 
file_browser_callback: function(field_name, url, type, win) { 
    win.document.getElementById(field_name).value = 'editor'; 
    console.log(win.document.getElementById(field_name).value); 
}, 
save_onsavecallback: function() { 
var doc = tinymce.get('content').getDoc(); 
console.log('Content: ', doc); 
} 
}); 
</script> 

テキストエリアは次のようになります。正確には

<textarea class="form-control" id="editor"></textarea> 

、ここでは何が起こるかです。ファイルピッカーが表示されますが、ドキュメントを開くときにクリックすると、選択したファイルがテキストエリアに入力されません。

以下の画像。あなたはTinyMCEをファイルピッカー機能を望んでいない場合に私のコメントにあなたの最後の応答に基づいて

Image of file choser

If i were to open one of these files they would not be in tinymce textarea...

Answer 1

- あなたがファイルを選択することができますUIを構築する必要があり、アップロードそのファイルのHTML表現をブラウザに送り返して、そのHTMLをsetContent() API経由でエディタに挿入することができます。

私はカスタムツールバーボタンを使用して、実際にはファイル選択UIを持つ別のHTMLページである「ダイアログ」を開きます。ファイルを選択すると、そのファイルをサーバーにPOSTできます。サーバーは必要に応じてファイルを開いたり、処理したり、HTML結果をあなたの「ダイアログ」に返送することができます。 「ダイアログ」はTinyMCE setContent() APIを使用してデータをエディタにロードできます。

シンプルなファイルピッカーは、必要なすべてを行うわけではありません。