3

在 TinyMCE 4 编辑器中定位元素（比如给定类的所有图像）的最佳方法是什么。我发现了一些较旧的解决方案（即向 tinymce 编辑器中的元素添加悬停事件），但是它们适用于 TinyMCE 3。请注意，元素可以在初始渲染后添加到编辑器中，因此它需要类似于 jQuery 的on()功能。

一种选择可能是做类似的事情$('#tinymce_id').contents()...。

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

4

2 回答 2

5

我发现最好的方法。

tinymce.init({
    'selector': "#tinymce_id",
    'setup' : function(ed) { 
        ed.on('init', function(e) {
            $(ed.getBody()).on("click", "img", function() {alert('hello');});
        });
    }
});
于 2013-09-13T15:00:52.353 回答
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/

于 2013-09-12T21:25:49.953 回答