Menu
I need to call multiple instances of CKEditor automatically...actually I use the function:
CKEDITOR.replace( 'editor1');
Where "editor1" is the id name of the div where I want show my CKEditor.
I'm using jQuery to automate this process and I need to use the "class" tag instead the id.
In particular i have this html:
<div class="CKEditor">
<div class="text">
mytext
</div>
<p style="text-align:center" class="buttons">
<input type="button" value="edit" class="button_edit">
<input type="button" value="preview" class="button_preview" style="display:none">
</p>
<div class="editor" >
</div>
</div>
and this jQuery script:
$(function()
{
$('.CKEditor').each(function()
{
var __main = $(this);
var __buttons = __main.children('.buttons');
var __text = __main.children(".text");
var editor;
__buttons.children('.button_edit').click(function()
{
__text.hide();
if (editor) return;
editor = CKEDITOR.replace("editor");
editor.setData(__text.html());
if(editor)
{
__buttons.children('.button_edit').hide();
__buttons.children('.button_preview').show();
}
});
__buttons.children('.button_preview').click(function()
{
__text.show();
__text.html(editor.getData());
if ( !editor ) return;
editor.destroy();
editor = null;
__buttons.children('.button_edit').show();
__buttons.children('.button_preview').hide();
__main.children("#editor").html("");
});
});
});
Is it possible without modify the source of CKEDITOR?
EDIT
I found the solution:
1) The html become:
<div class="editor" id="edt1"></div>
2) In the JQuery:
var __editorName = __main.children('.editor').attr('id');
and i call CKEditor with:
editor = CKEDITOR.replace(__editorName);
=) =)
911
There is already a class replacer built into CKEditor. Any textarea with the class ckeditor applied will have the editor applied automatically without initialisation.
The code is in ckeditor.js and uses CKEDITOR.replaceClass="ckeditor";
Initialise by class (no extra JavaScript required)
Add Class ckeditor to textarea
HTML
<textarea class="ckeditor" rows="4" cols="50"></textarea>
.NET
<asp:TextBox ID="txt" CssClass="ckeditor" runat="server" TextMode="MultiLine" />
Custom Class initialisation
If you wish to use your own class you can simply overwrite the class with your own initialisation after ckeditor.js
Use:
CKEDITOR.replaceClass="MyClass";
Using replaceAll.
replace textarea using class
in the page:
<textarea class="myClassName"></textarea>
in the JS code
CKEDITOR.replaceAll( 'myClassName' );
<!DOCTYPE HTML>
<html>
<head>
<script src="ckeditor.js"></script>
<script>
$(document).ready(function() {
CKEDITOR.replaceClass = 'ckeditor';
});
</script>
</head>
<body>
<div>
<textarea class="ckeditor" cols="80" name="content"></textarea>
</div>
<div>
<textarea class="ckeditor" cols="80" name="content"></textarea>
</div>
</body>
</html>It's possible now, check this: http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html
3
Personally I use function like this :
function loadEditor(id){
var instance = CKEDITOR.instances[id];
if(instance){
CKEDITOR.destroy(instance);
}
var editor = CKEDITOR.replace(id);
}
I use it with lots of dynamic config, and I am sure it can be nicely changed to suit your needs. Have a play and let us know what you come with!
As you can see I am using ids anyway, but can't see a problem with using classes
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
