Пользовательский плагин Django CK-Editor с диалоговым окном - PullRequest
Новая
       16

Пользовательский плагин Django CK-Editor с диалоговым окном

0 голосов
/ 25 сентября 2018

Я работаю с веб-сайтом в Django, 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() );
                        }
                    }
                ]
            }
        ]
    };
} );

большое спасибо за вашу помощь.

...