动态ckeditor工具栏

时间:2012-12-04 08:53:29

标签: dynamic ckeditor config toolbox

我想根据用户类型和某些条件设置ckeditor工具栏。

我的部分完成如下:

switch(UserMode)
{
    case "1":
        config.toolbar_MyTool = [
            ['Find', 'SelectAll'], ['Anchor'], ['Maximize']
        ];
        break;
    case "2":
        config.toolbar_MyTool = [
            ['Find'], ['Anchor'], ['Maximize']
        ];
        break;
}

代码根据用户模式变长 所以我想创建一个数组,只是我想分配工具栏 如下所示:

config.toolbar_MyTool = myToolArray;

另外,我想检查自己的帖子或其他人的帖子。如果它是自己的帖子,我想另外添加一些工具。

1 个答案:

答案 0 :(得分:5)

您首先要在 config.js

中定义不同的工具栏。
config.toolbar_MyToolUserMode1 = [
        ['Find', 'SelectAll'], ['Anchor'], ['Maximize']
    ];

config.toolbar_MyToolUserMode2 = [
        ['Find'], ['Anchor'], ['Maximize']
    ];

然后可以在页面中使用这些工具栏定义,但请注意,只要创建CKEditor实例,就不能更改工具栏布局:

CKEDITOR.config.toolbar = "MyToolUserMode1";
var instance = CKEDITOR.appendTo(parentElement);

解决方案1:

您必须创建一个新实例才能动态更改工具栏:

switch(UserMode)
{
case "1":
    if (instance) instance.destroy();
    CKEDITOR.config.toolbar = "MyToolUserMode1";
    instance = CKEDITOR.appendTo(parentElement);
    break;
case "2":
    if (instance) instance.destroy();
    CKEDITOR.config.toolbar = "MyToolUserMode2";
    instance = CKEDITOR.appendTo(parentElement);
    break;
}

解决方案2:

但是,如果您对在usermode 2中显示完整工具栏并使SelectAll-Button变灰感到高兴,那么以下可能就是您的解决方案:

CKEDITOR.config.toolbar = "MyToolUserMode1";
var instance = CKEDITOR.appendTo(parentElement);

switch(UserMode)
{
case "1":
    instance.getCommand('selectAll').enable();
    break;
case "2":
    instance.getCommand('selectAll').disable();
    break;
}

[EDIT feb 15]

解决方案3:

根据您的评论 - >如何使用array.push动态构造

config.js无需配置

    // your code
    var myToolbarSection1 = new Array();
    myToolbarSection1.push('Bold');
    myToolbarSection1.push('Italic');

    // attaching this section to toolbar
    var myToolbar = new Array();
    myToolbar.push(myToolbarSection1);

    // setting the toolbar
    CKEDITOR.config.toolbar_Dynamic = myToolbar;
    CKEDITOR.config.toolbar = 'Dynamic';

    var instance = CKEDITOR.appendTo('myDIVID');