CODEWITHSUNDEEP
javascripttinymcerich-text-editor
michael
michael

Reputation: 1577

Preferred way of adding custom elements to TinyMCE

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, e.g.: <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:

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.

Upvotes: 1

Views: 612

Answers (1)

Thariama
Thariama

Reputation: 50840

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.

Upvotes: 1

Related Questions