加载文件到 tinyMCE 编辑器

Question

我有一个文件选择器，我想将选择的 HTML 和 XML 文件加载到 tinyMCE 编辑器文本区域中。

我有以下代码，但它不起作用。

<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>

准确地说，是这样的。我看到了一个文件选择器，但是当我单击打开文档时，所选文件没有输入到文本区域中。

下图。

Image of file choser

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

Answer 1

根据您对我的评论的最后回复，您不想要 TinyMCE 文件选择器功能 - 您需要构建一个 UI 允许选择文件、上传文件然后发送文件的 HTML 表示返回给浏览器，因此您可以通过 setContent() API.

将 HTML 插入编辑器

我会使用自定义工具栏按钮打开一个 "dialog"，它实际上是一个带有文件选择 UI 的单独 HTML 页面。选择文件后，您可以 POST 将其发送到您的服务器。服务器可以根据需要打开/处理文件并将 HTML 结果发送回您的 "dialog"。 "dialog" 然后可以使用 TinyMCE setContent() API 将数据加载到编辑器中。

一个简单的文件选择器不会做你需要的一切。

加载文件到 tinyMCE 编辑器

Load file into tinyMCE editor

javascript

jquery

tinymce