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 text to the existing source. Can you help me how can I do it? Thank you in advance. Sorry for my english.

score 9 · Answer 1 · answered Jun 10 '14 at 17:51

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

score 9 · Accepted Answer · answered Feb 21 '11 at 21:51

9

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.

answered Feb 21 '11 at 21:51

Maricel

2,089
13
17

var element = CKEDITOR.dom.element.createFromHtml( '' ); CKEDITOR.instances.editor1.insertElement( element ); Ref: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertElement – Jitendra Pancholi Jul 02 '14 at 12:48
Saved my day :) insertHtml is automaticly closing tags insertElement is not :) – elrado Jul 23 '14 at 09:51
For me Instead of `CKEDITOR.instances.body` ID of my textarea worked `CKEDITOR.instances.editor1` – Muhammad Bilal Aug 26 '19 at 06:21

score 4 · Answer 3 · answered Oct 12 '17 at 09:28

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);

answered Oct 12 '17 at 09:28

Michaël Witrant

7,525
40
44

score 1 · Answer 4 · answered Mar 28 '16 at 01:36

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')">

How can I append text to html source in CKEditor?

4 Answers4

Linked