For everyone else waiting for answers, here's how to insert text and such at the cursor from js. I don't say this is the single best way, the docs are a nightmare to wade through.
//change all "IDofEditor" to the id of your editor; I haven't figured out how to find it less explicitly //insert text CKEDITOR.instances.IDofEditor.insertText('some text here'); //insert a link (or other tags, modify as needed) //this example uses the selected text for the link text //if removing getSelection() and just inserting it all, you MUST have some link text or it will NOT insert; also if the user selected text first anyway it will change it to "NaN". //the \x22 represents a double quote, thus easy to use within an html onclick //getNative() gets the text, otherwise you get an object CKEDITOR.instances.IDofEditor.insertHtml('<a href=\x22my_link\x22>' + CKEDITOR.instances.IDofEditor.getSelection().getNative() + '</a>'); //you could also prompt the user for the link text (and title and link or anything else); very fast entry! CKEDITOR.instances.IDofEditor.insertHtml('<a title=\x22' + prompt('Title:','') + '\x22 href=\x22' + prompt('URL:','http://') + '\x22>' + prompt('Link Text:','') + '</a>'); //put quotes (or any text) around selected text (ckeditor uses the q tag for "Inline quotes" which doesn't work in ie7-) //use insertHtml() otherwise you get the text "“", but for regular text, use insertText() //getNative() gets the text, otherwise you get an object CKEDITOR.instances.IDofEditor.insertHtml('“' + CKEDITOR.instances.IDofEditor.getSelection().getNative() + '”') //put html tags around something //haven't tried yet, but I assume you can alter the above to do it //also getData() gets everything in the editor
I haven't yet figured out how to do this with custom buttons or dropdowns which would be better, but the above has already taken endless searching through the docs and forums and combing the source files and trying different things.
Hope it helps.
Admin: add a snippets forums for people to post solutions like this!
Re: here's how to insert text and tags at the cursor
Seems like Firefox has a small issue with this though. In FF, when it pastes the text at the cursor, it ends whatever formatting is currently in place and then re-establishes it after the end of the pasted text.
For instance:
In the editor would be some text in a font tag:
<FONT SIZE=3>Sample Text</FONT>
If I place my cursor in between Sample and Text and use javascript to insert the text, it comes out like this:
<FONT SIZE=3>Sample </FONT>Inserted Text<FONT SIZE=3>Text</FONT> which isn't really desired since now the user has to go back and redo the formatting.
It seems to work fine in IE though.
Re: here's how to insert text and tags at the cursor
Re: here's how to insert text and tags at the cursor
Same question here.
I have found a possible solution.
Use instead of
insertHTML('<tag>'+selectedText+'</tag>')
2 inserts on selectionStart and selectionEnd position
insertHTML('<tag>')
insertHTML('</tag>')
I have found the selected range positions with many ways, but I found no solution to set the cursor on this positions.
I have google for days and read the unfinished docu. Can please anybody help?
Re: here's how to insert text and tags at the cursor
Re: here's how to insert text and tags at the cursor
If you want to insert some HTML tagged text that retains the style of surrounding text you should use insertElement.
Note that there should be exactly one root element in html passed to createFromHtml.
So for example if you want to add two anchors,
DO NOT DO
but split it into two calls
Re: here's how to insert text and tags at the cursor
Re: here's how to insert text and tags at the cursor
Re: here's how to insert text and tags at the cursor
Re: here's how to insert text and tags at the cursor