带有占位符插件增强双击问题的ckeditor

Question

我需要一个占位符/变量，它带有name，defaultValue，tooltip / description。我创建了一个插件，它在编辑器/创建模式下工作正常。创建占位符时，它会将以下标记添加到源

<var class="cke_placeholder" name="varName" title="varToolTip">[[varDefaultValue]]</var>

图片描绘了创造＆amp;编辑模式差异

当我用db中的placehoder保存html内容并尝试将其加载回ckeditor时，我无法获得 + 符号，因此无法启动编辑器。

这是我的ckeditor / plugins / var / plguin.js

    'use strict';

( function() {
    CKEDITOR.plugins.add( 'var', {
        requires: 'widget,dialog',
        icons: 'var', // %REMOVE_LINE_CORE%
        hidpi: true, // %REMOVE_LINE_CORE%

        onLoad: function() {
            CKEDITOR.dialog.add( 'var', this.path + 'dialogs/var.js' );
        },
        init: function( editor ) {
            this.registerWidget( editor );
            editor.ui.addButton && editor.ui.addButton( 'Var', {
                label: 'Create Variable',
                command: 'var',
                toolbar: 'insert',
                icon: 'var'
            } );
        },
        registerWidget: function(editor){
            var that = this;

            // Put ur init code here.
            editor.widgets.add( 'var', {
                // Widget code.
                dialog: 'var',
                pathName: 'var',
                // We need to have wrapping element, otherwise there are issues in
                // add dialog.
                template: '<var class="cke_placeholder">[[]]</var>',

                downcast: function() {
                    return new CKEDITOR.htmlParser.text( '<var class="cke_placeholder" name="'+this.data.name+'" title="'+this.data.description+'">[[' + this.data.defaultValue + ']]</var>' );
                },

                init: function() {
                    this.setData( 'defaultValue', this.element.getText().slice( 2, -2 ) );
                    this.setData( 'name', this.element.getAttribute("name") );
                    this.setData( 'description', this.element.getAttribute("title") );
                },

                data: function() {
                    this.element.setText( '[[' + this.data.defaultValue + ']]' );
                    this.element.setAttribute('name', this.data.name );
                    this.element.setAttribute('title', this.data.description );
                }
            } );        
        },
        afterInit: function( editor ) {
            this.registerWidget( editor );

            /*var placeholderReplaceRegex = /\[\[([^\[\]])+\]\]/g;

            editor.dataProcessor.dataFilter.addRules( {
                text: function( text, node ) {
                    var dtd = node.parent && CKEDITOR.dtd[ node.parent.name ];

                    // Skip the case when placeholder is in elements like <title> or <textarea>
                    // but upcast placeholder in custom elements (no DTD).
                    if ( dtd && !dtd.span )
                        return;

                    return text.replace( placeholderReplaceRegex, function( match ) {
                        // Creating widget code.
                        var widgetWrapper = null,
                            innerElement = new CKEDITOR.htmlParser.element( 'span', {
                                'class': 'cke_placeholder'
                            } );

                        // Adds placeholder identifier as innertext.
                        innerElement.add( new CKEDITOR.htmlParser.text( match ) );
                        widgetWrapper = editor.widgets.wrapElement( innerElement, 'placeholder' );

                        // Return outerhtml of widget wrapper so it will be placed
                        // as replacement.
                        return widgetWrapper.getOuterHtml();
                    } );
                }
            } );*/
        }       
    } );

} )();

这是我的ckeditor / plugins / var / dialogs / var.js

'use strict';

CKEDITOR.dialog.add( 'var', function( editor ) {
    //var lang = editor.lang.var,
        //generalLabel = editor.lang.common.generalTab,

        var generalLabel = 'General',
        validRegex = /^[^\[\]<>]+$/,
        emptyOrInvalid = ' can not be empty. It can not contain any of following characters: [, ], <, >',
        invalid = ' can not contain any of following characters: [, ], <, >';

    return {
        title: 'Variable properties',
        minWidth: 300,
        minHeight: 80,
        contents: [
            {
                id: 'info',
                label: generalLabel,
                title: generalLabel,
                elements: [
                    // Dialog window UI elements.
                    {
                        id: 'name',
                        type: 'text',
                        style: 'width: 100%;',
                        label: 'Name',
                        'default': '',
                        required: true,
                        validate: CKEDITOR.dialog.validate.regex( validRegex, 'name'+emptyOrInvalid ),
                        setup: function( widget ) {
                            this.setValue( widget.data.name );
                        },
                        commit: function( widget ) {
                            widget.setData( 'name', this.getValue() );
                        }
                    },
                    {
                        id: 'defaultValue',
                        type: 'text',
                        style: 'width: 100%;',
                        label: 'Default Value',
                        'default': '',
                        required: true,
                        validate: CKEDITOR.dialog.validate.regex( validRegex, 'Default Value'+emptyOrInvalid ),
                        setup: function( widget ) {
                            this.setValue( widget.data.defaultValue );
                        },
                        commit: function( widget ) {
                            widget.setData( 'defaultValue', this.getValue() );
                        }
                    },
                    {
                        id: 'description',
                        type: 'text',
                        style: 'width: 100%;',
                        label: 'Description',
                        'default': '',
                        required: true,
                        validate: CKEDITOR.dialog.validate.regex( validRegex, 'Description'+invalid ),
                        setup: function( widget ) {
                            this.setValue( widget.data.description );
                        },
                        commit: function( widget ) {
                            widget.setData( 'description', this.getValue() );
                        }
                    }                   
                ]
            }
        ]
    };
} );