Upload html file to Tinymce read content and set content of editor

Question

I will implement a function that display a file browser where i can upload a html file to read the html documents content and than past this content to editor.

How can i set a toolbar button that opens a file browser, that allows only html file uploads with max file size of 2MB. Can i read content of file without to save it, like file_get_contents() on php.

Jérôme MEVEL · Answer 1 · 2016-11-30T03:18:20.593

I created my own TinyMCE plugin for that. If you don't know how plugins work, create a new folder named htmlFileImport under the TinyMCE plugins directory. If you are calling tinymce.min.js, then inside this folder create a file named plugin.min.js, otherwise name it plugin.js then paste this code inside

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 and dialogInvalidHtmlFileId are custom properties I previously added to my editor in the init function, you will certainly have your own mechanism, but I let this code so you can understand what's going on.

Then to include this new plugin, just add it during your editor's creation by adding the configuration like this:

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

For allowing only HTML file, you have no way to ensure the user will import this file's type. You can check if file name's extension is .html or .htm or you can do like I did: if I can't find any <body> tag inside then I consider this is not a valid HTML.

You can check the file size by simply calling file.size

You are new on StackOverflow so just to tell you that when you ask a question, you have to show that you tried something and did some research before posting. Here we don't post like if it was a simple Google search. We post question when we are stuck, after trying.

Upload html file to Tinymce read content and set content of editor

1 Answers1