如何从textAngular工具栏上的自定义按钮插入文本/符号 [英] How to insert text/symbols from a custom button on textAngular toolbar

问题描述

基本上我想要一个按钮添加到工具栏，允许用户插入及复印件;进入textangular编辑器（ http://textangular.com/ ），但我无法理解如何将功能添加到之后我的按钮已被注册......由于所有的自定义功能在textangular网站的示例使用相同的语句wrapSelection里面有很小的文件，这样的一个例子是与报价按钮，如下图所示。

  taRegisterTool（报价，{
    iconclass：发发引号右'，
    的ToolTipText：taTranslations.quote.tooltip，
    行动：函数（）{
        返回此$编辑（）wrapSelection。（formatBlock，＆所述; BLOCKQUOTE＆gt;中）;
    }，
    ActiveState公司：函数（）{返回此$编辑器（）queryFormatBlockState（'块引用'）; }
}）;
 

我很困惑，这里的formatBlock被初始化，并认为发现它的来源会帮我解决这个问题。正如你所看到的任何帮助将是pciated AP $ P $

  taRegisterTool（'insertCopyright'，{
        buttontext：'和;复制;，
        的ToolTipText：taTranslations.insertCopyright.tooltip，
        行动：函数（）{
            //？
       }，
    }）;
 

解决方案

只是想我会后我们的解决办法的回答为希望插入自定义符号或类似的东西的人，很明显，我们可以将'insertTextAtCursor'和'moveCaret在别处清理但无论..

  taRegisterTool（'insertCopyright'，{
            buttontext：'和;复制;，
            的ToolTipText：taTranslations.insertCopyright.tooltip，
            行动：函数（）{
                功能insertTextAtCursor（文本）{
                    VAR SEL，范围;
                    如果（window.getSelection）{
                        SEL = window.getSelection（）;
                        如果（sel.getRangeAt＆安培;＆安培; sel.rangeCount）{
                            范围= sel.getRangeAt（0）;
                            range.deleteContents（）;
                            range.insertNode（document.createTextNode（文本））;
                        }
                    }否则如果（document.selection＆安培;＆安培; document.selection.createRange）{
                        document.selection.createRange（）文本=文本。
                    }
                }                功能moveCaret（charCount）{
                    VAR SEL，范围;
                    如果（window.getSelection）{
                        SEL = window.getSelection（）;
                        如果（sel.rangeCount大于0）{
                            VAR textNode = sel.focusNode;
                            sel.collapse（textNode.nextSibling，charCount）;
                        }
                    }否则如果（（SEL = window.document.selection））{
                        如果（sel.type！=控制）{
                            范围= sel.createRange（）;
                            range.move（人物，charCount）;
                            range.select（）;
                        }
                    }
                }                insertTextAtCursor（String.fromChar code（169））;
                返回moveCaret（1）;
            }，
        }）;
 

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

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 () {
            //???
       },
    });

解决方案

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工具栏上的自定义按钮插入文本/符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！