Tinymce "code" dialog read-only

Question

Is there a way to make the tinymce code editor read-only?

I created this sample: http://codepen.io/costa_b/pen/woRpKO. Source code here for initialization of the tinymce component:

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

When you click on the code button (<>), the editor shows the source code dialog, but it is editable. I want to make it read-only. Is it doable?

Thanks

Answer 1

I had the same need as you recently so I took the code plugin source code from the development version on TinyMCE website and modified it to disable source code editing while in ReadOnly mode.

I advise you to do like me, instead of modifying directly your code plugin, you should create a new one. Create a new folder named customCode under the plugins directory and create a file named plugin.min.js if you are calling tinymce.min.js otherwise your file should be named plugin.js. Then paste this code inside

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

Then your TinyMCE initialization should become

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

Edit the plugin.min.js file in the tinymce/plugins/code folder, changing

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

to

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

adding z-index: 1000 solves the problem.