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

CKeditor插件添加多种样式

1 个答案: