Load file into tinyMCE editor

问题

I have a file picker and want to load HTML and XML files that are chosen into the tinyMCE editor textarea.

I have the below code and it is not working.

<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 looks like this:

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

To be precise, here is what occurs. I am presented with a file picker but when I click to open the document the chosen file is not input into the textarea.

Images below.

Image of file choser

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

回答1:

Based on your last response to my comments on the case you don't want the TinyMCE file picker capability - you need to build a UI that allows for selecting a file, uploading it, and then sending the HTML representation of the file back to the browser so you can insert that HTML into the editor via the setContent() API.

I would use a custom toolbar button to open a "dialog" that is really a separate HTML page with a file selection UI. Once the file is selected you can POST that to your server. The server can open / process the file as needed and send back HTML results to your "dialog". The "dialog" can then use the TinyMCE setContent() API to load the data into the editor.

A simple file picker won't do everything you need.

来源：https://stackoverflow.com/questions/43458042/load-file-into-tinymce-editor

标签

javascript

jquery

tinymce