Tinymce에 html 파일을 업로드하여 컨텐츠를 읽고 편집자의 컨텐츠를 설정하십시오.

-1

html 파일 컨텐츠를 읽고 html 파일을 업로드 할 수있는 파일 브라우저를 표시하는 함수를 구현합니다.Tinymce에 html 파일을 업로드하여 컨텐츠를 읽고 편집자의 컨텐츠를 설정하십시오.

최대 파일 크기가 2MB 인 html 파일 업로드 만 허용하는 파일 브라우저를 여는 도구 모음 단추를 설정하려면 어떻게해야합니까? PHP에서 file_get_contents()와 같이 파일 내용을 저장하지 않고 읽을 수 있습니까?

출처

2016-11-24 bistami

나는 그것에 대한 내 자신의 TinyMCE 플러그인을 만들었습니다. 플러그인 작동 방식을 모르는 경우 TinyMCE plugins 디렉토리 아래에 htmlFileImport이라는 새 폴더를 만듭니다. 당신이 tinymce.min.js를 호출하는 경우,이 폴더 안에, 내가 이전에 init 함수 내 편집기에 추가 사용자 지정 속성이 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 내부에이 코드를 붙여 그렇지 않으면 이름을, 당신을 plugin.min.js라는 이름의 파일을 생성 확실히 자신 만의 메커니즘을 가지지 만, 나는이 코드를 통해 당신이 무슨 일이 일어나고 있는지 이해할 수있게 해준다.

가 그럼 그냥 같은 구성에 추가하여 편집기의 작성 중에 추가, 새로운 플러그인을 포함 : 전용 HTML 파일을 허용하는

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

을, 당신은 가져옵니다 사용자를 확보 할 수있는 방법이 없습니다이 파일의 유형. 파일 이름의 확장자가 .html인지 .htm인지 확인할 수 있습니다. 또는 내가 수행 한 것처럼 할 수 있습니다. <body> 태그가없는 경우 올바른 HTML이 아닌 것으로 간주합니다.

당신은 단순히 그래서 그냥 당신이 질문을 할 때, 당신은 당신이 뭔가를 시도하고 게시하기 전에 몇 가지 조사를했다는 것을 보여주고 있다고 당신에게

당신에 유래에 새로운 file.size를 호출하여 파일 크기를 확인할 수 있습니다. 간단한 Google 검색 인 것처럼 게시하지 않습니다. 우리는 우리가 붙어있을 때, 시험 후에 질문을 게시합니다.

출처

2016-11-30 01:39:47

Tinymce에 html 파일을 업로드하여 컨텐츠를 읽고 편집자의 컨텐츠를 설정하십시오.

답변

관련 문제