inserting values into a richtext field (CKEditor)

  • 1
  • Question
  • Updated 9 months ago
  • Answered
Hi all,
I'm trying to find a way to insert value from "outside" into a richtext field (CKEditor) via JS snippet. While there are some examples available regarding normal CKEditor usage (https://ckeditor.com/old/forums/CKEditor-3.x/heres-how-insert-text-and-tags-cursor), I get stuck at the very first step -> getting the CKEditor instance in javascript.

This should work
var oEditor = CKEDITOR.instances.yourEditorID;


but "instances" is empty in my skuid page (normal Field Editor showing rich text editor).

Can someone point me the way?
Photo of andre b

andre b

  • 110 Points 100 badge 2x thumb

Posted 9 months ago

  • 1
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Hi Andre,

If I'm understanding the issue correctly, here is a solution employed by one of my fellow engineers.

Example JS Snippet:

function insertIntoEditor(text){
    CKEDITOR.instances['YourEditorID'].insertText(text);
}

It's possible that the default editor ID is "editor1".

Example HTML Markup:

<a onclick="insertIntoEditor('{Event_Edition__c.Name}')">Event Name</a> 

I hope this puts you back in business.
Photo of andre b

andre b

  • 110 Points 100 badge 2x thumb
Thanks Matthew,
accessing the editor with "editor1" didn't work for me.

Looks like editor IDs are "inherited" from the field editor ID, which can't be influenced at design-time within the skuid page editor (as for as I know). So there is no dedicated ID that can be used.


Instead I used the following , which obviously only works for one (the first) editor instance within the page.


var params = arguments[0],
    $ = skuid.$;

var editor = $('div[class*="cke_editable"]').first(); 
var editorId = editor.attr('id');

CKEDITOR.instances[editorId].insertHtml('<ul><li><b>a new html list entry</b></li><li>another one</li><ul>');