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解决了这个问题。