CKEditor4自定义下拉列表

最新推荐文章于 2025-06-03 01:21:49 发布

原创最新推荐文章于 2025-06-03 01:21:49 发布 · 698 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端

thinkphp 同时被 2 个专栏收录

9 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

本文详细介绍了如何在 CKEditor4 中创建并定制自己的下拉列表，包括设置样式、添加选项以及与编辑器交互的方法，帮助前端开发者提升富文本编辑器的用户体验。

CKEDITOR.replace( 'editor', {
//toolbarGroups可以省略，要不只有自定义按钮
    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' );
                }
            } );        
        }        
    }
} );