CKEditor 4自定义下拉列表

我们正在尝试向CKeditor添加一个自定义下拉列表，其中包含我们将查找和替换的预设值列表，对于我来说，我找不到一个简单的方法来实现这一点。看TinyMCE很容易：

对于CKEditor是否有这样一个简单的解决方案，我们不希望仅仅为了这个特性就将CKEditor换成TinyMCE。我发现了一个名为PlaceHolder的插件，但它并不能完全满足我们的需要，老实说，我希望在没有插件的情况下实现这一点，只是像TinyMCE那样在初始化时进行配置

非常感谢您的见解。

都是关于（）的：

---

感谢Oleq，在使用ckeditor时使用了stackoverflow的许多解决方案。非常感谢。谢谢你的回答。我已经找了很久这个解决方案了。然而，我想知道，当你点击小提琴中的“我的下拉”按钮时，面板内的所有内容都被聚焦（你会在打开的面板底部看到一条蓝线）。你如何使第一项重点突出？

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

            editor.ui.addRichCombo( 'my-combo', {
                label: 'My Dropdown Label',
                title: 'My Dropdown Title',
                toolbar: 'basicstyles,0',

                panel: {               
                    css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
                    multiSelect: false,
                    attributes: { 'aria-label': 'My Dropdown Title' }
                },

                init: function() {    
                    this.startGroup( 'My Dropdown Group #1' );
                    this.add( 'foo', 'Foo!' );
                    this.add( 'bar', 'Bar!' );                    

                    this.startGroup( 'My Dropdown Group #2' );
                    this.add( 'ping', 'Ping!' );
                    this.add( 'pong', 'Pong!' );                    

                },

                onClick: function( value ) {
                    editor.focus();
                    editor.fire( 'saveSnapshot' );

                    editor.insertHtml( value );

                    editor.fire( 'saveSnapshot' );
                }
            } );        
        }        
    }
} );