Javascript CKeditor自定义数据插入

对于我当前的项目，我使用cleditor，但希望更改为ckeditor。我的问题是，我需要一些自定义下拉列表，我不知道如何在ckeditor中实现。让我举个例子：

图片1:

图片2:

---

因此，基本上我需要一个包含一些图像的下拉菜单，当我点击某个图像时，它会将其插入编辑器文本区域。

这非常简单。请查看此代码并使用以下代码：

CKEDITOR.replace( 'editor', {
    toolbarGroups: [
        { name: 'mode' },
        { name: 'basicstyles' },
        { name: 'styles' }        
   ],
    on: {        
        pluginsLoaded: function() {
            var editor = this,
                config = editor.config;

            // Helper function. Coverts color name into colorful <span>.
            function colorfulSpan( color ) {
                return '<span style="color:' + color + '">' + color + '</span>';
            }

            // AllowedContent rule for the contents inserted by the combo.
            // As this sample combo inserts <span> of certain style only, it's quite short.
            // See: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
            var acfRules = 'span{color}';

            // Let the party on!            
            editor.ui.addRichCombo( 'myCombo', {
                label: 'My combo\'s label',
                title: 'My combo',
                toolbar: 'styles',

                // Registers a certain type of contents in the editor.
                allowedContent: acfRules,

                // The minimal content that must be allowed in the editor for this combo to work.
                requiredContent: acfRules,

                // Combo iherits from the panel. Set up it first so all styles
                // of the contents are available in the panel.
                panel: {
                    css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
                    multiSelect: false
                },

                // Let's populate the list of available items.
                init: function() {
                    this.startGroup( 'My custom panel group' );

                    var items = [ 'red', 'orange', 'blue', 'green' ];

                    for ( var i = 0; i < items.length; i++ ) {
                        var item = items[ i ];

                        // Add entry to the panel.
                        this.add( item, colorfulSpan( item ), item );
                    }
                },

                // This is what happens when the item is clicked.
                onClick: function( value ) {
                    editor.focus();

                    // Register undo snapshot.
                    editor.fire( 'saveSnapshot' );

                    // Insert a colorful <span>.
                    editor.insertHtml( colorfulSpan( value ) );                    

                    // Register another undo snapshot. The insertion becomes undoable.
                    editor.fire( 'saveSnapshot' );
                },

                // The value of the combo may need to be updated, i.e. according to the selection.
                // This is where such listener is supposed to be created.
                onRender: function() {
                    //editor.on( 'selectionChange', function( ev ) {
                    //    var currentValue = this.getValue();
                    //    ...
                    //    this.setValue( value );
                    //}, this );
                },

                // The contents of the combo may change, i.e. according to the selection.
                // This is where it supposed to be updated.
                onOpen: function() {
                },

                // Disable the combo if the current editor's filter does not allow
                // the type of contents that the combo delivers (i.e. widget's nested editable).
                // See: http://docs.ckeditor.com/#!/guide/dev_widgets.
                refresh: function() {
                    if ( !editor.activeFilter.check( acfRules ) )
                        this.setState( CKEDITOR.TRISTATE_DISABLED );
                }
            } );            
        }
    }
} );

CKEDITOR.replace（'editor'{
工具栏组：[
{name:'mode'}，
{name:'basicstyles'}，
{name:'样式'}
],
关于：{
pluginsload:function（）{
var editor=this，
config=editor.config；
//助手函数。将颜色名称转换为彩色。
函数colorfulSpan（颜色）{
返回“”+颜色+“”；
}
//组合插入的内容的AllowedContent规则。
//由于此示例组合仅插入特定样式，因此非常简短。
//见：http://docs.ckeditor.com/#！/guide/dev\u高级内容\u过滤器
var acfRules='span{color}'；
//让聚会开始吧！
editor.ui.addRichCombo（'myCombo'{
标签：“我的组合标签”，
标题：“我的组合”，
工具栏：“样式”，
//在编辑器中注册特定类型的内容。
允许内容：acfRules，
//编辑器中必须允许的最小内容，此组合才能工作。
所需内容：acfRules，
//从面板中组合iHerites。首先设置它，以便所有样式
//面板中提供了其中的一部分内容。
专家组：{
css:[CKEDITOR.skin.getPath（'editor'）].concat（config.contentsCss），
多重选择：错误
},
//让我们填充可用项的列表。
init:function（）{
this.startGroup（'我的自定义面板组'）；
变量项=[‘红色’、‘橙色’、‘蓝色’、‘绿色’]；
对于（变量i=0；i

欢迎来到堆栈溢出。请阅读并找出如何提出一个好的问题，从而产生好的、有用的答案。这可能会对您有所帮助。我需要在下拉列表中查看数据。。我已经知道如何放置一个按钮，但我需要一个类似于具有多个列的富组合的东西。