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

当您单击代码按钮 (<>) 时，编辑器会显示源代码对话框，但它是可编辑的。我想将其设置为只读。可行吗？

谢谢

Answer 1

我最近有和你一样的需求，所以我从 TinyMCE 网站上的开发版本中获取了 code 插件源代码，并将其修改为在 ReadOnly 中禁用源代码编辑> 模式。

我建议你像我一样，不要直接修改你的代码插件，你应该创建一个新的。在 plugins 目录下创建一个名为 customCode 的新文件夹，如果您调用 tinymce，则创建一个名为 plugin.min.js 的文件。 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}'
});