How to load multiple CKEditor toolbars on the same web page

Question

I have two divs on the same page using CKEditor. I can get a toolbar to load for the first div, but not the second. I realize this is the case because I'm using an id for ckToolbar instead of a class. However, if I use a class, the toolbar doesn't show up.

Div 1

<div id="ckEditor">
    <div id="ckToolbar"></div>
    <div class="editor" data-bind="wysiwyg: txtBody, value:txtBody, valueUpdate:'keydown'"></div>
</div>

Div 2

<div id="ckEditor">
    <div id="ckToolbar"></div>
    <div class="editor" data-bind="wysiwyg: txtHelpText, value:txtHelpText, valueUpdate:'keydown'"></div>
</div>

Config.js

config.extraPlugins = 'sharedspace';
config.sharedSpaces = { top: 'ckToolbar' };

I am also using Knockout JS. I created a custom binding and a div instead of a textarea because I couldn't use the CKEDITOR replace function with my binding.

score 0 · Answer 1 · answered Feb 20 '18 at 21:11

You can't have two elements on the same page with same id's. How is JavaScript supposed to recognize which one you have in mind? You should either use classes or different id's and adjust you knockout code to handle that.

Sorry for the general answer but there is simply no way around it. You can't have two elements with same id on a single page.

NOTE: CKEditor auto replaces elements with ckeditor class however if you are using knockout, I don't think this will me much of a use for you.

How to load multiple CKEditor toolbars on the same web page

1 Answers1