向TinyMCE添加自定义元素的首选方法

Question

I am new to tinyMCE and currently investigating the preferred way of adding custom elements to tinyMCE?

I added a number of buttons to the toolbar, that in turn trigger (a) the insertion of elements for selected parts of text and (b) remove those elements from selected text when clicked on again.

I do not want to allow nesting for these elements, so basically I just want to markup parts of a sentence or word with a given, non-overlapping, tag, eg: <foo>Hello</foo> world

For the moment I found these two possibilities in the tinyMCE docs:

#1 tinyMCE.execInstanceCommand(editor_id, command, user_interface, value, focus)    

and

#2  var n = dom.create(element);
    n.innerText = sel.getContent({format : 'text'});
    tinyMCE.activeEditor.selection.setNode(n);

where #2 looks like the more flexible approach and hence worth pursuing to me.

I already started implementing a plugin using approach #2, but I am unsure how I would handle stuff like:

• selections overlapping element boundaries and text nodes (like <foo>hello</foo> world <bar>!</bar>
• merging adjacent elements ( <foo>bar</foo><foo>bar</foo> ) or
• how to cope with empty elements and so on.

This is why I am wondering if I am missing some kind of predefined interface, because lots of these functionalities should as well be needed by the "normal" elements such as strong, em, h1,…,h6 and the like.

If you need any more information let me know, any hints or pointers will be appreciated.

Answer 1

For formatting purposes there is the Formatter.js class in the tinymce core files. But what you want is pretty complicated. We tried to hinder tinymce to nest spans and tweaked Formatter.js to our needs.