tinyMCE删除/禁用调整大小切换

时间:2012-11-12 22:43:15

标签: javascript wordpress tinymce

tinyMCE将move and resize handles添加到我的一些元素(不仅仅是图像)。

我很乐意一起摆脱它们但是我没有成功。

这些对我不起作用

tinyMCE.init({

   object_resizing : false

});

看起来应该很容易。

好的,所以看起来它正在将调整大小的js添加到绝对定位的任何元素。如果这有助于任何人得到答案。

我只是试图删除它,但我需要定位它来做我需要的。

2 个答案:

答案 0 :(得分:4)

删除jQuery,并使cheez la weez的答案适用于TinyMCE版本4.在插件,初始化代码或实例化编辑器后的页面中使用它

// var editor = your tinyMCE editor instance (e.g. tinymce.activeEditor)

editor.on('mousedown', function(e) {

        var element = e.target,
            body = editor.dom.doc.body;

        if (editor.dom.hasClass( element, 'your-class')) {
            editor.dom.setAttrib(body,'contenteditable',false);
        } else {
            editor.dom.setAttrib(body,'contenteditable',true);
        }
});

唯一不幸的是,您的用户必须点击返回编辑器才能继续编辑(箭头键无法正常工作)

答案 1 :(得分:3)

编辑器的body标签中的

是一个属性contenteditable="true"。这就是添加那些讨厌的大小调整元素的原因。

如果您将该属性设置为false,则无法修改任何内容。

您需要做的是设置一个onMouseDown侦听器。如果用户点击有问题的元素...将其设置为contenteditable="false"。如果有任何其他元素,请将其设置为contenteditable="true"

试试这个......

(function() {  

    tinymce.create('tinymce.plugins.yourplugin', {  

        init : function(ed, url) { 

            ed.onMouseDown.add(function(ed, e) {    

                var body = ed.getBody();

                if(jQuery(e.target).hasClass('target-in-question')) {

                    jQuery(body).attr({'contenteditable': false})

                    // and whatever else you want to do when clicking on that element

                }else {
                    jQuery(body).attr({'contenteditable': true})
                }

            }); 

        },  

        createControl : function(n, cm) {  

            return null;  

        },  

    });  

    tinymce.PluginManager.add('yourplugin', tinymce.plugins.yourpluginl);  

})();