TinyMCE Custom Link button/command (with jQuery)

Question

I have a TinyMCE editor with its default toolbar hidden, and have created my own to replace it (simplified with office2007 style css previews).

I'm having an issue with creating a link via code (I load my own jQuery UI window with a list of pages generated by the cms, this returns a url to my code).

How I'm doing it is as follows:

Adding the following to TinyMCE setup config:

execcommand_callback : 'NEWCMS.editor.util.override'

So any command performed gets run through that function before doing the default behaviour.

In that function I check if its an 'mceLink' event (got my custom toolbar sending commands correctly, so not an issue there). When I get one, I display a window which returns the url the user has selected. It's at this point I have an issue.

I get the selected node using

var inst = $('#jbcms_editor_textarea').tinymce();
var selectedNode = inst.selection.getNode();

but its returning the node of the paragraph, as expected.

What I need to do is wrap the selection in <a> tags so I can then use that <a> node, but cannot find out how to do this. I've gone through the API but can't find what I'm looking for. There must be something though, as TinyMCE must use it internally. (I've also tried looking into the TinyMCE source but its beyond me!)

Anyone got any ideas?

Thanks

Answer 1

You could get the selected content wrap it into an a-tag and write it back to the editor:

var inst = $('#jbcms_editor_textarea').tinymce();
var content = inst.selection.getContent();
inst.execCommand('insertHTML',false, '<a>'+content+'</a>'); #you may add attributes here too (like href)