-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 に答える