Tinymce「代碼」對話框只讀

Question

有沒有辦法讓tinymce代碼編輯器爲只讀？

我創建了這個樣本：http://codepen.io/costa_b/pen/woRpKO。這裏的源代碼TinyMCE的組件的初始化：

tinymce.init({ 
    selector: 'textarea', 
    height: 500, 
    menubar: false, 
    plugins: [ 
    'advlist autolink lists link charmap code ', 
    'searchreplace ', 
    'insertdatetime paste contextmenu' 
    ], 
    toolbar: 'undo redo | insert | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | code ', 
    //content_css: '//www.tinymce.com/css/codepen.min.css', 
    content_style: 'p {margin: 0px; border: 0px solid red; padding: 0px}' 
}); 

當你點擊按鈕的代碼（<>），編輯器顯示的源代碼對話框，但它是可編輯的。我想讓它只讀。它可行嗎？

感謝

Answer 1

我有同樣的需求，因爲你最近讓我從TinyMCE的網站開發版本拿着code插件的源代碼，並修改它禁用，而在ReadOnly模式的源代碼編輯。

我建議你像我一樣做，而不是直接修改你的代碼插件，你應該創建一個新的。在plugins目錄下創建一個名爲customCode的新文件夾，並創建一個名爲plugin.min.js的文件，如果您致電tinymce.min.js，則應將其文件命名爲plugin.js。然後粘貼內

//Modified version of "code" plugin 
/** 
* plugin.js 
* 
* Released under LGPL License. 
* Copyright (c) 1999-2015 Ephox Corp. All rights reserved 
* 
* License: http://www.tinymce.com/license 
* Contributing: http://www.tinymce.com/contributing 
*/ 

/*global tinymce:true */ 

tinymce.PluginManager.add('customCode', function(editor) { 
    function showDialog() { 
     var win = editor.windowManager.open({ 
      title: "Source code", 
      body: { 
       type: 'textbox', 
       name: 'customCode', 
       multiline: true, 
       minWidth: editor.getParam("code_dialog_width", 600), 
       minHeight: editor.getParam("code_dialog_height", Math.min(tinymce.DOM.getViewPort().h - 200, 500)), 
       spellcheck: false, 
       style: 'direction: ltr; text-align: left' 
      }, 
      onSubmit: function(e) { 
       // We get a lovely "Wrong document" error in IE 11 if we 
       // don't move the focus to the editor before creating an undo 
       // transation since it tries to make a bookmark for the current selection 
       editor.focus(); 

       if(editor.readonly != true){ 
        editor.undoManager.transact(function() { 
         editor.setContent(e.data.customCode); 
        }); 
       } 

       editor.selection.setCursorLocation(); 
       editor.nodeChanged(); 

      } 
     }); 


     // Gecko has a major performance issue with textarea 
     // contents so we need to set it when all reflows are done 
     win.find('#customCode').value(editor.getContent({source_view: true})); 

     //disable source code editing while in readonly mode 
     if(editor.readonly){ 
      var id = win.find('#customCode')[0]._id; 
      $(win.find('#customCode')[0]._elmCache[id]).prop('readonly', true); 
     } 

     //This was an attempt to disable the "save" button but nothing I've tried is working. 
     //So far we are good because the user cannot modify the source code anyway 
     /*for (var property in win.find('#code')[0].rootControl.controlIdLookup) { 
      if (win.find('#code')[0].rootControl.controlIdLookup.hasOwnProperty(property)) { 
       var realProperty = win.find('#code')[0].rootControl.controlIdLookup[property]; 
       var element = $($(realProperty._elmCache[realProperty._id])[0].children[0]); 
       if(element.prop('type') == 'button'){ 
        $(element).prop('disabled', true); 
        console.log(element.attr('disabled')); 
        console.log(element.prop('disabled')); 
       } 
      } 
     }*/ 
    } 

    editor.addCommand("mceCustomCodeEditor", showDialog); 

    editor.addButton('customCode', { 
     icon: 'code', 
     tooltip: 'Source code', 
     onclick: showDialog, 
     classes:'customCode' 
    }); 

    editor.addMenuItem('customCode', { 
     icon: 'code', 
     text: 'Source code', 
     context: 'tools', 
     onclick: showDialog 
    }); 
}); 

這個代碼然後你TinyMCE的初始化應該成爲

tinymce.init({ 
    selector: 'textarea', 
    height: 500, 
    menubar: false, 
    plugins: [ 
     'advlist autolink lists link charmap customCode ', 
     'searchreplace ', 
     'insertdatetime paste contextmenu' 
    ], 
    toolbar: 'undo redo | insert | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | customCode ', 
    //content_css: '//www.tinymce.com/css/codepen.min.css', 
    content_style: 'p {margin: 0px; border: 0px solid red; padding: 0px}' 
}); 

Answer 2

編輯plugin.min.js文件中的文件夾tinymce/plugins/code，改變

style:"direction: ltr; text-align: left"} 

到

style:"direction: ltr; text-align: left; z-index:1000;"} 

加入z-index: 1000解決了這個問題。