.php

I have 3 ckeditor textareas, all three are the same but fairly different from the main one or the class.

If I put 3 replaces, it works fine. however if I try to use CKEDITOR.replace( 'editor1', 'editor2', 'editor3' {

It works, replacing them, but ignores anything after the { almost like the class.

Am I just formatting CKEDITOR.replace( 'editor1', 'editor2', {}); incorrectly, I need all three to use the same replace.

Heres the code:

<form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<textarea class="ckeditor" id="editor3" name="editor3" rows="200"><?php echo $editor3;?></textarea>
<input id="tabtitle1" name="tabtitle1" size="30" placeholder="Tab Title.." />
<input type="submit" value="Submit" >
</form>

<script type="text/javascript">   
    CKEDITOR.replace( 'editor1', {
    height: '600px',
    enterMode: CKEDITOR.ENTER_BR, 
    toolbar:    
[   { name: 'document', groups: [ 'document', 'doctools' ], items: [ 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },        '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Iframe', 'Syntaxhighlight' ] }, '/',
    { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'others', groups: [ 'mode' ], items: [ 'Source', 'searchCode', 'autoFormat', 'CommentSelectedRange', 'UncommentSelectedRange', 'AutoComplete', '-', 'ShowBlocks' ] },
    { name: 'tools', items: [ 'Maximize' ] },
]});    
</script>

[EDIT] Just FYI, I tried CKEDITOR.replace( ['editor1', 'editor2'], this didnt work either.

http://gw.ablueman.co.uk/tabbednotepad.php

I have 3 ckeditor textareas, all three are the same but fairly different from the main one or the class.

If I put 3 replaces, it works fine. however if I try to use CKEDITOR.replace( 'editor1', 'editor2', 'editor3' {

It works, replacing them, but ignores anything after the { almost like the class.

Am I just formatting CKEDITOR.replace( 'editor1', 'editor2', {}); incorrectly, I need all three to use the same replace.

Heres the code:

<form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<textarea class="ckeditor" id="editor3" name="editor3" rows="200"><?php echo $editor3;?></textarea>
<input id="tabtitle1" name="tabtitle1" size="30" placeholder="Tab Title.." />
<input type="submit" value="Submit" >
</form>

<script type="text/javascript">   
    CKEDITOR.replace( 'editor1', {
    height: '600px',
    enterMode: CKEDITOR.ENTER_BR, 
    toolbar:    
[   { name: 'document', groups: [ 'document', 'doctools' ], items: [ 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },        '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Iframe', 'Syntaxhighlight' ] }, '/',
    { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'others', groups: [ 'mode' ], items: [ 'Source', 'searchCode', 'autoFormat', 'CommentSelectedRange', 'UncommentSelectedRange', 'AutoComplete', '-', 'ShowBlocks' ] },
    { name: 'tools', items: [ 'Maximize' ] },
]});    
</script>

[EDIT] Just FYI, I tried CKEDITOR.replace( ['editor1', 'editor2'], this didnt work either.

• javascript
• ckeditor

• See how it is done here: ckeditor.com/latest/samples/tabindex.html (the page contains 3 different instances on the same page, not in tabs like yours, but the idea is the same). – Bud Damyanov Commented Feb 11, 2014 at 12:40
• Nope that uses the class. You cant easily edit the class so that wont actually solve the problem. That's why I need to use CKEDITOR.replace rather than the class. Unless there is an easy way you know of using the ckeditor class to also change the toolbars. – CptFishPants Commented Feb 11, 2014 at 12:46

3 Answers 3

Ckeditor 4 allows you to replace multiple textareas with editors based on classname:

CKEDITOR.replaceAll('className');

docs

You can use an array of textarea id an call a CKEDITOR.replace with jquery and foreach. For example:

 var areas = Array('editor1', 'editor2', 'editor3');
    $.each(areas, function (i, area) {
     CKEDITOR.replace(area, {
      customConfig: '/Scripts/ckeditor/config.mini.js'
     });
    });

You can't call CKEDITOR.replace with several ids at the same time.

Its definition states that the first parameter is the ID or the element and the second one the configuration options.