我正在为 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();
}
};
感谢任何帮助。
最佳答案
我现在无法测试,但调用 this.$editor.focus()
可能会在恢复选择时将焦点设置在错误的元素上。根据示例,只需调用 this.selectionRestore()
就足够了:http://imperavi.com/redactor/examples/plugin-modal/
你试过没有this.$editor.focus()
语句吗?
我从示例中得出的另一件事是,他们不会从 this.buttonAdd
回调中调用 this.selectionSave()
,而是在创建模态对话框(在他们的情况下)。很难判断模态行为是否与下拉行为不同,但您可以尝试使用模态,看看是否能解决您的问题。
关于javascript - 如何正确维护 Redactor 中的光标位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22483331/