リストシステムはそのようなことを行うように設計されていないため、これは簡単ではありませんが、それについて何かを行うことができます. リスト プラグイン ( 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) を使用していると仮定しています。ここであなたを導くために最善を尽くします。これを読みながら、次の変更を実装する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'
});
すべての NEW リストに data-name 属性を追加
リストの種類を区別するdata-nameには、要素に属性を追加します。
listNode = doc.createElement( this.type );
listNode.data( this.name, true );
カスタム クラスを NEW 矢印付きリストに追加します。
if ( this.className )
listNode.addClass( this.className );
listCommand のプロトタイプで refresh() を拡張する
<ul>これにより、 arrowedlist ボタンが を持っている場合にのみ、その状態が変わることが保証されます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-bulletedlistmyclass
出力では、カスタム属性が除外されるため、保存するデータは完全にクリーンです。
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 に戻ると、レッド リストになるはずです。また、矢印付きリスト ボタンは、そのようなリストに関連付けられた唯一のボタンになります。