CKeditor插件添加多种样式

Codewaggle's answer这里让我开始了，我也看了Reinmar's answer，但我不能把它放在一起 .

我想创建一个包含五个自定义 Span （更正，删除，建议等等）的插件，然后我可以将其添加到我的CSS中并使用一个按钮在Drupal 7中使用CKeditor应用每个样式 .

我不想使用下拉样式，并且更喜欢为每个类添加带有图标的按钮 .

我使用basicstyles插件作为跳跃点，但我从未在javascript中做过任何事情，所以我真的在黑暗中 .

我已经添加了

config.extraPlugins = 'poligoeditstyles';

到配置文件并根据CKeditor上的指南设置我的插件的文件结构 .

我假设如果所有按计划完成，我应该看到一个按钮拖动到我的工具栏中，但是，唉！没有快乐 . 当我添加内容或在Drupal的配置页面上时，我看不到任何添加到我的CKeditor工具栏中的内容：

admin/config/content/ckeditor/edit/Advanced

我错过了什么吗？任何帮助，将不胜感激！

这是我的插件代码：

/**
 * POLIGO edit styles plug-in for CKeditor based on the Basic Styles plugin
 */

CKEDITOR.plugins.add( 'poligoeditstyles', {
    icons: 'correction,suggestion,deletion,commendation,dontunderstand', // %REMOVE_LINE_CORE%
    init: function( editor ) {
        var order = 0;
        // All buttons use the same code to register. So, to avoid
        // duplications, let's use this tool function.
        var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton ) {
                // Disable the command if no definition is configured.
                if ( !styleDefiniton )
                    return;

                var style = new CKEDITOR.style( styleDefiniton );

                // Listen to contextual style activation.
                editor.attachStyleStateChange( style, function( state ) {
                    !editor.readOnly && editor.getCommand( commandName ).setState( state );
                });

                // Create the command that can be used to apply the style.
                editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );

                // Register the button, if the button plugin is loaded.
                if ( editor.ui.addButton ) {
                    editor.ui.addButton( buttonName, {
                        label: buttonLabel,
                        command: commandName,
                        toolbar: 'poligoeditstyles,' + ( order += 10 )
                    });
                }
            };

        var config = editor.config,
            lang = editor.lang;

        addButtonCommand( 'Correction', 'That's a mistake', 'correction', config.coreStyles_correction );
        addButtonCommand( 'Suggestion', 'That's OK, but I suggest...', 'suggestion', config.coreStyles_suggestion );
        addButtonCommand( 'Deletion', 'You don't need that', 'deletion', config.coreStyles_deletion );
        addButtonCommand( 'Commendation', 'Great job!', 'commendation', config.coreStyles_commendation );
        addButtonCommand( 'Dontunderstand', 'I don't understand what you mean', 'dontunderstand', config.coreStyles_dontunderstand );

    }
});

// POLIGO Editor Inline Styles.

CKEDITOR.config.coreStyles_correction = { element : 'span', attributes : { 'class': 'correction' }};
CKEDITOR.config.coreStyles_suggestion = { element : 'span', attributes : { 'class': 'suggestion' }};
CKEDITOR.config.coreStyles_deletion = { element : 'span', attributes : { 'class': 'deletion' }};
CKEDITOR.config.coreStyles_commendation = { element : 'span', attributes : { 'class': 'commendation' }};
CKEDITOR.config.coreStyles_dontunderstand = { element : 'span', attributes : { 'class': 'dontunderstand' }};