Tinymce "code" 对话框只读

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}'
});

单击"代码"按钮（＆lt;>）时，编辑器显示源代码对话框，但可以编辑。我想让它只读。它可行吗？

谢谢

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

在tinymce/plugins/code文件夹中编辑plugin.min.js文件，更改

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

to

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

添加z-index: 1000解决了问题。