将自定义样式的按钮添加到CKEditor

乔恩

CKEditor允许您通过编辑文件styles.js将自定义样式添加到样式组合框(有关详细信息,请参阅什么是用于添加自定义HTML元素的优秀javascript HTML编辑器?

我想向工具栏添加唯一的按钮以应用我的自定义样式,而不是用户必须从样式组合中选择它们。

如何将自定义按钮添加到CKEditor工具栏?

奥列克

继续执行以下代码:

// Your custom style.
var myStyle = new CKEDITOR.style( {
    element: 'span',
    attributes: {
        'data-foo': 'bar',
        'class': 'myClass'
    },
    styles: {
        color: 'red'
    }
} );

CKEDITOR.replace( 'editor1', {
    on: {
        // Register command and button along with other plugins.
        pluginsLoaded: function() {
            var editor = this;

            // Registers a command that applies the style.
            // Note: it automatically adds Advanced Content Filter rules.
            this.addCommand( 'myStyle', new CKEDITOR.styleCommand( myStyle ) );

            // Add toolbar button for this command.
            this.ui.addButton && this.ui.addButton( 'myStyleButton', {
                label: 'My style',
                command: 'myStyle',
                toolbar: 'insert,10'
                // You may want to set some icon here.
                // icon: 'someIcon'
            } );
        }
    }
} );

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将自定义类添加到引导按钮

来自分类Dev

将自定义按钮操作添加到笔管

来自分类Dev

将自定义月份按钮添加到FullCalendar

来自分类Dev

将自定义类添加到引导按钮

来自分类Dev

如何将自定义样式添加到样式化的组件?

来自分类Dev

将自定义样式添加到Mahapps.Metro现有样式

来自分类Dev

如何将自定义插件添加到CKEditor 5版本?

来自分类Dev

将自定义地图样式添加到Mapbox.js

来自分类Dev

将自定义样式规则添加到列表中的偶数元素

来自分类Dev

将自定义样式格式添加到tinymce编辑器

来自分类Dev

如何将自定义样式添加到dnn默认主页?

来自分类Dev

将自定义CSS样式添加到Material UI KeyboardDatePicker

来自分类Dev

WordPress:将自定义样式添加到Gutenberg组块

来自分类Dev

将自定义CSS样式添加到Material UI KeyboardDatePicker

来自分类Dev

将自定义样式规则添加到列表中的偶数元素

来自分类Dev

如何将自定义样式添加到dnn默认主页?

来自分类Dev

使用 javascript 将自定义位置图钉添加到样式化的 Google 地图

来自分类Dev

在WordPress中将自定义按钮添加到TinyMCE

来自分类Dev

如何将自定义按钮添加到AVPlayerViewController?

来自分类Dev

在C#.net中将自定义按钮添加到gridview

来自分类Dev

Magento将自定义按钮添加到订单创建页面

来自分类Dev

如何将自定义按钮添加到UIActivityViewController?

来自分类Dev

如何将自定义按钮添加到Summernote工具栏

来自分类Dev

将自定义ajax按钮添加到WooCommerce管理订单列表

来自分类Dev

将自定义HTML属性添加到Grav生成表单的按钮

来自分类Dev

Word 365 2016-将自定义按钮添加到``主页''选项卡

来自分类Dev

如何将自定义按钮添加到UIActivityViewController?

来自分类Dev

如何将自定义投票按钮添加到Rails应用

来自分类Dev

将自定义类添加到ASP.NET MVC 4中的单选按钮

Related 相关文章

  1. 1

    将自定义类添加到引导按钮

  2. 2

    将自定义按钮操作添加到笔管

  3. 3

    将自定义月份按钮添加到FullCalendar

  4. 4

    将自定义类添加到引导按钮

  5. 5

    如何将自定义样式添加到样式化的组件?

  6. 6

    将自定义样式添加到Mahapps.Metro现有样式

  7. 7

    如何将自定义插件添加到CKEditor 5版本?

  8. 8

    将自定义地图样式添加到Mapbox.js

  9. 9

    将自定义样式规则添加到列表中的偶数元素

  10. 10

    将自定义样式格式添加到tinymce编辑器

  11. 11

    如何将自定义样式添加到dnn默认主页?

  12. 12

    将自定义CSS样式添加到Material UI KeyboardDatePicker

  13. 13

    WordPress:将自定义样式添加到Gutenberg组块

  14. 14

    将自定义CSS样式添加到Material UI KeyboardDatePicker

  15. 15

    将自定义样式规则添加到列表中的偶数元素

  16. 16

    如何将自定义样式添加到dnn默认主页?

  17. 17

    使用 javascript 将自定义位置图钉添加到样式化的 Google 地图

  18. 18

    在WordPress中将自定义按钮添加到TinyMCE

  19. 19

    如何将自定义按钮添加到AVPlayerViewController?

  20. 20

    在C#.net中将自定义按钮添加到gridview

  21. 21

    Magento将自定义按钮添加到订单创建页面

  22. 22

    如何将自定义按钮添加到UIActivityViewController?

  23. 23

    如何将自定义按钮添加到Summernote工具栏

  24. 24

    将自定义ajax按钮添加到WooCommerce管理订单列表

  25. 25

    将自定义HTML属性添加到Grav生成表单的按钮

  26. 26

    Word 365 2016-将自定义按钮添加到``主页''选项卡

  27. 27

    如何将自定义按钮添加到UIActivityViewController?

  28. 28

    如何将自定义投票按钮添加到Rails应用

  29. 29

    将自定义类添加到ASP.NET MVC 4中的单选按钮

热门标签

归档