Question

我是TinyMCE的新手，但是我设法制作了一个按钮，其中包含<pre><code>...</code></pre>标签和一些代码。

在那里，用户只能编写源代码，但如果他们使用像bold这样的按钮，那么它会变为粗体..

我一直想找到一种方法来禁用它，并发现当你在特殊标签上时可以禁用按钮。

所以我想知道，如果有人知道这是怎么回事？

我有这个插件，这个例子是这样做的： https://code.google.com/p/tinymce-pre-plugin/ 如果您查看视频，就可以看到我的意思，他会在<pre><code>...</code></pre>之后查看0:40代码。

您可以在此处查看插件文件的来源：

(function() {
    tinymce.PluginManager.requireLangPack('pre');

    tinymce.create('tinymce.plugins.PrePlugin', {       
        init : function(ed, url) {          
            var t = this;
            t.editor = ed;

            ed.addCommand('mcePre', function() {
                ed.windowManager.open({
                    file : url + '/dialog.htm',
                    width : 500 + parseInt(ed.getLang('pre.delta_width', 0)),
                    height : 300 + parseInt(ed.getLang('pre.delta_height', 0)),
                    inline : 1
                }, {
                    plugin_url : url
                });
            });

            ed.addButton('pre', {
                title : 'pre.desc',
                cmd : 'mcePre',
                image : url + '/img/pre.gif'
            });

            ed.onNodeChange.add(function(ed, cm, n) {
                cm.setActive('pre', n.nodeName == 'CODE');

                if(n.nodeName == 'CODE') t._setDisabled(1);
                else t._setDisabled(0);

                var notEmptyNode = n.innerHTML.replace(new RegExp('<\/?[^>]+>', 'gi'), '').replace(new RegExp('&nbsp;', 'gi'), '').match(/.*?[\S].*?/);
                if(notEmptyNode && n.nodeName != 'CODE')
                cm.setDisabled('pre', true);

            });
        },

        createControl : function(n, cm) {
            return null;
        },

        getInfo : function() {
            return {
                longname : 'Pre plugin',
                author : 'Marchenko Alexandr',
                authorurl : 'http://webdiz.com.ua',
                infourl : 'http://webdiz.com.ua',
                version : "1.0"
            };
        },


        _block : function(ed, e) {
            var k = e.keyCode;

            // Don't block arrow keys, pg up/down, and F1-F12
            if (k == 46 || (k > 32 && k < 41) || (k > 111 && k < 124))
                return;

            if (e.preventDefault) {
                e.preventDefault();
                e.stopPropagation();
            }
            else {
                e.returnValue = false;
                e.cancelBubble = true;
            }
            return false;
        },

        _setDisabled : function(s) {
            var t = this, ed = t.editor;

            tinymce.each(ed.controlManager.controls, function(c) {
                if(c.settings.cmd != 'mcePre') {
                    c.setDisabled(s);
                }
            });

            if (s !== t.disabled) {
                if (s) {
                    ed.onKeyDown.addToTop(t._block);
                    ed.onKeyPress.addToTop(t._block);
                    ed.onKeyUp.addToTop(t._block);
                    ed.onPaste.addToTop(t._block);
                } else {
                    ed.onKeyDown.remove(t._block);
                    ed.onKeyPress.remove(t._block);
                    ed.onKeyUp.remove(t._block);
                    ed.onPaste.remove(t._block);
                }

                t.disabled = s;
            }
        }
    });

    // Register plugin
    tinymce.PluginManager.add('pre', tinymce.plugins.PrePlugin);
})();

Answer 1

我发现了。

这是执行此操作的代码：

ed.onNodeChange.add(function(ed, cm, n) {
    cm.setActive('pre', n.nodeName == 'PRE');

    if(n.nodeName == 'PRE') t._setDisabled(1);
    else t._setDisabled(0);

    var notEmptyNode = n.innerHTML.replace(new RegExp('<\/?[^>]+>', 'gi'), '').replace(new RegExp('&nbsp;', 'gi'), '').match(/.*?[\S].*?/);
    if(notEmptyNode && n.nodeName != 'PRE')
    cm.setDisabled('pre', true);

});

将PRE更改为应设置的任何标记，但禁用所有按钮，只保留活动按钮，但也不能写入文本。

超过<pre> tag</pre>时隐藏不相关的按钮

1 个答案: