Question

我为textAngular编写了一个自定义工具，您可以在其中上传在编辑器中链接的文件。我将我的代码定位在原始textAngular insertLink tool上。单击fileupload按钮后，将打开一个引导程序弹出窗口，您可以上传文件，然后可以使用按钮确认插入链接或链接选择。

问题：这种情况每隔一段时间才有效！如果我在Firefox中运行代码，则会出现 not 的问题（Safari和Chrome不起作用，其他浏览器未经过测试）。如果我遗漏了弹出框，它也会发生而不是 我已经尝试了很多，但我无法找出问题所在。这似乎与Bootstrap popovers，Chrome / Safari＆amp; amp;和textAngular。

这是一个（注释的）plunker，它显示了我的问题： PLNKR

// stackoverflow说，我必须通过代码链接到plunker，所以这是我的问题的核心。我建议在plunker中查看代码..

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);
            }
        };
    }
});

Answer 1

我刚刚发现导致错误的原因：当我点击上传按钮时，编辑器textarea失去了焦点。这在某种程度上混淆了笨拙的文本选择逻辑并产生了错误。这也解释了为什么在Firefox中没有出现错误，因为浏览器以不同方式处理聚焦事件。我在按钮上添加了ng-mousedown="$event.stopPropagation()"，现在所有浏览器都能正常运行。

Bootstrap popover与textAngular编辑器

1 个答案: