диалог ckeditor и виджет не работают должным образом

Question

В ckeditor (plugin.js) у меня есть этот код ниже.

 CKEDITOR.plugins.add( 'beforeafter', {
    requires: 'widget',
    icons: 'beforeafter',
 init: function( editor ) {
    editor.widgets.add( 'beforeafter', {
    button: 'beforeafter',

            template:
                '<div class="ba-slider-element">' +
                 '<div class="ba-slider">' +
                '<div class="resize">' +
                '<div class="handle">' +
                '</div>',



                dialog: 'beforeafterDialog',

            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'ba-slider' );
            }
        } );

        // Define an editor command that opens our dialog window.
        editor.addCommand( 'beforeafter', new CKEDITOR.dialogCommand( 'beforeafterDialog' ) );

        // Create a toolbar button that executes the above command.
        editor.ui.addButton( 'beforeafter', {

            // The text part of the button (if available) and the tooltip.
            label: 'Insert A Before And After Image',

            // The command to execute on click.
            command: 'beforeafter',

            // The button placement in the toolbar (toolbar group name).
            toolbar: 'insert'
        });

        // Register our dialog file -- this.path is the plugin folder path.
        CKEDITOR.dialog.add( 'beforeafterDialog', this.path + 'dialogs/beforeafter.js' );
    }
});

В файле диалога (beforeafter.js) у меня есть этот код ниже.

CKEDITOR.dialog.add( 'beforeafterDialog', function( editor ) {
return {

    title: 'Before and After Image Tool',
    minWidth: 400,
    minHeight: 200,

    contents: [
        {
            id: 'tab-basic',
            label: 'Basic Settings',

            // The tab content.
            elements: [
                {
                    type: 'text',
                    id: 'beforeimage',
                    label: 'paste your BEFORE image URL below',
                    validate: CKEDITOR.dialog.validate.notEmpty( "Please add a URL in the Before image field." )
                },
                {
                    type: 'text',
                    id: 'afterimage',
                    label: 'paste your AFTER image URL below',
                    validate: CKEDITOR.dialog.validate.notEmpty( "Please add a URL in the After image field." )
                }
            ]
        },
    ],

     onOk: function() {

     var dialog = this;
     var result = editor.document.createElement('div');
     result.setHtml("<div class=\"ba-slider-element\">\n" +
         "<div class=\"ba-slider\">\n" +
         "<img src=\"" + dialog.getValueOf( 'tab-basic', 'beforeimage' ) + "\" alt=\"\">\n" +
         "<div overlay-lable=\"Before\" class=\"before-lable-1\">\n" +
         "<div overlay-lable=\"Before\" class=\"before-lable-2\">\n" +
         "<div class=\"resize\">\n" +
         "<img src=\"" + dialog.getValueOf( 'tab-basic', 'afterimage' ) + "\" alt=\"\">\n" +
         "<div overlay-lable=\"After\" class=\"after-lable-1\">\n" +
         "</div>\n" +           
         "<div overlay-lable=\"After\" class=\"after-lable-2\"></div></div>\n" +
         "<div class=\"handle\">\n" +
         "</div>");
          editor.insertElement( result );
          }

};
});

В окне редактирования публикации ckeditor, когда я нажимаю кнопку источника, чтобы просмотреть источник, это код, который генерируется ниже.

<div>
<div class="ba-slider-element">
    <div class="ba-slider">
        <img alt="" src="https://pepsized.com/wp-content/uploads/2018/09/beerslider/demo-assets/images/man-hold-beer.jpg">
        <div overlay-lable="Before" class="before-lable-1">
            <div overlay-lable="Before" class="before-lable-2">
                <div class="resize">
                    <img alt="" src="https://pepsized.com/wp-content/uploads/2018/09/beerslider/demo-assets/images/man-hold-beer-after1logo.jpg">
                    <div overlay-lable="After" class="after-lable-1">
                        &nbsp;
                    </div>

                    <div overlay-lable="After" class="after-lable-2">
                        &nbsp;
                    </div>
                </div>

                <div class="handle">
                    &nbsp;
                </div>
            </div>
        </div>
    </div>
</div>

Ползунокработает нормально, но я не могу редактировать поля URL.Когда я дважды щелкаю ползунок, чтобы редактировать его, появляется диалоговое окно с пустыми полями URL. ckeditor diolog

Мне нужна помощь с этим.1. Мне нужно, чтобы элемент подсвечивался желтым и синим цветом при наведении курсора на область. 2. При двойном щелчке для редактирования в диалоговых полях должен отображаться предыдущий введенный URL-адрес.3. Как можно было бы предварительно просмотреть слайдер в режиме редактирования.Слайдер использует скрипт jquery.

Ваша помощь будет по достоинству оценена.