CODEWITHSUNDEEP
javascriptjqueryckeditor
Danilo
Danilo

Reputation: 2036

Call CKEditor by class

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

=) =)

Upvotes: 11

Views: 39829

Answers (9)

Nurul
Nurul

Reputation: 95

Using replaceAll.

replace textarea using class

in the page:

<textarea class="myClassName"></textarea>

in the JS code

CKEDITOR.replaceAll( 'myClassName' );

Upvotes: 8

DreamTeK
DreamTeK

Reputation: 34177

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

Upvotes: 9

user9081081
user9081081

Reputation:

The best way to instantiate multiple ckeditor4 instances is using the ckeditor-jquery adapter.

Then only 

$( 'textarea.ckeditor' ).ckeditor();

is enough to have multiple ckeditor instances.

Upvotes: 0

Aaska Patel
Aaska Patel

Reputation: 468

...which is a bit strange, because the Replace by Class sample contains the following code:

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">

And it works perfectly fine.

Upvotes: 0

patie
patie

Reputation: 1092

It's possible now, check this: http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html

Upvotes: 2

mwfearnley
mwfearnley

Reputation: 3649

Here's a minimalist example that illustrates using the ckeditor class on text areas, based on a stripped down version of http://nightly.ckeditor.com/latest/standard/ckeditor/samples/old/replacebyclass.html:

<script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>

<textarea id="something" class="ckeditor">
    &lt;p&gt; Hello world! &lt;/p&gt;
</textarea>

In my testing I found that the <textarea> tag needed to have the ckeditor class, and it needed to have an id or name field present.

Upvotes: 0

Sunil Suman
Sunil Suman

Reputation: 29

<!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>

Upvotes: 2

Kevin Detrain
Kevin Detrain

Reputation: 161

<!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>

Upvotes: 16

Moseleyi
Moseleyi

Reputation: 2859

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

Upvotes: 2

Related Questions