Question

我将实现一个显示文件浏览器的函数，我可以上传一个html文件来读取html文档内容，然后将这些内容传递给编辑器。

如何设置打开文件浏览器的工具栏按钮，只允许上传最大文件大小为2MB的html文件。我可以在不保存的情况下读取文件内容，例如php上的file_get_contents（）。

Answer 1

我为此创建了自己的TinyMCE插件。如果您不知道插件的工作原理，请在TinyMCE htmlFileImport目录下创建一个名为plugins的新文件夹。如果您正在调用tinymce.min.js，则在此文件夹中创建一个名为plugin.min.js的文件，否则将其命名为plugin.js，然后将此代码粘贴到

中

tinymce.PluginManager.add('htmlFileImport', function(editor, url) {
  editor.addButton('htmlFileImport', {
    text: "Import HTML File",
    icon: false,
    onclick: function() {
      if(editor.getContent() == ""){
          editor.showFileDialog();
      }
      else{
        editor.showReplaceContentConfirmDialog();
      }
    }
  });
  editor.showReplaceContentConfirmDialog = function(){  
    eval(editor.dialogConfirmReplaceContentId).Open();
    eval(editor.dialogConfirmReplaceContentId).setzIndex(101);
  }
  editor.showInvalidHtmlFileDialod = function(){
      eval(editor.dialogInvalidHtmlFileId).Open();
      eval(editor.dialogInvalidHtmlFileId).setzIndex(101);
  }
  editor.showFileDialog = function(){
      var fileSelector = document.createElement('input');
      fileSelector.setAttribute('type', 'file');
      fileSelector.style.display = 'none';
      fileSelector.onchange = function(e) { 
        var file = fileSelector.files[0];
        if (file) {
            var reader = new FileReader();
            reader.readAsText(file, "UTF-8");

            reader.onload = function (event) {
                var bodyHtml = event.target.result;

                var bodyOpen = bodyHtml.indexOf('<body');
                if(bodyOpen == -1)
                    bodyOpen = bodyHtml.indexOf('< body');

                var bodyClose = bodyHtml.indexOf('</body>') + 6;
                if(bodyClose == -1)
                    bodyClose = bodyHtml.indexOf('</ body>') + 7;

                if(bodyOpen != -1 && bodyClose != -1){
                    bodyHtml = bodyHtml.substring(bodyOpen, bodyClose);
                    var divHtml = document.createElement('div');
                    divHtml.style.display = 'none';
                    divHtml.innerHTML = bodyHtml;
                    editor.setContent(divHtml.innerHTML);
                }
                else{
                    editor.showInvalidHtmlFileDialod();
                }
            }
            reader.onerror = function (evt) {
                editor.showInvalidHtmlFileDialod();
            }
        }
      };    
      fileSelector.click();
   }
});

dialogConfirmReplaceContentId和dialogInvalidHtmlFileId是我之前在init函数中添加到我的编辑器中的自定义属性，您肯定会拥有自己的机制，但我让这段代码让您可以理解＃39; s继续。

然后要包含这个新插件，只需在编辑器创建过程中添加以下配置即可添加：

tinymce.init({
    plugins: [
        'yourOtherPlugins htmlFileImport'
    ],
    toolbar1: 'yourOtherPlugins htmlFileImport',
    .....
});

仅允许HTML文件，您无法确保用户将导入此文件的类型。您可以检查文件名的扩展名是.html还是.htm，或者您可以像我一样：如果我在内部找不到任何<body>标记，那么我会考虑这不是有效的HTML。

您只需拨打file.size

即可查看文件大小

您是StackOverflow的新手，所以只是告诉您，当您提出问题时，您必须证明您在发布之前尝试了一些事情并进行了一些研究。在这里，我们不会发布，就像它是一个简单的谷歌搜索。我们在尝试之后发布了问题。

将html文件上传到Tinymce读取内容并设置编辑器的内容

1 个答案: