CKEditor标准版工具栏无法显示下划线、下标、上标按钮的解决方法

CKEditor标准版默认不会在工具栏显示所有可用按钮，下划线、上标、下标这类按钮默认就不会展示，你可以在JavaScript文件中通过config.toolbarGroups选项自定义工具栏。

以下是完整配置示例：

var config={
    extraPlugins:['codesnippet','justify','codeTag','font','floating-tools','base64image','showblocks'],
    codeSnippet_theme:'monokai_sublime',
    skin : 'moono-dark',
    height:356
}

config.toolbarGroups = [
    { name: 'clipboard', groups: [ 'undo','clipboard' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
    { name: 'forms', groups: [ 'forms' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'links', groups: [ 'links' ] },
    { name: 'insert', groups: [ 'insert' ] },
    { name: 'styles', groups: [ 'styles' ] },
    { name: 'colors', groups: [ 'colors' ] },
    { name: 'tools', groups: [ 'tools' ] },
    { name: 'others', groups: [ 'others' ] },
    { name: 'about', groups: [ 'about' ] },
    '/'
];

config.removeButtons = 'Save,NewPage,Print,Templates,Paste,PasteText,PasteFromWord,SelectAll,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Language,Anchor,Image,Flash,Iframe,About';

editor = CKEDITOR.replace('editor',config);

配置说明 #

• 通过toolbarGroups可以指定工具栏要显示的按钮组，比如：
  • 加入basicstyles组，就能显示粗体、斜体、下划线等格式按钮
  • 加入paragraph组，就能显示标题、列表、块引用等功能按钮
• 你还可以使用官方提供的工具栏配置工具，重新调整每个组内的按钮顺序，根据自身需求自定义工具栏布局。

内容的提问来源于stack exchange，提问作者Abhilash Malkar