textAngular / textAngular

A radically powerful Text-Editor/Wysiwyg editor for Angular.js! Create multiple editor instances, two-way-bind HTML content, watch editors for changes and more!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dropdown Button in Toolbar angular.

subhendumondal opened this issue · comments

Hi, I have facing hard time to figure out the problem and fixing the issue. I have tried to add dropdown menu in toolbar using angularjs/material. please check the code below,

$provide.decorator('taOptions', ['taRegisterTool', '$delegate', function (taRegisterTool, taOptions) {
	
	//token select box
    taRegisterTool('tokens', {
        buttontext: '[tokens]',
        action: function (event, val, taRegisterTool, taOptions) {


            if(typeof val === 'string') {
                this.$editor().wrapSelection('insertText', '[ ' + val + ' ]', true);
            }
            
            return;
        },
        activestate: function() {
            console.log('called');
        }
    });


    taOptions.toolbar = [
        ['h1', 'h2', 'h3'],
        ['bold', 'italics', 'underline', 'html'],
        ['insertImage', 'insertLink', ],
        ['tokens']
    ];
    taOptions.classes = {
        toolbarGroup: 'ta-button-group',
        toolbarButton: '',
        textEditor: 'ta-text-editor',
        htmlEditor: 'md-input'
    };
    return taOptions;

}];

$provide.decorator('taTools', ['$delegate', function (taTools) {

        taTools.tokens.display = `
            <md-select class="editor-select" ng-model="valueModel" ng-change="action($event, valueModel)" placeholder="Add Tokens">
                <md-option ng-value="opt" ng-repeat="opt in ['email', 'number']">[ {{ opt }} ]</md-option>
            </md-select>
        `;
            
}]);

Error:

image

and every time click on the selectbox editor getting disabled. how can I keep it editor mode.