当前位置:网站首页>CKEditor富文本编辑器工具栏自定义笔记
CKEditor富文本编辑器工具栏自定义笔记
2022-08-11 05:25:00 【Three Big Stones】
1、页面引入js文件
<script src="~/Content/scripts/plugins/ckeditor/ckeditor.js"></script>
2、初始化富文本编辑器
CKEDITOR.replace("文本域id")
默认初始化的文本编辑器,工具栏如下所示:
默认配置代码:
config.toolbar = [ { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'styles', items: [ 'Styles', 'Format' ] }, { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] }, { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] }, { name: 'tools', items: [ 'Maximize' ] }, { name: 'others', items: [ '-' ] } ];
3、自定义工具栏配置
CKEDITOR.replace("Remark", {
toolbar: [
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat'] },
{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
{ name: 'tools', items: ['Maximize'] }]
});
效果如下:
4、工具栏的所有配置项
config.toolbar = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format' ] }, { name: 'tools', items: [ 'Maximize' ] }, { name: 'others', items: [ '-' ] }, { name: 'about', items: [ 'About' ] } ];
边栏推荐
猜你喜欢
LiDAR Snowfall Simulation for Robust 3D Object Detection
LAGRANGIAN FLUID SIMULATION WITH CONTINUOUS CONVOLUTIONS
梅科尔工作室-Pr第一次培训笔记(安装及项目创建)
梅科尔工作室-HarmonyOS应用开发第三次培训
Wisdom construction site safety helmet identification system
CNN-based Point Cloud De-Noising
目标检测思维导图
Zhejiang University School of Software 2020 Guarantee Research Computer Real Question Practice
产品经理与演员有着天然的相似
微文案也能提升用户体验
随机推荐
Maykle Studio - HarmonyOS Application Development Third Training
【调试记录1】提高MC3172浮点运算能力,IQmath库的获取与导入使用教程
梅科尔工作室-DjangoWeb 应用框架+MySQL数据库第六次培训
Node-1.高性能服务器
梅科尔工作室-Pr第一次培训笔记(安装及项目创建)
从概念认识AI
Wisdom construction site safety helmet identification system
梅科尔工作室-DjangoWeb 应用框架+MySQL数据库第三次培训
关于安全帽识别系统,你需要知道的选择要点
Zhejiang University School of Software 2020 Guarantee Research Computer Real Question Practice
内核与用户空间通过字符设备通信
梅科尔工作室-HarmonyOS应用开发的第二次培训
目标检测前言
Diagnostic Log and Trace——DLT 离线日志存储
The selection points you need to know about the helmet identification system
Node-2.垃圾回收机制
C语言字节对齐,看这篇就够了
目标检测——Faster R-CNN 之 Fast R-CNN
AI智能图像识别的工作原理及行业应用
Maykel Studio - Django Web Application Framework + MySQL Database Second Training