Joywork/js/ckeditor2/plugins/variablessob/plugin.js

'use strict';

(function() {
    CKEDITOR.plugins.add( 'variablessob', {
        requires: 'dialog',
        icons: 'variablessob',
        hidpi: true,
        onLoad: function() {
            CKEDITOR.addCss('span.variablesob {\n' +
                '    padding: 2px 3px;\n' +
                '    margin: auto 2px;\n' +
                '    color: #D0021B;\n' +
                '    font-family: monospace, monospace;\n' +
                '}\n' +
                '.cke .cke_panel_frame {\n' +
                '    max-height: 320px;\n' +
                '    overflow-y: auto;\n' +
                '}\n'
            );
        },
        init: function(editor) {
            CKEDITOR.dialog.add('variablessob', this.path + 'dialogs/variablessob.js');
            editor.widgets.add('variablessob', {
                dialog: 'variablessob',
                pathName: "переменная собственник",
                template: '<span contenteditable="true" class="variablessob"></span>',
                
                
                   
                downcast: function() {
                    //console.log('${*{' + this.data.name + '}*}');
                    //return new CKEDITOR.htmlParser.text('${*{' + this.data.name + '}*}');
                },
                init: function() {
                    //console.log(this.element.getText().slice(2, -1));
                    //editor.insertHtml('${*{' + this.data.name + '}*}');
                    //return this.element.getText().slice(2, -1);
                    //this.setData('name', this.element.getText().slice(2, -1));

                },
                data: function() {
                    
                    if(this.data.name){
                        editor.insertHtml('${*{' + this.data.name + '}*}');
                    }
                    //this.element.setText('${*{' + this.data.name + '}*}');

                },
                /*getLabel: function() {
                    return this.editor.lang.widget.label.replace(/%1/, this.data.name + ' переменная');
                },*/
                
            });

            editor.config.customValues.varKeyPressed = false;

            editor.ui.addButton( 'insertVariableSob', {
                label: 'Вставить переменную для нескольких клиентов',
                command: 'variablessob',
                toolbar: 'insert,6',
                icon: 'variablessob'
            });

            editor.addCommand('autocompleteVariableSob', {
                exec: function(editor) {
                    let dummyElement = editor.document.createElement('span');
                    editor.insertElement(dummyElement);

                    let x = 0, y = 0, obj = dummyElement.$;
                    while (obj.offsetParent) {
                        x += obj.offsetLeft;
                        y += obj.offsetTop;
                        obj = obj.offsetParent;
                    }
                    x += obj.offsetLeft;
                    y += obj.offsetTop;

                    dummyElement.remove();
                    editor.contextMenu.show(editor.document.getBody(), null, x, y);
                }
            });

            let firstExecution = true, dataElement = {};
            editor.addCommand('reloadVariablesSobBox', {
                exec: function(editor) {

                    function getTextNodes( element ) {
                        var children = element.getChildren(),
                            textNodes = [],
                            child;

                        for ( var i = children.count(); i--; ) {
                            child = children.getItem( i );
                            if ( child.type == CKEDITOR.NODE_ELEMENT )
                                getTextNodes( child );
                            else if ( child.type == CKEDITOR.NODE_TEXT )
                                textNodes.push( child );
                        }
                        return textNodes;
                    }

                    if (editor.contextMenu) {
                        dataElement = {};
                        editor.addMenuGroup('variablesSobBoxGroup');
                        
                        $.each(editor.config.customValues.variablesList, function(i, variables) {

                            let variablesBoxItem = "variablesBoxItem" + i;
                            dataElement[variablesBoxItem] = CKEDITOR.TRISTATE_OFF;
                            editor.addMenuItem(variablesBoxItem, {
                                id: variables[1],
                                label: variables[0],
                                group: 'variablesBoxGroup',
                                icon: null,
                                onClick: function() {
                                    let selection = editor.getSelection();
                                    let element = selection.getStartElement();
                                    let ranges = selection.getRanges();
                                    ranges[0].setStart(element.getFirst(), 0);
                                    ranges[0].setEnd(element.getFirst(), 0);
                                    editor.insertText(this.id);
                                }
                            });
                        });

                        if (firstExecution == true) {
                            editor.contextMenu.addListener(function(element) {
                                return dataElement;
                            });
                            firstExecution = false;
                        }
                    }
                }
            });

            delete editor._.menuItems.paste;
        },
        afterInit: function(editor) {
           
            editor.dataProcessor.dataFilter.addRules({
                text: function(text, node) {
                    let dtd = node.parent && CKEDITOR.dtd[node.parent.name];
                    if (dtd && !dtd.span)
                        return;

                    return text.replace(/(\$\{[a-zA-z0-9_.]+\})+/g, function(match) {
                        let innerElement = new CKEDITOR.htmlParser.element('span', {
                            'class': 'variablessob',
                            'contenteditable': 'true'
                        });
                        innerElement.add(new CKEDITOR.htmlParser.text(match));

                        let widgetWrapper = editor.widgets.wrapElement(innerElement, 'variablessob');
                        return widgetWrapper.getOuterHtml();
                    });
                }
            });
            editor.on('key', function(evt) {
                
                if (evt.data.keyCode == CKEDITOR.SHIFT + 52)
                    editor.config.customValues.varKeyPressed = true;

                if (editor.config.customValues.varKeyPressed) {
                    if (evt.data.keyCode == CKEDITOR.SHIFT + 219) {
                        editor.execCommand('reloadVariablesSobBox');
                        editor.execCommand('autocompleteVariableSob');
                        editor.config.customValues.varKeyPressed = true;
                    }
                }
            });

        }
    });
})();