3

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

我这样做的原因是我可以向它添加一个类（我知道该怎么做），这样我就可以有 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'
            });

        }

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

4

2 回答 2

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 Filterdata-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;
}

添加箭头列表的命令

注意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 属性添加到所有 NEW 列表

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

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

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

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

在 listCommand 的原型中扩展 refresh()

这确保了 arrowedlist 按钮只有在<ul>has时才会改变其状态data-arrowedlist。当然，bulletedlist 和 numberedlist 的行为类似。

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>

回到所见即所得时，它应该成为一个红色列表。此外，箭头列表按钮将是唯一与此类列表相关联的按钮。

于 2013-08-07T20:24:05.487 回答
1

@oleq

当尝试将项目符号列表更改为编号列表时，该功能可以正常工作，但编号列表按钮不会向下单击并且看起来仍然未单击。

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

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

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

此外，当从带箭头的列表转到编号列表时，<ul>标签更改为<ol>但将class="arrowbullet" data-arrowedlist="true"属性应用于<ol>标签，我可以说有些东西是冲突的，但我不太确定在哪里。

于 2013-08-14T10:40:04.870 回答