Ckeditor内联动态修改工具栏以满足要求

时间:2014-09-15 05:34:19

标签: javascript ckeditor

我正在使用ckeditor内联我的contenteditable div。

HTML看起来像

<div class="content" contenteditable="true">
  <p>Test</p>
  <p>Test</p>
</div>

我想在按钮点击时更改工具栏中的按钮。我调用以下功能来更改工具栏

function changeToolBar(){
  var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Blockquote'] }];
 var config = {};
 config.toolbar = myToolBar;
 CKEDITOR.instances.editor1.destroy();//destroy the existing editor
 CKEDITOR.replace('content', config);       

}

这个似乎不起作用。

JSFiddle http://jsfiddle.net/RKPYw/17/

提前致谢

1 个答案:

答案 0 :(得分:1)

通过将代码更改为以下

来解决此问题
function changeToolBar() {
 var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Bold'] }];
 var config = {};
 config.toolbar = myToolBar;
 CKEDITOR.instances.test.destroy();//destroy the existing editor
 CKEDITOR.inline('test', config);      
}

CKEditor.inline 函数需要元素的 id

JSFiddle here http://jsfiddle.net/RKPYw/18/