Dynamically Insert String into Ckeditor

As far as ckeditor is getting popular our expectation is getting higher for it. Ckeditor is very flexible and easy to use WYSIWYG editor. You can see significant difference between Ckeditor and second most popular WYSIWYG editor here. It is google trends match result. Okay enough talk about world lets come to the main point.
Many times it happens when you need to insert a string or link or anything like that into ckeditor editor dynamically using Javascript.

Suppose you have number of checkboxes and by clicking on them you want to insert a string into ckeditor. Today's tutorial is based on this topic, how to dynamically insert a text string or an image URL or any other link into ckeditor editor. For that you need to setup ckeditor as shown below. Remember your textarea box, to whom you point ckeditor, must have a unique ID. Now lets setup ckeditor first.

You can download ckeditor from here. Extract zip file into a folder name ckeditor.

Setup Ckeditor

<script type=”text/javascript” src=”ckeditor/ckeditor.js”></script>
<script type=”text/javascript”>
function insertIntoCkeditor(str){
    CKEDITOR.instances[ckeditor_id].insertText(str);
}
</script>

HTML

<textarea id=”my_ckeditor” class="ckeditor"></textarea>
<input type=”button” onclick=”insertIntoCkeditor(‘Hey, I have been inserted into ckeditor, right? I hope I am not lost!!’)”>