7

CKEditor のテキスト段落にカスタム クラスまたは ID を追加するにはどうすればよいですか? 可能なクラスをDBからロードし、CKEがロードされているときにそれらが含まれるリストに書き込みたいと思います。ID はその場で簡単に作成できます。クラスと ID は、テキストの一部を脚注やキャプションとしてマークするなどの目的で使用されます。

明確にするために、ドロップダウン ボックスを使用してテキストの表示スタイルを変更したくありません。要素のスタイルを設定するために使用できる CSS クラスを追加したいと考えています。

4

2 に答える 2

5

どうぞ。このコードは、後続の ID で段落に番号を付け、まだ割り当てられていない各段落にカスタム クラスを追加します。

var idCounter = 0,
    pClass = 'myCustomClass',
    pClassRegexp = new RegExp( pClass, 'g' );

CKEDITOR.replace( 'editor1', {
    on: {
        instanceReady: function() {
            this.dataProcessor.htmlFilter.addRules({
                elements: {
                    p: function( element ) {
                        // If there's no class, assing the custom one:
                        if ( !element.attributes.class )
                            element.attributes.class = pClass;

                        // It there's some other class, append the custom one:
                        else if ( !element.attributes.class.match( pClassRegexp ) )
                            element.attributes.class += ' ' + pClass;

                        // Add the subsequent id:
                        if ( !element.attributes.id )
                            element.attributes.id = 'paragraph_' + ++idCounter;
                    }
                }
            });
        }
    }
});
于 2012-09-15T12:26:16.633 に答える