ckeditor5的配置以及使⽤⽅法
⼀．⾃定义并构建CKEditor 5
⼆．CKEditor 5⽂件详解
1. translations：打包后的语⾔包
2. ckeditor.js、ckeditor.js.map：js配置，⾥⾯包含css样式，⽆论是编辑器页⾯还是显⽰内容页⾯都需要引⼊（之前显⽰内容时图⽚不⾃
适应就是没有引⼊该⽂件）
3. editor.js：进⾏功能配置的js⽂件，在编辑器页⾯引⼊
4. index.html：富⽂本编辑器测试页⾯最外⾯div必须加上id名（可⾃定义）
5. ceshi.html：显⽰内容页⾯最外⾯的div样式名必须为ck-content
三．editor.js配置说明
1. 调⽤⽅法
toolbar：配置在导航栏显⽰的功能按钮以及位置
2.图⽚上传
3.⾃定义providers，给上传的视频链接设置相应的html，让其可以正常在富⽂本编辑器中显⽰
4.⾃定义字体，字体中⽂名在前，英⽂编码在后，⽤逗号隔开
5.将编辑器输出给到全局变量
6.获取内容数据以及将html转换为编辑器内容的API，⽆论是获取编辑器内容还是将html⽚段插⼊到编辑器中都需要对某些字段进⾏转换（获取编辑器内容后将oembed标签转换为video标签；给编辑器插⼊内容之前将video标签转换为oembed标签，同时还要清理上次插⼊的数据）
7.获取的内容数据中视频由浏览器⽆法识别的标签包裹，所以需要对其进⾏替换，使其在⽹页中正常显⽰。
8.初始化编辑器实例必须通过id获取标签，但是可以单独将配置对象赋值给config变量，初始化多个编辑器时将config传进去就可以实现修改⼀个配置影响多个编辑器实例。
9.字号⽀持数字⼤⼩
10.设置编辑器的宽和最⼩⾼度、最⼤⾼度、固定⾼度
11.配置字体颜⾊和字体背景颜⾊
12.设置图⽚放置的位置以及百分⽐
配置代码
//配置选项
const config = {
//功能模块
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'underline',
'fontColor',
'fontBackgroundColor',
'fontSize',
'fontFamily',
'highlight',
'bulletedList',
'numberedList',
'|',
'indent',
'outdent',
'|',
'link',
'imageUpload',
'imageInsert',
'mediaEmbed',
'|',
'blockQuote',
'strikethrough',
'specialCharacters',
'superscript',
'subscript',
'insertTable',
'undo',
'redo',
'alignment'
],
shouldNotGroupWhenFull:true
},
//设置字体⼤⼩
fontSize: {
options: [
12,
14,
16,
18,
20,
22,
24,
36
html富文本框]
},
/
/设置字体颜⾊
fontColor: {
colors: [
{
color: 'hsl(0, 0%, 0%)',
label: 'hsl(0, 0%, 0%)'
},
{
color: 'hsl(0, 0%, 12.5%)', label: 'hsl(0, 0%, 12.5%)' },
{
color: 'hsl(0, 0%, 25%)', label: 'hsl(0, 0%, 25%)'
},
{
color: 'hsl(0, 0%, 37.5%)', label: 'hsl(0, 0%, 37.5%)' },
{
color: 'hsl(0, 0%, 50%)', label: 'hsl(0, 0%, 50%)'
},
{
color: 'hsl(0, 0%, 62.5%)', label: 'hsl(0, 0%, 62.5%)' },
{
color: 'hsl(0, 0%, 75%)', label: 'hsl(0, 0%, 75%)'
},
{
color: 'hsl(0, 0%, 87.5%)', label: 'hsl(0, 0%, 87.5%)' },
{
color: 'hsl(0, 0%, 100%)', label: 'hsl(0, 0%, 100%)' },
{
color: 'hsl(0, 100%, 10%)', label: 'hsl(0, 100%, 10%)' },
{
color: 'hsl(0, 100%, 20%)', label: 'hsl(0, 100%, 20%)' },
{
color: 'hsl(0, 100%, 30%)', label: 'hsl(0, 100%, 30%)' },
{
color: 'hsl(0, 100%, 40%)', label: 'hsl(0, 100%, 40%)' },
{
color: 'hsl(0, 100%, 50%)', label: 'hsl(0, 100%, 50%)' },
{
color: 'hsl(0, 100%, 60%)', label: 'hsl(0, 100%, 60%)' },
{
color: 'hsl(0, 100%, 70%)', label: 'hsl(0, 100%, 70%)' },
{
color: 'hsl(0, 100%, 80%)', label: 'hsl(0, 100%, 80%)' },
{
color: 'hsl(0, 100%, 90%)', label: 'hsl(0, 100%, 90%)' },
{
color: 'hsl(30, 100%, 30%)', label: 'hsl(30, 100%, 30%)' },
{
color: 'hsl(30, 100%, 40%)', label: 'hsl(30, 100%, 40%)' },
{
color: 'hsl(30, 100%, 50%)', label: 'hsl(30, 100%, 50%)' },
{
color: 'hsl(30, 100%, 60%)', label: 'hsl(30, 100%, 60%)' },
{
color: 'hsl(30, 100%, 70%)', label: 'hsl(30, 100%, 70%)' },
{
color: 'hsl(30, 100%, 80%)', label: 'hsl(30, 100%, 80%)' },
{
color: 'hsl(30, 100%, 90%)', label: 'hsl(30, 100%, 90%)' },
{
color: 'hsl(60, 100%, 10%)', label: 'hsl(60, 100%, 10%)' },
{
color: 'hsl(60, 100%, 20%)', label: 'hsl(60, 100%, 20%)' },
{
color: 'hsl(60, 100%, 30%)', label: 'hsl(60, 100%, 30%)' },
{
color: 'hsl(60, 100%, 40%)', label: 'hsl(60, 100%, 40%)' },
{
color: 'hsl(60, 100%, 50%)', label: 'hsl(60, 100%, 50%)' },
{
color: 'hsl(60, 100%, 60%)', label: 'hsl(60, 100%, 60%)' },
{
color: 'hsl(60, 100%, 70%)', label: 'hsl(60, 100%, 70%)' },
{
color: 'hsl(60, 100%, 80%)', label: 'hsl(60, 100%, 80%)' },
{
color: 'hsl(60, 100%, 90%)', label: 'hsl(60, 100%, 90%)' },
{
color: 'hsl(90, 100%, 10%)', label: 'hsl(90, 100%, 10%)' },
{
color: 'hsl(90, 100%, 20%)', label: 'hsl(90, 100%, 20%)' },
{
color: 'hsl(90, 100%, 30%)', label: 'hsl(90, 100%, 30%)' },
{
color: 'hsl(90, 100%, 60%)', label: 'hsl(90, 100%, 60%)' },
{
color: 'hsl(90, 100%, 70%)', label: 'hsl(90, 100%, 70%)' },
{
color: 'hsl(90, 100%, 80%)', label: 'hsl(90, 100%, 80%)' },
{
color: 'hsl(90, 100%, 90%)', label: 'hsl(90, 100%, 90%)' },
{
color: 'hsl(120, 100%, 10%)', label: 'hsl(120, 100%, 10%)' },
{
color: 'hsl(120, 100%, 20%)', label: 'hsl(120, 100%, 20%)' },
{
color: 'hsl(120, 100%, 30%)', label: 'hsl(120, 100%, 30%)' },
{
color: 'hsl(120, 100%, 40%)', label: 'hsl(120, 100%, 40%)' },
{
color: 'hsl(120, 100%, 50%)', label: 'hsl(120, 100%, 50%)' },
{
color: 'hsl(120, 100%, 60%)', label: 'hsl(120, 100%, 60%)' },
{
color: 'hsl(120, 100%, 70%)', label: 'hsl(120, 100%, 70%)' },
{
color: 'hsl(120, 100%, 80%)', label: 'hsl(120, 100%, 80%)' },
{
color: 'hsl(120, 100%, 90%)', label: 'hsl(120, 100%, 90%)' },
{
color: 'hsl(150, 100%, 10%)', label: 'hsl(150, 100%, 10%)' },
{
color: 'hsl(150, 100%, 20%)', label: 'hsl(150, 100%, 20%)' },
{
color: 'hsl(150, 100%, 30%)', label: 'hsl(150, 100%, 30%)' },
{
color: 'hsl(150, 100%, 40%)', label: 'hsl(150, 100%, 40%)' },
{
color: 'hsl(150, 100%, 50%)', label: 'hsl(150, 100%, 50%)' },
{
color: 'hsl(150, 100%, 60%)', label: 'hsl(150, 100%, 60%)' },
发表评论