-1

我将实现一个显示文件浏览器的功能，我可以在其中上传 html 文件以读取 html 文档内容，然后将此内容传递给编辑器。

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

4

1 回答 1

1

我为此创建了自己的 TinyMCE 插件。如果您不知道插件是如何工作的，请htmlFileImport在 TinyMCEplugins目录下创建一个名为的新文件夹。如果您正在调用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，您肯定会有自己的机制，但我让这段代码让您了解发生了什么。

然后要包含这个新插件，只需在编辑器创建期间通过添加如下配置来添加它：

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

对于只允许 HTML 文件，您无法确保用户将导入此文件的类型。您可以检查文件名的扩展名是否为.html或.htm您可以像我一样做：如果我在里面找不到任何<body>标签，那么我认为这不是一个有效的 HTML。

您只需调用即可检查文件大小file.size

您是 StackOverflow 的新手，所以只是想告诉您，当您提出问题时，您必须表明您在发布之前尝试过某些事情并进行了一些研究。在这里，我们不会像简单的 Google 搜索那样发布。当我们被卡住时，我们在尝试之后发布问题。

于 2016-11-30T01:39:47.500 回答