Question

我试图让用户能够根据按下按钮在预设之间交换工具栏。理想情况下，该按钮将位于CKEditor屏幕中，但我可以使用它。

我找到How to Implement a Binary Tree?，其中我得到了您销毁实例的概念，并使用“新配置”重新初始化它。

为了效仿，我采取了一个排名较高的回复，修改它以匹配我的表格，并把它扔到一个按钮上。

function toolbarSwap(){
    var editor = CKEDITOR.instances.editor;
    if (editor) { editor.destroy(true); }

    CKEDITOR.config.toolbar_Basic = [['Bold','Italic','Underline',
    '-','JustifyLeft','JustifyCenter','JustifyRight','-','Undo','Redo']];
    CKEDITOR.config.toolbar = 'Basic';
    CKEDITOR.config.width=400;
    CKEDITOR.config.height=300;
    CKEDITOR.replace('editor', CKEDITOR.config);
}

replace命令关注我，因为我无法看到它的工作原理，如果编辑器中的数据是否会消失，但是当我点击运行此功能的按钮时，没有任何事情发生。

这是最好的方法，还是我可以直接在CKEditor中执行此操作？

更新

function toolbarSwap(){
  var editor = CKEDITOR.instances['editor'];
  if (editor) { editor.destroy(true); }

  CKEDITOR.config.toolbar_Basic = [['Bold','Italic','Underline',
  '-','JustifyLeft','JustifyCenter','JustifyRight','-','Undo','Redo']];
  CKEDITOR.config.toolbar = 'Basic';
  CKEDITOR.config.width=400;
  CKEDITOR.config.height=300;
  CKEDITOR.replace('editor', CKEDITOR.config);
}

似乎修改了editor的实例化，ID解析了它找到它的问题，但每次点击它时编辑器都被清空。有没有办法reload配置，而不是破坏实例？

更新2

function changeToolBar() {
  var expanded = true;
  if (expanded === true) {
    var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic'] }];
    var config = {};
    config.toolbar = myToolBar;
    CKEDITOR.instances.editor.destroy();//destroy the existing editor
    CKEDITOR.replace('editor', config);  
    expanded = false;
  } else {
    CKEDITOR.instances.editor.destroy();//destroy the existing editor
    CKEDITOR.replace('editor', {toolbar: 'Full'});     
    expanded = true;
    console.log("Expand me")
  };
}

这是我到目前为止所处的位置。我没有在重新初始化期间丢失数据，但我无法得到其他的＆＃39;要触发的陈述。

Answer 1

我的功能是正确的，但是var正在初始化-in-函数正在重置它的目的一切。 AKA这是 - 总是 - 点击

<button type="button" onclick="changeToolBar()">Swap It</button>

function changeToolBar() {

  if (expanded === true) {
    var myToolBar = [{ name: 'verticalCustomToolbar', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic'] }]; //Generic placeholder
    var config = {};
    config.toolbar = myToolBar;
    CKEDITOR.instances.editor.destroy();//destroy the existing editor
    CKEDITOR.replace('editor', config);  
    console.log(expanded); // Logging to ensure change
    expanded = false;
    console.log(expanded); // Logging to ensure the change
  } else {
    CKEDITOR.instances.editor.destroy();//destroy the existing editor
    CKEDITOR.replace('editor', {toolbar: 'Full'});   // Toolbar 'full' is a default one  
    expanded = true;
    console.log("Expand me") // Logging if it works
  };
}

还可以使用工具栏的预定义配置交换Full。

CKEditor - 用于切换显示工具栏的按钮

1 个答案: