The forum operates in read-only mode. Please head to StackOverflow for support.

Mon, 08/31/2009 - 08:49

stylo~

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!

Thu, 11/19/2009 - 00:19

philmr

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:
Sample Text

If I place my cursor in between Sample and Text and use javascript to insert the text, it comes out like this:
Sample Inserted TextText 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.

Mon, 02/08/2010 - 13:42

f.zamboni

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.

Thu, 04/21/2011 - 17:06

blackspoon

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?

Sat, 04/23/2011 - 13:45

blackspoon

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.

Sun, 04/24/2011 - 10:57

typeof

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

Sun, 04/24/2011 - 21:19

typeof

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)

Mon, 04/25/2011 - 22:09

farecat

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.

Wed, 04/04/2012 - 09:47

ruralprogrammer

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.

Wed, 04/11/2012 - 16:27

#10

l5eoneill

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.