javascript - Cckeditor:按需显示和隐藏内联工具栏

标签 javascript ckeditor inline

我使用内联Ckeditor来编辑内容。默认情况下,双击带有 contenteditable="true"div 即可激活内联编辑器。我想在单击一个按钮时激活此内联编辑器,并在单击另一个按钮时隐藏它。 以下是 html 代码示例:

<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 显示了默认行为和我想要的 http://jsfiddle.net/vdRYL/

最佳答案

我们可以隐藏和显示工具栏。我使用以下方式实现了此功能:

打开ckeditor.js 文件。并将以下代码粘贴到文件末尾

$(document).ready(function () {  
   CKEDITOR.on('instanceReady', function (ev) {  
      document.getElementById(ev.editor.id + '_top').style.display = 'none';  


      ev.editor.on('focus', function (e) {  
         document.getElementById(ev.editor.id + '_top').style.display = 'block';  

      });  
      ev.editor.on('blur', function (e) {  
         document.getElementById(ev.editor.id + '_top').style.display = 'none';  

      });  
   });  
});

关于javascript - Cckeditor:按需显示和隐藏内联工具栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20448416/

相关文章:

ckeditor - 集成 Markdown 所见即所得文本编辑器

css - 选择 :first-of-type by class only

我可以将 C 内联函数桥接到 Swift 吗?

html - CSS,显示属性(菜单栏)

javascript - 按钮的 Jquery 单击事件在 ng-if div 内不起作用

Javascript 调用并应用构造函数

javascript - 如何在混合应用程序中创建图形

email - 调整基于 Web 的电子邮件应用程序的所见即所得编辑器

c++ - 是否可以分析查看程序集的 C/C++ 内联函数?

javascript - 如何将一个大的一维数组转换成一系列小键 :pair objects in JS?