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

Question

我正在用 select [ 'Description', 'Value'].

在 CKeditor 中做一个插件

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' );
>     } });

dialogs/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 );
        }

我想在 reader 中添加以下内容

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

关于如何执行此操作的任何提示？使用文本集查看此跨度... 暂时谢谢你

Answer 1

已解决 ;)

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 );
    }

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

Creating a Simple CKEditor Plugin - Select dropdown

html

javascript

jquery

ckeditor