创建一个简单的CKEditor插件-选择下拉列表

Creating a Simple CKEditor Plugin - Select dropdown

本文关键字：插件 CKEditor 选择下拉列表简单一个创建更新时间：2023-11-14

我正在CKeditor中做一个插件，并选择['Description'，'Value']。

ckeditor root/
   plugins/
     span/
       icons/
          span.png
       dialogs/
           span.js
       plugin.js

plugin.js

> CKEDITOR.plugins.add( 'span', {
>     icons: 'span',
>     init: function( editor ) {
>         editor.addCommand( 'span', new CKEDITOR.dialogCommand( 'spanDialog' ) );
>         editor.ui.addButton( 'Span', {
>             label: 'Insert Reserved Word',
>             command: 'span',
>             toolbar: 'insert'
>         });
>         CKEDITOR.dialog.add( 'spanDialog', this.path + 'dialogs/span.js' );
>     } });

对话框/span.js

CKEDITOR.dialog.add( 'spanDialog', function( editor ) {
    return {
        title: 'Palavras Reservadas',
        minWidth: 400,
        minHeight: 200,
        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'select',
                        id: 'span',
                        label: 'Reserved Words Available',
                        items: [ [ 'example 1', '#exanple1#' ], [ 'example 2', '#example2#' ] ],
                        validate: CKEDITOR.dialog.validate.notEmpty( "Field can not be empty." ),
                        setup: function(a) {
                            this.setValue(a.getAttribute("value") || "")
                        }
                    }
                ]
            }
        ],
        onOk: function() {
            var dialog = this;
            var span = editor.document.createElement( 'span' );
            span.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
            editor.insertElement( span );
        }
    };
});

在函数onOK（）

     onOk: function() {
            var dialog = this;
            var span = editor.document.createElement( 'span' );
            span.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
            editor.insertElement( span );
        }

我想向读者添加以下

<span>#example1#</span> //if I select a Exemple 1

有什么技巧吗？用文本集查看此跨度。。。感谢您

Resolved；）

span.js

setup: function( element ) {
                            element.setText( this.getValue() );
                        },
                        commit: function( element ) {
                            element.setText( this.getValue() );
                        }
          ....  var selection = editor.getSelection();
        var element = selection.getStartElement();
        if ( element )
            element = element.getAscendant( 'span', true );
        if ( !element || element.getName() != 'span' ) {
            element = editor.document.createElement( 'span' );
            this.insertMode = true;
        }
        else
            this.insertMode = false;
        this.element = element;
        if ( !this.insertMode )
            this.setupContent( this.element );
    },
    onOk: function() {
        var dialog = this;
        var abbr = this.element;
        this.commitContent( abbr );
        if ( this.insertMode )
            editor.insertElement( abbr );
    }