How can I append text to html source in CKEditor?

Question

I use CKEditor in my web-application. By click on one link i appends some text to CKEditor. It works fine. But when I open source tab, i can not append this te

Answer 1

According to this post http://www.techsirius.com/2013/09/dynamically-insert-string-into-ckeditor.html

You can insert text into ckeditor(textarea). You just need to give an unique ID to ckeditor(textarea) after that follow below code.

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

This is working demo link. http://demo.techsirius.com/demo/dynamically-insert-string-into-ckeditor

Answer 2

Other sample working function :

  function insertIntoCkeditor(str,url){

  var tagHtml = ''+str+'';

    //CKEDITOR.instances['bilgi'].insertText(tagHtml);
    CKEDITOR.instances['bilgi'].insertHtml(tagHtml);
    //CKEDITOR.instances.body.insertElement(tagHtml);
  }

onclick="insertIntoCkeditor('Parakazan','Http://www.parakazan.org')"> 

Answer 3

If you are trying to append HTML text, you could use the createFromHtml method like this for example:

var imgHtml = CKEDITOR.dom.element.createFromHtml("<img src=" + imageSrcUrl + " alt='' align='right'/>");

where imageSrcUrl is the image location and then you can insert it into the ckeditor source like this:

CKEDITOR.instances.body.insertElement(imgHtml);

There are other methods like insertHtml or insertText, you can check the CKEditor APIs for more details on these.

Answer 4

To append HTML at the end you can do this:

var targetEditor = CKEDITOR.instances.idOfYourTextarea;
var range = targetEditor.createRange();
range.moveToElementEditEnd(range.root);
targetEditor.insertHtml("<p>foo</p>", 'html', range);