Question

我在Django CkEditor 5.2.2中使用一个网站

我想创建一个自定义插件来插入一些html。我的插件中需要一个对话框来选择我想要的html中的徽标，标题和内容。我严格按照CK Editor网站上的小部件教程进行操作，但该行：

editor.widgets.add( 'simplebox', {
    button: 'Create a simple box'
} );

不起作用。所以我尝试插入一个按钮：

editor.ui.addButton( 'simplebox', {
            label: 'Ajouter un encadré',
            command: 'insertTextBox',
            toolbar: 'yourcustomtools',
        });

这有效，我的工具栏中有一个插入html的按钮。但是我无法将其链接到任何对话框...

当前我的代码在我的 simplebox / plugin.js

中

CKEDITOR.plugins.add('simplebox', {
    requires: 'widget',
    icons: 'simplebox',

    init: function (editor) {
        CKEDITOR.dialog.add('addSimpleBox', this.path + 'dialogs/simplebox.js' );

        editor.ui.addButton( 'simplebox', {
            label: 'Ajouter un encadré',
            command: 'insertTextBox',
            toolbar: 'yourcustomtools',
        });

        editor.addCommand( 'insertTextBox', {
            exec: function( editor ) {
                editor.insertHtml( '' +
                    '<div class="text-box">' +
                        '<div class="logo">Logo</div>' +
                        '<div class="content">' +
                            '<div class="content--title">Le titre</div>' +
                            '<div class="content--content">Le contenu</div>' +
                    '</div>' +
                    '</div>' );
            }
        });
    }
});

在我的 dialogs / simplebox.js 中，这是本教程和我尝试过的内容的组合...

CKEDITOR.dialog.add( 'simplebox', function( editor ) {
    return {
        title: 'Edit Simple Box',
        minWidth: 200,
        minHeight: 100,
        contents: [
            {
                id: 'info',
                label: editor,
                title: editor,
                elements: [
                    {
                        id: 'logo',
                        type: 'select',
                        label: 'Logo',
                        items: [
                            [ editor.lang.common.notSet, '' ],
                            [ editor.lang.common.alignLeft, 'left' ],
                            [ editor.lang.common.alignRight, 'right' ],
                            [ editor.lang.common.alignCenter, 'center' ]
                        ],
                        setup: function( widget ) {
                            this.setValue( widget.data.align );
                        },
                        commit: function( widget ) {
                            widget.setData( 'align', this.getValue() );
                        }
                    },
                    {
                        id: 'width',
                        type: 'text',
                        label: 'Width',
                        width: '50px',
                        setup: function( widget ) {
                            this.setValue( widget.data.width );
                        },
                        commit: function( widget ) {
                            widget.setData( 'width', this.getValue() );
                        }
                    }
                ]
            }
        ]
    };
} );

非常感谢您的帮助。

带有对话框的Django CK-Editor自定义插件

0 个答案: