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;＆gt;）时，编辑器会显示源代码对话框，但它是可编辑的。我想把它变为只读。它可行吗？

由于

Answer 1

我最近有同样的需求所以我从TinyMCE网站上的开发版本中获取了code插件源代码，并在ReadOnly模式下对其进行了修改以禁用源代码编辑。

我建议你像我一样，而不是直接修改你的代码插件，你应该创建一个新的。如果要调用customCode，请在plugins目录下创建名为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可以解决问题。

Tinymce＆＃34;代码＆＃34;对话框只读

2 个答案: