Плагин Redactor 9.2.6 fontcolor не отражает изменения цвета фона в представлении HTML?

Я использую плагин Redactor версии 9.2.6 и добавил плагин fontcolor для добавления функций добавления цвета шрифта и цвета фона.

Проблема:

  1. Когда я пытаюсь добавить цвет шрифта в редакторе, те же изменения отражаются в представлении HTML. Плагин добавляет <span style="font-color: colorcode;" >Selected Content</span> автоматически.
  2. Когда я пытаюсь сделать то же самое с цветом фона, редактор работает нормально, но изменения не отражаются в представлении HTML, что вызывает у меня проблемы.

Плагин FontColor:

if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.fontcolor = {
    init: function()
    {
        var colors = [
            '#ffffff', '#000000', '#eeece1', '#1f497d', '#4f81bd', '#c0504d', '#9bbb59', '#8064a2', '#4bacc6', '#f79646', '#ffff00',
            '#f2f2f2', '#7f7f7f', '#ddd9c3', '#c6d9f0', '#dbe5f1', '#f2dcdb', '#ebf1dd', '#e5e0ec', '#dbeef3', '#fdeada', '#fff2ca',
            '#d8d8d8', '#595959', '#c4bd97', '#8db3e2', '#b8cce4', '#e5b9b7', '#d7e3bc', '#ccc1d9', '#b7dde8', '#fbd5b5', '#ffe694',
            '#bfbfbf', '#3f3f3f', '#938953', '#548dd4', '#95b3d7', '#d99694', '#c3d69b', '#b2a2c7', '#b7dde8', '#fac08f', '#f2c314',
            '#a5a5a5', '#262626', '#494429', '#17365d', '#366092', '#953734', '#76923c', '#5f497a', '#92cddc', '#e36c09', '#c09100',
            '#7f7f7f', '#0c0c0c', '#1d1b10', '#0f243e', '#244061', '#632423', '#4f6128', '#3f3151', '#31859b',  '#974806', '#7f6000'
        ];

        var buttons = ['fontcolor', 'backcolor'];

        for (var i = 0; i < 2; i++)
        {
            var name = buttons[i];

            var $dropdown = $('<div class="redactor_dropdown redactor_dropdown_box_' + name + '" style="display: none; width: 243px;">');

            this.pickerBuild($dropdown, name, colors);
            $(this.$toolbar).append($dropdown);

            var btn = this.buttonAdd(name, this.opts.curLang[name], $.proxy(function(btnName, $button, btnObject, e)
            {
                this.dropdownShow(e, btnName);

            }, this));

            btn.data('dropdown', $dropdown);
        }
    },
    pickerBuild: function($dropdown, name, colors)
    {
        var rule = 'color';
        if (name === 'backcolor') rule = 'background-color';

        var _self = this;
        var onSwatch = function(e)
        {
            e.preventDefault();

            var $this = $(this);
            _self.pickerSet($this.data('rule'), $this.attr('rel'));

        }

        var len = colors.length;
        for (var z = 0; z < len; z++)
        {
            var color = colors[z];

            var $swatch = $('<a rel="' + color + '" data-rule="' + rule +'" href="#" style="float: left; font-size: 0; border: 2px solid #fff; padding: 0; margin: 0; width: 20px; height: 20px;"></a>');
            $swatch.css('background-color', color);
            $dropdown.append($swatch);
            $swatch.on('click', onSwatch);
        }

        var $elNone = $('<a href="#" style="display: block; clear: both; padding: 4px 0; font-size: 11px; line-height: 1;"></a>')
        .html(this.opts.curLang.none)
        .on('click', function(e)
        {
            e.preventDefault();
            _self.pickerSet(rule, false);
        });

        $dropdown.append($elNone);
    },
    pickerSet: function(rule, type)
    {
        this.bufferSet();

        this.$editor.focus();
        this.inlineRemoveStyle(rule);
        if (type !== false) this.inlineSetStyle(rule, type);
        if (this.opts.air) this.$air.fadeOut(100);          
        this.sync();
    }
};

Почему это происходит?? Есть идеи??


person writeToBhuwan    schedule 23.04.2015    source источник


Ответы (1)


Просто нашел решение.

В файле fontcolor.js просто добавьте this.setSpansVerified(); перед this.sync(); в методе pickerSet. Окончательный метод после модификации выглядит так:

pickerSet: function(rule, type)
{
    this.bufferSet();
    this.$editor.focus();
    this.inlineRemoveStyle(rule);
    if (type !== false) this.inlineSetStyle(rule, type);
    if (this.opts.air) this.$air.fadeOut(100);
    this.setSpansVerified();  //adding this line solves the problem
    this.sync();
}

Это должно решить проблему. :)

person writeToBhuwan    schedule 23.04.2015