Log in or register to post comments
Last post
stylo~'s picture
Joined: 13/07/2009
Posts: 40
here's how to insert text and tags at the cursor
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 "&ldquo;", but for regular text, use insertText()
//getNative() gets the text, otherwise you get an object
CKEDITOR.instances.IDofEditor.insertHtml('&ldquo;' + CKEDITOR.instances.IDofEditor.getSelection().getNative() + '&rdquo;')

//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!
philmr's picture
Joined: 19/11/2009
Posts: 1
Re: here's how to insert text and tags at the cursor
Thanks. This was exactly what I was looking for to do a merge field function for forms/emails.

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.
f.zamboni's picture
Joined: 08/02/2010
Posts: 2
Re: here's how to insert text and tags at the cursor
Has anybody any solution for the problem noticed in the previous post? I use insertHtml in the application i'm building to allow users to insert automatically some codes too difficult to fill by hand, but losing text-formatting for those codes is quite a nuisance.
blackspoon's picture
Joined: 17/04/2011
Posts: 8
Re: here's how to insert text and tags at the cursor
f.zamboni wrote:Has anybody any solution for the problem noticed in the previous post?

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?
blackspoon's picture
Joined: 17/04/2011
Posts: 8
Re: here's how to insert text and tags at the cursor
My last post here. Who has problems with insertHTML(), which should go to tinymce. I have search here for over a week a solution for this bug(?) and get no support here. With tinymce I have insert a (for me) unknown editor, create plugins and insert html with selected text, without a problem. That all in less a hour. Think about it.
typeof's picture
Joined: 24/04/2011
Posts: 99
Re: here's how to insert text and tags at the cursor
Right, editor.insertHtml gives different results in FF and IE. We could discuss which one is more intuitive (it depends on a particular need) but in this situation the best is to avoid insertHtml at all.

If you want to insert some HTML tagged text that retains the style of surrounding text you should use insertElement.

var oEditor = CKEDITOR.instances.yourEditorID;
var html = "<a href="#">my anchor</a>";

var newElement = CKEDITOR.dom.element.createFromHtml( html, oEditor.document );
oEditor.insertElement( newElement );


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

// wrong html, two root elements
createFromHtml("<a href="#">ANCHOR 1</a><a href="#">ANCHOR 2</a>", ...) 
insertElement

but split it into two calls

createFromHtml("<a href="#">ANCHOR 1</a>",  ...)
insertElement
createFromHtml("<a href="#">ANCHOR 2</a>",  ...)
insertElement
typeof's picture
Joined: 24/04/2011
Posts: 99
Re: here's how to insert text and tags at the cursor
@BlackSpoon - and here is a more sophisticated example that I believe may suit your needs

var fragment = oEditor.getSelection().getRanges()[0].extractContents()
var container = CKEDITOR.dom.element.createFromHtml("<b/>", oEditor.document)
fragment.appendTo(container)
oEditor.insertElement(container)
farecat's picture
Joined: 25/04/2011
Posts: 1
Re: here's how to insert text and tags at the cursor
Thanks, I would never be able to get it without this forum.
ruralprogrammer's picture
Joined: 04/04/2012
Posts: 1
Re: here's how to insert text and tags at the cursor
Just wanted to say a huge thankyou.
l5eoneill's picture
Joined: 20/05/2011
Posts: 4
Re: here's how to insert text and tags at the cursor
@typeof -- It'd be so great if you could explain that code snippet in some detail. I can't quite suss it out, all the way -- in order to adapt it to my own plugin problem.
tien360dn's picture
Joined: 31/12/2013
Posts: 2
i'm not insert special " " in code snippet

Please help me

Example

config.language = 'vi';

 

tien360dn's picture
Joined: 31/12/2013
Posts: 2
giúp tôi chèn kí tự &*

<>&*