Redactor 9.2.6 fontcolor插件不反映HTML视图中的“背景颜色”更改吗？

我使用的Redactor插件版本9.2.6，我添加了fontcolor插件，用于添加添加字体颜色和背景颜色的功能。Redactor 9.2.6 fontcolor插件不反映HTML视图中的“背景颜色”更改吗？

问题：

当我尝试添加字体颜色在编辑器中，同样的变化会反映在HTML视图。插件自动添加一个<span style="font-color: colorcode;" >Selected Content</span>。
当我尝试使用背景颜色做同样的事情时，编辑器表现良好，但所做的更改未反映在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(); 
    } 
};

这究竟是为什么？任何想法？？

来源

2015-04-23 writeToBhuwan

刚刚找到解决方案。

在fontcolor.js文件中，只需在pickerSet方法中的this.sync();之前添加this.setSpansVerified();即可。修改后的最终方法是这样的：

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(); 
}

这应该解决的问题。 :)

来源

2015-04-23 11:26:35 writeToBhuwan

Redactor 9.2.6 fontcolor插件不反映HTML视图中的“背景颜色”更改吗？

回答

相关问题