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

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

我这样做的原因是，我可以向其中添加一个类（我知道怎么做），这样我可以有两个不同的按钮，其中一个应用默认的项目符号列表，另一个应用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'
            });

        }

希望我没有遗漏什么明显的东西，

---

谢谢

虽然这并不简单，因为列表系统并不是设计用来做这些事情的，但您可以做一些事情。您需要修改列表插件的代码（

plugins/list/plugin.js

）。这些是需要实施的基本假设：

• 区分不同的列表：
  • 每个
    获取

    数据编号列表

    属性
  • 每个
    根据您的自定义类获取

    数据项目符号列表

    或

    数据项目符号列表

    属性
• 为类添加自定义CSS
• 如果命令定义了自定义类，则将其添加到新创建的列表中
• 向使用按钮创建的每个列表添加自定义属性（请参见第一点）
• 使命令的

  刷新

  区分

我假设您拥有最新的CKEdtor（4.2）。我会尽我最大的努力来引导你。在阅读本文时，请看一下如何实现以下更改。这肯定会帮助你了解不同的背景。所以祝你好运，我们走吧！；）

---

需要修改的东西 为列表添加特定样式 把它放在插件定义之外，这对所有编辑器来说都是全局的：

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

使listCommand（）函数接受自定义类作为参数。 我们必须允许自定义类和

数据名

属性进入

为arrowedlist添加命令 注意这里的

myclass

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

添加按钮 将数据名属性添加到所有新列表 要区分列表类型，请将

数据名称

属性添加到元素：

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

将自定义类添加到新的箭头列表中。 在listCommand的原型中扩展refresh（） 这确保只有当

具有

数据箭头列表时，箭头列表按钮才会更改其状态。当然，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 );
}

添加数据处理器规则
在编辑器的生命周期内，每个
都会获取
数据编号列表
。相应地，每个
根据是否设置了class
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>


福
酒吧


当返回到所见即所得时，它应该成为一个红色列表。此外，arrowedlist按钮将是唯一与该列表关联的按钮。
@oleq

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

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

当尝试从编号列表更改为箭头列表时，列表将更改为普通项目符号列表，但
仍然具有
data numberedlist=“true”
属性，即使列表更改为普通项目符号

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

此外，当从箭头列表转到编号列表时，
标记更改为
，但将
class=“arrowbullet”data arrowedlist=“true”
属性应用于
标记，我可以看出有些冲突，但我不太确定在哪里。
下面详细介绍了一些冲突问题，因为它不适合放在评论框中！您所要做的就是跟踪负责将列表类型从一种更改为另一种的代码，并修复它，使其更改
data-*
attribute；）我注意到它没有附加正确的数据-*属性，但不能100%确定这是否是导致此问题的原因，但谢谢，我会尝试一下！我的想法快用完了。。我一直在使用chrome developer工具和console进行调试。logs已经看到changeListType和createList函数在它们应该工作的时候工作，数据属性代码看起来合法，我自己似乎无法破解这个：/@oleq，或者在格式插件中实现它是一个更好的主意，因为我可以很容易地让它添加一个自定义类到
，但似乎很难将
应用到每个元素
if ( list && limit.contains( list ) ) {
    var isList = list.is( this.type ) && list.data( this.name );

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

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' ];
        }
    }
} );

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