How to target all textarea elements for CKeditor Inline

10
votes

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 );
}
3
ckeditor
Welcome Daniel & good question. Please remember to select the answer you feel was best as THE answer. BTW, I tried the code @silksnare posted after you posted your interim solution. The short little snippet posted by silksnare replaced all textareas throughout the application I'm building so, if somebody asked me, I'd suggest that over the approach you took (though obviously the way you did it will work too, it's just not as maintainable). - MER

3 Answers

9
votes

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 );
});
1
votes

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>
0
votes

This will work... It works mine...

<html>
<head>
<title>Untitled Document</title>
</head>
<body>

<form id="form1" name="form1" method="post" action="">

  <table width="90%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><textarea name="editor1" id="editor1" cols="45" rows="5" class="editor"></textarea></td>
    </tr>
    <tr>
      <td><textarea name="editor2" id="editor2" cols="45" rows="5" class="editor"></textarea></td>
    </tr>
    <tr>
      <td><textarea name="editor3" id="editor3" cols="45" rows="5" class="editor"></textarea></td>
    </tr>
  </table>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
 <script type="text/javascript">

   $("textarea.editor").each(function(){
     var txt = $( this ).attr('name');
     CKEDITOR.replace(txt , {
       extraPlugins : 'tableresize',
       toolbar : 'Full',
       skin: 'v2',
       enterMode		: 1,
       shiftEnterMode	: 2,
       height :'400',
     });
   });
		
    </script>
</body>
</html>