HTML文件上傳到TinyMCE的閱讀內容和編輯

-1

的設置內容我將實現顯示一個文件瀏覽器，在那裏我可以上傳一個HTML文件中讀取HTML文檔的內容和過去相比這個內容編輯器功能。HTML文件上傳到TinyMCE的閱讀內容和編輯

如何設置打開一個文件瀏覽器工具欄按鈕，只允許HTML文件上傳2MB的最大文件大小。我可以讀取文件的內容而不保存它，例如php上的file_get_contents（）。

2016-11-24 bistami

我創建了自己在TinyMCE插件爲。如果你不知道怎麼的插件工作，創建TinyMCE的plugins目錄下名爲htmlFileImport一個新的文件夾。如果要調用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所以只是告訴你，當你問一個問題，你必須證明你嘗試過的東西，在發佈前做了一些研究檢查文件的大小。在這裏，我們不會發布，如果它是一個簡單的谷歌搜索。我們在嘗試後發帖時提出問題。

來源

2016-11-30 01:39:47

HTML文件上傳到TinyMCE的閱讀內容和編輯

回答

相關問題