CODEWITHSUNDEEP
javascriptjqueryckeditoreditortoggle
Swap
Swap

Reputation: 175

Toggle CKEditor on Element

HTML

<tr>
   <td>1</td>
   <td colspan="3"><p>sometext</p>
   </td>
   <td><button class="mdl-button mdl-js-button mdl-button--raised mdl-   button--colored viewButton" data-upgraded=",MaterialButton">Edit</button>    </td>
</tr>
<tr class="hide" style="display: table-row;">
    <td rowspan="4">1</td>
    <td rowspan="4">
        <textarea rows="8" cols="50" name="details" class="ckeditor" style="visibility: hidden; display: none;">
                        sometext
        </textarea>
    </td>
</tr>

JAVASCRIPT

$('textarea').toggleClass("ckeditor");
$('button.viewButton').click(function(){
    var t=$(this).parent().parent().next();
    $(this).parent().parent().next().toggle();
    $(t > 'td' >'textarea').toggleClass("ckeditor");
});

When I Click on Edit Next row is visible.
My Problem is to load CKEditor on click on Edit.
Because my page having CKEditor it is taking too much time to initialize.

First I am Toggling all my CKEditor it is working Time is decreased by it but I want perfect solution for editing and removing CKEditor on Textarea.

Upvotes: 0

Views: 1625

Answers (1)

bmatovu
bmatovu

Reputation: 4074

I implemented a dynamic ckeditor to show when a user clicks the edit button, but I guess displaying the editor on textarea focus and removing it when focus is lost might be a good idea.

For performance, CKEditor loads once and is cached so it will always be available for use.

// click the edit button to toogle views
$('#edit').on('click', function() {

  // if there is an existing instance of this editor
  if (CKEDITOR.instances.txt_area) {
    /* destroying instance */
    CKEDITOR.instances.txt_area.destroy();
  } else {
    /* re-creating instance */
    CKEDITOR.replace('txt_area');
  }

});
<button id="edit">Edit</button>
<br/>
<textarea id="txt_area" rows="10" style="width:100%;">
  Click edit to editor this textarea using ckeditor
</textarea>

JSFiddle: https://jsfiddle.net/bmatovu/610e90zz/

Upvotes: 2

Related Questions