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脚本。

您的帮助将不胜感激。

ckeditor对话框和小部件无法正常工作

0 个答案: