如何从 textAngular 工具栏上的自定义按钮插入文本/符号

问题描述

本质上我想在工具栏中添加一个按钮以允许用户插入 ©进入 textangular 编辑器(http://textangular.com/)，但是我无法理解如何向我的按钮注册后...由于 textangular 站点上的所有自定义功能示例都使用相同的语句wrapSelection"，该语句的文档非常少，下面显示了一个带有引用按钮的示例.

Essentially I want to add a button to the toolbar to allow the user to insert © into the textangular editor (http://textangular.com/), however I am having trouble understanding how to add functionality to my button after it has been registered... As all the examples for custom functionality on the textangular site use the same statement "wrapSelection" which has very minimal documentation, an example of this is shown below with the quote button.

    taRegisterTool('quote', {
    iconclass: 'fa fa-quote-right',
    tooltiptext: taTranslations.quote.tooltip,
    action: function(){
        return this.$editor().wrapSelection("formatBlock", "<BLOCKQUOTE>");
    },
    activeState: function(){ return this.$editor().queryFormatBlockState('blockquote'); }
});

我对formatBlock"的初始化位置感到困惑，并相信找到它的来源会帮助我解决这个问题.如您所见，将不胜感激

I am confused as to where the "formatBlock" is initialised and believe finding its source would help me with this problem. As you can see any help would be appreciated

    taRegisterTool('insertCopyright', {
        buttontext: '©',
        tooltiptext: taTranslations.insertCopyright.tooltip,
        action: function () {
            //???
       },
    });

推荐答案

只是想我会为任何希望插入自定义符号或类似内容的人发布我们的解决方法答案，显然我们可以将 'insertTextAtCursor' 和 'moveCaret' 移到其他地方清理，但不管..

Just thought I would post our workaround answer for anyone wishing to insert custom symbols or anything like that, obviously we can move the 'insertTextAtCursor' and 'moveCaret' elsewhere to cleanup but regardless..

    taRegisterTool('insertCopyright', {
            buttontext: '©',
            tooltiptext: taTranslations.insertCopyright.tooltip,
            action: function() {
                function insertTextAtCursor(text) {
                    var sel, range;
                    if (window.getSelection) {
                        sel = window.getSelection();
                        if (sel.getRangeAt && sel.rangeCount) {
                            range = sel.getRangeAt(0);
                            range.deleteContents();
                            range.insertNode(document.createTextNode(text));
                        }
                    } else if (document.selection && document.selection.createRange) {
                        document.selection.createRange().text = text;
                    }
                }

                function moveCaret(charCount) {
                    var sel, range;
                    if (window.getSelection) {
                        sel = window.getSelection();
                        if (sel.rangeCount > 0) {
                            var textNode = sel.focusNode;
                            sel.collapse(textNode.nextSibling, charCount);
                        }
                    } else if ((sel = window.document.selection)) {
                        if (sel.type != "Control") {
                            range = sel.createRange();
                            range.move("character", charCount);
                            range.select();
                        }
                    }
                }

                insertTextAtCursor(String.fromCharCode(169));
                return moveCaret(1);
            },
        });

这篇关于如何从 textAngular 工具栏上的自定义按钮插入文本/符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！