Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to target all textarea elements for CKeditor Inline

Tags:

ckeditor

I am new to CKeditor, looking to have it setup on my page. I have quite an elaborate HTML form which contains about 13 textareas. I tried having 13 editors loaded on the page, which works but just messy and overwhelming for a user. I would like it if the editor's toolbar only shows if users click (focuses) on the textarea box and then hides the toolbar when they click away.

I really like the inline editor they have which is pretty much what I an looking for but been struggling to get ckeditor to target and load on all my 13 text areas elements via inline. I've read so many sites but can't find a solution to my problem. I've tried the formula below, which should target elements via their class but seems like inline can't tolerate multiple instances at once. Would anyone know of a way to have inline working on all textareas elements on the page?

This is the code I tried but its no good.

var elements = CKEDITOR.document.find( '.foo' ),
    i = 0,
    element;

while ( ( element = elements.getItem( i++ ) ) {
    CKEDITOR.inline( element );
}
like image 204
Daniel Ellison Avatar asked Jul 16 '14 22:07

Daniel Ellison


2 Answers

You can use the "each" method in jquery to loop through each textarea and assign it the inline editor. I know this works, because I just implemented it in a work project. Like so:

$("textarea").each(function(){
    CKEDITOR.inline( this );
});
like image 149
silksnare Avatar answered Oct 23 '22 04:10

silksnare


Well as a work around I used the below script to load an instance for each textareas elements. Each textarea elements were given a unique ID as you can see below, so far this seems to be the only way around my problem.

<script>
CKEDITOR.inline( 'inline_editor1' );
CKEDITOR.inline( 'inline_editor2' );
CKEDITOR.inline( 'inline_editor3' );
CKEDITOR.inline( 'inline_editor4' );
CKEDITOR.inline( 'inline_editor5' );
CKEDITOR.inline( 'inline_editor6' );
CKEDITOR.inline( 'inline_editor7' );
CKEDITOR.inline( 'inline_editor8' );
CKEDITOR.inline( 'inline_editor9' );
CKEDITOR.inline( 'inline_editor10' );
CKEDITOR.inline( 'inline_editor11' );
CKEDITOR.inline( 'inline_editor12' );
CKEDITOR.inline( 'inline_editor13' );
</script>
like image 1
Daniel Ellison Avatar answered Oct 23 '22 05:10

Daniel Ellison