javascript - 如何正确维护 Redactor 中的光标位置？

Question

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

我写的图标插件:

if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.icons = {
    init: function()
    {
        var icons = '  ';
        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.buttonAdd 回调中调用 this.selectionSave()，而是在创建模态对话框(在他们的情况下)。很难判断模态行为是否与下拉行为不同，但您可以尝试使用模态，看看是否能解决您的问题。