Javascript Bootstrap popover与textAngular editor结合会导致奇怪的错误
我已经编写了一个自定义工具,用于上传编辑器中链接的文件。我已经将我的代码定向到原始代码上。 单击“文件上载”按钮时,将打开一个引导弹出窗口,您可以上载文件,并可以使用按钮确认以插入链接或链接所选内容。 问题是:这只会在每秒钟起作用!如果我在Firefox Safari和Chrome中运行的代码不起作用,问题就不会出现,其他浏览器也没有经过测试。如果我漏掉了爆米花,也不会发生这种情况。 我试了很多次,但都没发现问题出在哪里。这似乎是一些与引导弹出框、Chrome/Safari和textAngular相结合的问题。 下面是一个有注释的plunker,它显示了我的问题: //stackoverflow说,我必须通过代码附带指向plunker的链接,所以这里是我问题的核心。我建议改为在plunker中查看代码Javascript Bootstrap popover与textAngular editor结合会导致奇怪的错误,javascript,angularjs,twitter-bootstrap,google-chrome,safari,Javascript,Angularjs,Twitter Bootstrap,Google Chrome,Safari,我已经编写了一个自定义工具,用于上传编辑器中链接的文件。我已经将我的代码定向到原始代码上。 单击“文件上载”按钮时,将打开一个引导弹出窗口,您可以上载文件,并可以使用按钮确认以插入链接或链接所选内容。 问题是:这只会在每秒钟起作用!如果我在Firefox Safari和Chrome中运行的代码不起作用,问题就不会出现,其他浏览器也没有经过测试。如果我漏掉了爆米花,也不会发生这种情况。 我试了很多次,但都没发现问题出在哪里。这似乎是一些与引导弹出框、Chrome/Safari和textAngula
taRegisterTool('fileupload', {
tooltiptext: 'Upload a file to link to',
iconclass: 'fa fa-upload',
action: function () {
//get editors fileupload button
var button = $('[name="fileupload"]');
//create popover content
var popoverContent = angular.element('<ta-fileupload-popover></ta-fileupload-popover>');
// the editor fileupload button scope acts as interface between the popover directive and the editor
// (i don't really like this - is there a better way to let them communicate?)
var $buttonScope = button.scope();
//compile content it to the buttons scope
$compile(popoverContent)($buttonScope);
//create bootstrap popover
button.popover({
content: popoverContent,
placement: 'bottom',
container: 'body',
viewport: button,
html: true
});
//show it
button.popover('show');
//..for reference inside performAction function
var self = this;
//taFileuploadPopover calls this after finishing the upload
$buttonScope.performAction = function () {
//the path where the uploaded file will be
var urlLink = $buttonScope.taFileUploadAccessPath;
//wrap selection like in original textangular insertLink tool
if (urlLink && urlLink !== '' && urlLink !== 'http://') {
//destroy popover
button.popover('destroy');
//urlLink is always correctly defined..
console.log(urlLink)
//TODO ..but the wrapping/link insertion only works every second time!!!!!!
return self.$editor().wrapSelection('createLink', urlLink, true);
}
};
}
});
我刚刚发现了错误的原因:当我点击上传按钮时,编辑器文本区域失去了焦点。这在某种程度上混淆了rangy文本选择逻辑并产生了错误。这也解释了为什么Firefox中没有出现错误,因为浏览器处理聚焦事件的方式不同。我在按钮中添加了一个ng mousedown=$event.stopPropagation,现在所有浏览器都可以正常工作