将文件加载到tinyMCE编辑器中 [英] Load file into tinyMCE editor

问题描述

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

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看起来像这样:

textarea looks like this:

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

确切地说，这就是发生的情况.系统为我提供了一个文件选择器，但是当我单击以打开文档时，所选文件未输入到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.

下面的图像.

文件选择器的图像

如果我要打开这些文件之一，它们将不在tinymce文本区域中...

推荐答案

基于您对我不想使用TinyMCE文件选择器功能的评论的最新回应-您需要构建一个UI，以选择一个文件，然后将其上传，然后将文件的HTML表示形式发送回浏览器，以便您可以通过setContent() API将HTML插入编辑器中.

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.

我将使用自定义工具栏按钮打开对话框"，该对话框实际上是带有文件选择UI的单独HTML页面.选择文件后，您可以将其发布到服务器.服务器可以根据需要打开/处理文件，并将HTML结果发送回对话框".然后，对话框"可以使用TinyMCE 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.

这篇关于将文件加载到tinyMCE编辑器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！