Question

我正在为redactor编写一个自定义插件来插入图标（阅读字体很棒的图标）。问题是，图标总是插入内容的开头而不是前一个光标位置。

我写的Icon插件：

if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.icons = {
    init: function()
    {
        var icons = '&#xf000; &#xf001; &#xf002;';
        var name = 'icons';
        var $dropdown = $('<div class="redactor_dropdown redactor_dropdown_box_' + name + '" style="display: none; width: 243px;">');

        this.buttonAddSeparator();
        this.iconPickerBuilder($dropdown, name, icons);
        $(this.$toolbar).append($dropdown);
        this.buttonAdd(name, this.opts.curLang[name], $.proxy(function(btnName, $button, btnObject, e)
        {
            this.selectionSave();
            this.dropdownShow(e, btnName);
        }, this));
    },
    iconPickerBuilder: function($dropdown, name, icons)
    {
        var _self = this;
        var onSwatch = function(e)
        {
            e.preventDefault();
            _self.iconPickerSet($(this).text());
        }

        var ilist = icons.split(' ');
        var len = ilist.length;
        for (var z = 0; z < len; z++)
        {
            var icon = ilist[z];

            var $swatch = $('<i class="fa" style="margin-right: 10px">' + icon + '</i>');
            $dropdown.append($swatch);
            $swatch.on('click', onSwatch);
        }
    },
    iconPickerSet: function(c)
    {
        this.bufferSet();
        this.$editor.focus();
        this.selectionRestore();

        var node = $('<i class="fa">' + c + '</i>');
        this.insertNode(node);
        this.sync();
    }
};

任何帮助表示感谢。

Answer 1

我现在无法测试，但在恢复选择时，调用this.$editor.focus()可能会将焦点放在错误的元素上。根据示例，只需调用this.selectionRestore()即可：http://imperavi.com/redactor/examples/plugin-modal/

您是否在没有this.$editor.focus()声明的情况下尝试过它？

我从示例中拿走的另一件事是，他们不会从this.selectionSave()回调中调用this.buttonAdd，而是在创建模态对话框时（在他们的情况下）。很难判断模态行为是否与下拉行为不同，但您可以尝试使用模态并查看是否可以解决您的问题。

如何在Redactor中正确维护光标位置？

1 个答案: