Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to insert text/symbols from a custom button on textAngular toolbar

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: '&copy;',
        tooltiptext: taTranslations.insertCopyright.tooltip,
        action: function () {
            //???
       },
    });
like image 540
alsco77 Avatar asked Oct 01 '14 15:10

alsco77


1 Answers

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: '&copy;',
            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);
            },
        });
like image 58
alsco77 Avatar answered Nov 15 '22 03:11

alsco77