CKeditor 添加多种样式的插件

Question

Codewaggle's answer 这让我开始了，我也看过Reinmar's answer，但我不能把这些放在一起。

我想创建一个具有五个自定义跨度（更正、删除、建议...等）的插件，然后我可以将其添加到我的 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' }};

Answer 1

在这里暗中拍摄，但您是否在初始化时将按钮添加到 config.toolbar 或在其他地方进行配置 - 请参阅 http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar