编辑器:下拉插件

Redactor: dropdown plugin

本文关键字:插件 编辑器      更新时间:2023-09-26

我尝试在editor -js中实现一个colorpicker-fontcolor插件。

http://jsfiddle.net/ped7txq6/

$(function(){
    //plugin
    $.Redactor.prototype.fontcolor = function()
    {
        return {
            init: function()
            {
                var name = 'fontcolor';
                var rdctr = this;
                var button = this.button.addAfter('fontsize', name, this.lang.get(name));
                var $dropdown = this.button.addDropdown(button);
                $dropdown.css('min-width', '199px');
                this.fontcolor.buildPicker($dropdown, name);
                button.on('click', function(){
                    rdctr.selection.save();
                });
            },
            buildPicker: function($dropdown, name)
            {
                var rdctr = this;
                var $picker = $('<p>').ColorPicker({
                                                    flat: true,
                                                    onSubmit: function(hsb, hex, rgb, el){
                                                    //  $(el).val('#' + hex);
                                                    //  $(el).ColorPickerHide();
                                                    },
                                                    onChange: function(hsb, hex, rgb, el){
                                                    //  $(el).val(hex);
                                                        rdctr.fontcolor.set('color', '#' + hex);
                                                    }
                                                }).bind('keyup', function(){
                                                    //$(rdctr).ColorPickerSetColor(rdctr.value);
                                                //  rdctr.fontcolor.set('color', '#' + hex);
                                                });
                $dropdown.append($picker);
            },
            set: function(rule, type)
            {
                console.log('_', type);
                //selected color
                this.selection.restore();
                this.inline.format('span', 'style', rule + ':' + type + ';');
            },
            remove: function(rule)
            {
                //removed color
            //  this.inline.removeStyleRule(rule);
            }
        };
    };
    //editor
    $('#redactor').redactor({
        plugins: ['fontcolor'],
        focus: true,
        changeCallback: function()
        {
        },
        blurCallback: function()
        {
        }
    });
});

我有两个问题:

  1. 当我点击颜色选择器上的下拉菜单时,下拉菜单关闭,
  2. 有时当我选择颜色时,编辑器中的文本会得到默认颜色,而不是颜色选择器中的实际颜色。

谁能帮上忙?

非常感谢!

检查字体颜色插件