Search code examples
javascriptckeditorinline

Ckeditor: show and hide inline toolbar on demand


I use inline Ckeditor to edit content. By default, the inline editor is activated by double click a div with contenteditable="true". I want to activate this inline editor when I click a button, and hide it when I click another button. Here is an example of html code:

<html>
  <head>
    <script src="ckeditor/ckeditor.js"></script>
  </head>
<body>
   <div id="first" contenteditable="true">first</div>
   <div id="second" contenteditable="true">second</div>

   <input type="button" value="show inline editor">
   <input type="button" value="hide inline editor">
 </body>
</html>

Jsfiddle shows the default behavior and what i want to have http://jsfiddle.net/vdRYL/


Solution

  • The CKeditor seems to be activating the editor-window on focus of contenteditable element and not on double-click. You can do something like this to get your buttons to work,

    http://jsfiddle.net/nagendra_rao/vdRYL/1/