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

Question

我正在尝试添加一个类似于 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'
            });

        }

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

Answer 1

尽管这并不简单，因为列表系统并非设计用于执行此类操作，但您可以为此做些事情。您必须修改列表插件的代码(plugins/list/plugin.js)。这些是要实现的基本假设:

• 区分不同的列表:
  • 每个<ol>得到 data-numberedlist属性。
  • 每个<ul>得到 data-bulletedlist或 data-arrowedlist属性取决于您的自定义类。
• 为您的类(class)添加自定义 CSS。
• 如果命令定义了自定义类，则将自定义类添加到新创建的列表。
• 将自定义属性添加到使用按钮创建的每个列表(参见第一点)。
• 制作命令的refresh区分<ul data-bulletedlist="true>和 <ul data-arrowedlist="true> .

我假设您拥有最新的 CKEdtor (4.2)。我会尽力在这里指导你。阅读本文时，请查看 The Gist实现以下更改。这肯定会帮助您了解不同之处的背景。所以……祝你好运，我们走吧! ;)

---

需要修改的地方

为您的列表添加特定样式

把它放在插件定义之外，这对所有编辑器都是全局的:

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

使 listCommand() 函数接受自定义类作为参数。

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

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的原型(prototype)中扩展refresh()

这确保箭头列表按钮只有在 <ul> 出现时才会改变它的状态。有data-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' ];
        }
    }
} );

---

测试

尝试在源 View 中设置以下 HTML:

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

返回所见即所得应该会变成红色列表。此外，带箭头的列表按钮将是唯一与此类列表关联的按钮。