CKEditor使用UL标签添加新列表插件

时间：2013-08-07 15:09:59

标签： javascript ckeditor

我正在尝试添加一个类似于项目符号列表的新列表插件，所以我创建了一个新按钮，但是当我尝试使用UL标签时，它将名为arrowedlist的新按钮与项目符号列表按钮配对。

我这样做的原因是我可以添加一个类（我知道该怎么做）所以我可以有2个不同的按钮，其中1应用默认项目符号列表，另一个应用UL类标记。

基本问题是：有没有一种方法可以添加一个使用UL的按钮，就像bulletedlist一样，没有它将按钮配对在一起？

    // Register commands.
        editor.addCommand( 'numberedlist', new listCommand( 'numberedlist', 'ol' ) );
        editor.addCommand( 'bulletedlist', new listCommand( 'bulletedlist', 'ul' ) );
        editor.addCommand( 'arrowedlist', new listCommand( 'arrowedlist', 'ul' ) );


        // Register the toolbar button.
        if ( editor.ui.addButton ) {
            editor.ui.addButton( 'NumberedList', {
                label: editor.lang.list.numberedlist,
                command: 'numberedlist',
                directional: true,
                toolbar: 'list,10'
            });
            editor.ui.addButton( 'BulletedList', {
                label: editor.lang.list.bulletedlist,
                command: 'bulletedlist',
                directional: true,
                toolbar: 'list,20'
            });
            editor.ui.addButton( 'ArrowedList', {
                label: editor.lang.list.arrowedlist,
                command: 'arrowedlist',
                directional: true,
                toolbar: 'list,30'
            });

        }

希望我没有遗漏一些明显的东西， 谢谢！

2 个答案:

答案 0 :(得分：4)

虽然这并不简单，因为列表系统并非设计用于执行此类操作，您可以对此做些什么。您必须修改列表插件的代码（plugins/list/plugin.js）。这些是要实施的基本假设：

  • 区分不同的列表：
    • 每个<ol>获得data-numberedlist属性。
    • 每个<ul>获取data-bulletedlist或data-arrowedlist属性，具体取决于您的自定义类。
  • 为您的班级添加自定义CSS。
  • 如果命令定义了自定义类，则将自定义类添加到新创建的列表中。
  • 为使用按钮创建的每个列表添加自定义属性（请参阅第一点）。
  • 让命令refresh区分<ul data-bulletedlist="true>和<ul data-arrowedlist="true>。

我假设你有最新的CKEdtor（4.2）。我会尽我所能来指导你。阅读本文时，请查看The Gist，并执行以下更改。这肯定会帮助您了解不同的背景。所以...祝你好运，让我们走吧！ ;）

要修改的内容

为列表添加特定样式

将它置于插件定义之外，这对所有编辑者来说都是全局的：

CKEDITOR.addCss( 'ul.myclass { color: red } ' );

使listCommand（）函数接受自定义类作为参数。

我们必须在Advanced Content Filter中允许自定义类和data-name属性。

function listCommand( name, type, className ) {
    this.name = name;
    this.type = type;
    this.context = type;

    // Remember the class of this command.
    this.className = className;

    this.allowedContent = {};
    this.allowedContent[ type ] = {
        classes: className || '',
        attributes: 'data-' + name
    };
    this.allowedContent.li = true;
    this.requiredContent = type;
}

添加arrowedlist

命令

请注意myclass。

editor.addCommand( 'arrowedlist', new listCommand( 'arrowedlist', 'ul', 'myclass' ) );

添加按钮

editor.ui.addButton( 'ArrowedList', {
    label: editor.lang.list.bulletedlist,
    command: 'arrowedlist',
    directional: true,
    toolbar: 'list,20'
});

将数据名称属性添加到所有新列表

要区分列表类型，请在元素中添加data-name属性：

listNode = doc.createElement( this.type );
listNode.data( this.name, true );

将自定义类添加到新箭头列表。

if ( this.className )
    listNode.addClass( this.className );

在listCommand

的原型中扩展refresh（）

这确保仅当<ul>具有data-arrowedlist时，arrowedlist按钮才会更改其状态。当然，对于项目符号列表和编号列表也有类似的行为。

if ( list && limit.contains( list ) ) {
    var isList = list.is( this.type ) && list.data( this.name );

    this.setState( isList ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );
}

添加数据处理器规则

在编辑的生命周期中，每个<ol>获得data-numberedlist。相应地，每个<ul>获得data-arrowedlist或data-bulletedlist，具体取决于是否设置了类myclass。

在输出中，自定义属性被过滤掉，因此您保存的数据非常干净。

editor.dataProcessor.dataFilter.addRules( {
    elements: {
        ol: function( element ) {
            element.attributes[ 'data-numberedlist' ] = true;
        },
        ul: function( element ) {
            var className = element.attributes.class;

            if ( className && className.match( /myclass/g ) )
                element.attributes[ 'data-arrowedlist' ] = true;
            else
                element.attributes[ 'data-bulletedlist' ] = true;
        }
    }
} );

editor.dataProcessor.htmlFilter.addRules( {
    elements: {
        ol: function( element ) {
            delete element.attributes[ 'data-numberedlist' ];
        },
        ul: function( element ) {
            delete element.attributes[ 'data-arrowedlist' ];
            delete element.attributes[ 'data-bulletedlist' ];
        }
    }
} );

测试

尝试在源视图中设置以下HTML：

<ul class="myclass">
    <li>Foo</li>
    <li>Bar</li>
</ul>

当回到WYSIWYG时，它应该成为红色列表。箭头列表按钮也是唯一与此列表相关联的按钮。

答案 1 :(得分：1)

@oleq

尝试将项目符号列表更改为编号列表时功能正常，但编号列表按钮不会单击并仍然看起来未被点击。

当尝试从项目符号列表更改为箭头列表时，功能不起作用，项目符号列表按钮保持单击，反之亦然，箭头列表为项目符号列表。

当尝试从编号列表更改为箭头列表时，列表会更改为正常的项目符号列表，但<ul>仍然具有data-numberedlist="true"属性，即使列表更改为普通项目符号。< / p>

当将未格式化的列表更改为编号列表和从编号列表更改时，一切正常，包括单击按钮，但这不适用于其间使用的其他按钮。

同样，当从箭头列表转到编号列表时，<ul>标记更改为<ol>，但将class="arrowbullet" data-arrowedlist="true"属性应用于<ol>标记，我可以说出一些内容是冲突但我不太确定在哪里。

相关问题
最新问题