Загрузите HTML-файл в Tinymce для чтения содержимого и установки содержимого редактора.

Я реализую функцию, которая отображает файловый браузер, где я могу загрузить HTML-файл, чтобы прочитать содержимое HTML-документов и затем передать этот контент в редактор.

Как я могу установить кнопку на панели инструментов, которая открывает браузер файлов, который позволяет загружать только HTML-файлы с максимальным размером файла 2 МБ. Могу ли я прочитать содержимое файла без сохранения, как file_get_contents() на php.

Источник

1 ответ

Для этого я создал свой собственный плагин TinyMCE. Если вы не знаете, как работают плагины, создайте новую папку с именем htmlFileImport под TinyMCE 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 функция, у вас наверняка будет свой собственный механизм, но я позволю этому коду, чтобы вы могли понять, что происходит.

Затем, чтобы включить этот новый плагин, просто добавьте его во время создания вашего редактора, добавив конфигурацию следующим образом:

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

Чтобы разрешить только HTML-файл, вы не можете гарантировать, что пользователь будет импортировать этот тип файла. Вы можете проверить, является ли расширение имени файла .html или же .htm или вы можете сделать, как я: если я не могу найти <body> тег внутри, то я считаю, что это не правильный HTML.

Вы можете проверить размер файла, просто позвонив file.size

Вы новичок в Stackru, поэтому просто скажу вам, что когда вы задаете вопрос, вы должны показать, что вы что-то пробовали и провели некоторое исследование, прежде чем публиковать. Здесь мы не публикуем сообщения, как если бы это был простой поиск в Google. Мы задаем вопрос, когда мы застряли, после попытки.

Источник
Другие вопросы по тегам