Question

我使用内联Ckeditor来编辑内容。默认情况下，双击div contenteditable="true"即可激活内联编辑器。我想在单击按钮时激活此内联编辑器，并在单击另一个按钮时隐藏它。以下是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/

Answer 1

CKeditor似乎正在激活focus contenteditable元素的编辑窗口，而不是double-click。你可以做这样的事情让你的按钮工作，

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

Answer 2

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

打开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';  

      });  
   });  
});

Answer 3

对于角

工具栏元素有类“ck-editor__top”，所以我使用下面的代码来隐藏/显示它：

component.html

添加到 3 个监听器下方的 'ckeditor' 标签：

<ckeditor
        (ready)="changeEditorToolbar('none')"
        (focus)="changeEditorToolbar('block')"
        (blur)="changeEditorToolbar('none')"
>
</ckeditor>

component.ts

changeEditorToolbar(displayValue)
{
    let elements =  Array.from(document.getElementsByClassName('ck-editor__top') as HTMLCollectionOf<HTMLElement>);
    elements[0].style.display = displayValue;
}

注意：
注意，如果同一个组件有多个ck编辑器，不要用[0]获取第一个

Ckeditor：根据需要显示和隐藏内联工具栏

3 个答案:

对于角