Question

在TinyMCE 4编辑器中定位元素（比如给定类的所有图像）的最佳方法是什么。我发现了一些较旧的解决方案（即Adding hover event to elements inside a tinymce editor），但它们适用于TinyMCE 3.请注意，元素可以在初始渲染后添加到编辑器中，因此需要jQuery的on()功能。< / p>

一种选择可能是做$('#tinymce_id').contents()...。

之类的事情

或者在配置TinyMCE时，tinymce.init({'selector': '#tinymce_id','setup' : function(ed) {do something here?}});

Answer 1

我找到的最佳方式。

tinymce.init({
    'selector': "#tinymce_id",
    'setup' : function(ed) { 
        ed.on('init', function(e) {
            $(ed.getBody()).on("click", "img", function() {alert('hello');});
        });
    }
});

Answer 2

使用此逻辑：

获取TinyMCE文字
将其转换为DOM（HTML）元素
使用jquery
使用所选元素修改或执行您想要的操作
将html转换回文本
将TinyMCE编辑器的内容设置为新的html

//on click event
$("#test").click(function(){
    //get the text of the tinymce editor and convert it to an html element
    html = $.parseHTML(tinymce.activeEditor.getContent());

    //do anything with the content here
    $(html).find("img.editor-img").css("width", "100px");

    //convert it back to text
    text = $(html).html();
    //add it to the tinymce
    tinymce.activeEditor.setContent(text);
});

示例：http://jsfiddle.net/rqwVA/1/

TinyMCE编辑器中的目标元素

2 个答案: