Question

我创建一个CKEditor小部件，当我选择例如一个paragraphe时，颜色和背景颜色不能启用。

这是我的小部件

CKEDITOR.plugins.add( 'applivewidget', {
    requires: 'widget',

    icons: 'applivewidgetLeftCol,applivewidgetRightCol,applivewidgetThreeCol,applivewidgetTwoCol',

    init: function( editor ) {
        // Configurable settings

        var allowedText =  editor.config.applivewidget_allowedText != undefined ? editor.config.applivewidget_allowedText : 'font;div{background-color};h2{color};p{color, font} [font];span;br;ul;ol;li;strong;em;h3;img{ height, width } [!src,width,height];';

        CKEDITOR.dialog.add( 'applivewidgetLeftCol', this.path + 'dialogs/applivewidget.js' );



        var showButtons = editor.config.applivewidgetShowButtons != undefined ? editor.config.applivewidgetShowButtons : true;

        // Define the widgets
        editor.widgets.add( 'applivewidgetLeftCol', {

            button: showButtons ? 'Add left column box' : undefined,
            dialog: 'applivewidgetLeftCol',
            template:
                '<div class="span_wrapper col_1_2">' +
                    '<div class="span equal edit1 span1_3 wow bounceIn"><p class="nopadding"><img src="/sites/all/themes/cefort/images/img450_375.png" /></p></div>' +
                    '<div class="span equal edit2 span2_3 wow bounceIn"><h2>Sub Title</h2><p>Content</p></div>' +
                '</div>',
            init: function() {
                var bgc = this.element.getChild(0).getStyle( 'background-color' );
                if ( bgc )
                    this.setData( 'bgc', bgc );
            }, 
            data: function() {
                if ( this.data.bgc == '' )
                {
                     this.element.getChild(0).removeStyle( 'background-color' );
                      this.element.getChild(1).removeStyle( 'background-color');
                }
                else
                {
                     this.element.getChild(0).setStyle( 'background-color', '#'+this.data.bgc );
                      this.element.getChild(1).setStyle( 'background-color', '#'+this.data.bgc );

                }


            },   
            editables: {
                col1: {
                    selector: '.edit1',
                    allowedContent: allowedText
                },
                col2: {
                    selector: '.edit2',
                    allowedContent: allowedText
                }
            },

            allowedContent: allowedText,

            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'col_1_2' );
            }

        } );

我无法选择上一个小部件的文本颜色。

请帮忙

由于

Answer 1

问题来自您的allowedText内容，我觉得这很奇怪。

这是它的内容，我在其中添加空格以使其更具可读性：

'font; div{background-color}; h2{color}; p{color, font} [font]; span; br; ul; ol; li; strong; em; h3; img{ height, width } [!src,width,height];'

首先你直接引用font，它不再是HTML 5中的有效元素：所以它在这里没有效果。

然后，您允许font样式和font属性到p元素：如果某些（已输入的）内容引用它们，则两者都只有机会有用。同样的评论适用于div{background-color}，h2{color}和p{color}。

所有这些规范都不符合CKEditor创建字体或颜色样式变体的方式，例如，，或。

因此，要使文字颜色功能生效，您必须为背景颜色功能编写span {color}或span {background-color}，依此类推。
更简单的是，我建议您只需编写span {*}即可使所有这些功能都处于活动状态，除非您希望明确限制允许的内容。

另请注意，您可以简化allowedContent字符串，其中许多元素共享相同的属性（或根本不属性），例如br ul ol li strong em h3;。

颜色和背景按钮未出现在我的CKEditor小部件模板中

1 个答案: