CKEditor系列教程（二）CKEditor 前端应用
配置
配置文件在插件的config.js，也可以自定义config js文件。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
*/
CKEDITOR.editorConfig = function( config ) {
// 语言
config.language = 'zh-cn';
// placeholder设置
config.editorplaceholder = '开始新的篇章......';
// 设置宽高
// config.width = 400;
config.height = 500;
// UI面板配色
config.uiColor = '#F7B42C';
// 编辑器样式：bootstrapck icy_orange kama minimalist moono moono-dark moonocolor office2013
// default：moono-lisa
config.skin = 'icy_orange';
// 添加字体
config.font_names='宋体/SimSun;新宋体/NSimSun;仿宋_GB2312/FangSong_GB2312;楷体_GB2312/KaiTi_GB2312;黑体/SimHei;微软雅黑/Microsoft YaHei;'+ config.font_names;
// 添加该行代码关闭easyimage、cloudservices插件即可
config.removePlugins = 'easyimage,cloudservices';
// 工具栏是否可以被收缩
config.toolbarCanCollapse = true;
// 工具栏的位置，可选：bottom
config.toolbarLocation = 'top';
// 工具栏默认是否展开
config.toolbarStartupExpanded = true;
// 取消 “拖拽以改变尺寸”功能
config.resize_enabled = false;
// 当提交包含有此编辑器的表单时，是否自动更新元素内的资料
config.autoUpdateElement = true;
// 编辑器的z-index值
config.baseFloatZIndex = 10000;
// 工具栏
config.toolbar = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools', 'undo'], items: [ 'NewPage', 'Save', 'Preview', 'Print', '-', 'Templates' , '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'clipboard', groups: [ 'clipboard'], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'] },
//{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'insert', groups: [ 'links', 'clipboard'], items: [ 'Link', 'Unlink', 'Anchor', '-', 'Image', 'Table', '-', 'HorizontalRule', 'Smiley', 'SpecialChar'] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'TextColor', 'BGColor', '-', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'others', items: [ 'Maximize', '-', 'ShowBlocks', 'Blockquote', 'CreateDiv', '-', 'Source'] }
];
//上传图片API
config.filebrowserImageUploadUrl = "/apis/uploadimg";
// 去掉图片预览框的文字
config.image_previewText = '';
// 隐藏“超链接”与“高级选项”只留上传和预览按钮
config.removeDialogTabs = 'image:advanced;image:Link;';
};
特别说明：
config.skin的皮肤需要自己进行下载，插件的skins目录下是没有。
有需要的同学可以邮件我：gaoming971366@163.com
学习参考
官网配置：https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
CKEditor系列教程（一）：CkEditor的安装与基础使用
CKEditor系列教程（二）：CkEditor的配置说明
CKEditor系列教程（三）：CkEditor图片上传到服务端
