一．自定义并构建CKEditor 5
进入https://ckeditor.com/ckeditor-5/online-builder/，根据这五个步骤即可自定义构建CKEditor 5
二．CKEditor 5文件详解
- translations：打包后的语言包
- ckeditor.js、ckeditor.js.map：js配置，里面包含css样式，无论是编辑器页面还是显示内容页面都需要引入（之前显示内容时图片不自适应就是没有引入该文件）
- editor.js：进行功能配置的js文件，在编辑器页面引入
- index.html：富文本编辑器测试页面 最外面div必须加上id名（可自定义）
- ceshi.html：显示内容页面 最外面的div样式名必须为ck-content
三．editor.js配置说明
- 调用ClassicEditor.create()方法
toolbar:配置在导航栏显示的功能按钮以及位置
2.图片上传
3.自定义providers,给上传的视频链接设置相应的html，让其可以正常在富文本编辑器中显示
4.自定义字体，字体中文名在前，英文编码在后，用逗号隔开
5.将编辑器输出给到全局变量
6.获取内容数据以及将html转换为编辑器内容的API，无论是获取编辑器内容还是将html片段插入到编辑器中都需要对某些字段进行转换（获取编辑器内容后将oembed标签转换为video标签；给编辑器插入内容之前将video标签转换为oembed标签，同时还要清理上次插入的数据）
7.获取的内容数据中视频由浏览器无法识别的标签包裹，所以需要对其进行替换，使其在网页中正常显示。
8.初始化编辑器实例必须通过id获取标签，但是可以单独将配置对象赋值给config变量,初始化多个编辑器时将config传进去就可以实现修改一个配置影响多个编辑器实例。
9.字号支持数字大小
在配置中添加fontSize，最小12px
10.设置编辑器的宽和最小高度、最大高度、固定高度
11.配置字体颜色和字体背景颜色
12.设置图片放置的位置以及百分比
13.更加详细的配置说明：https://ckeditor.com/docs/ckeditor5/latest/features/image.html
配置代码
//配置选项
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,
26,
28,
30,
32,
34,
36
]
},
//设置字体颜色
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%, 10%)',
label: 'hsl(30, 100%, 10%)'
},
{
color: 'hsl(30, 100%, 20%)',
label: 'hsl(30, 100%, 20%)'
},
{
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%, 40%)',
label: 'hsl(90, 100%, 40%)'
},
{
color: 'hsl(90, 100%, 50%)',
label: 'hsl(90, 100%, 50%)'
},
{
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%)'
},
{
color: 'hsl(150, 100%, 70%)',
label: 'hsl(150, 100%, 70%)'
},
{
color: 'hsl(150, 100%, 80%)',
label: 'hsl(150, 100%, 80%)'
},
{
color: 'hsl(150, 100%, 90%)',
label: 'hsl(150, 100%, 90%)'
},
{
color: 'hsl(180, 100%, 10%)',
label: 'hsl(180, 100%, 10%)'
},
{
color: 'hsl(180, 100%, 20%)',
label: 'hsl(180, 100%, 20%)'
},
{
color: 'hsl(180, 100%, 30%)',
label: 'hsl(180, 100%, 30%)'
},
{
color: 'hsl(180, 100%, 40%)',
label: 'hsl(180, 100%, 40%)'
},
{
color: 'hsl(180, 100%, 50%)',
label: 'hsl(180, 100%, 50%)'
},
{
color: 'hsl(180, 100%, 60%)',
label: 'hsl(180, 100%, 60%)'
},
{
color: 'hsl(180, 100%, 70%)',
label: 'hsl(180, 100%, 70%)'
},
{
color: 'hsl(180, 100%, 80%)',
label: 'hsl(180, 100%, 80%)'
},
{
color: 'hsl(180, 100%, 90%)',
label: 'hsl(180, 100%, 90%)'
},
{
color: 'hsl(210, 100%, 10%)',
label: 'hsl(210, 100%, 10%)'
},
{
color: 'hsl(210, 100%, 20%)',
label: 'hsl(210, 100%, 20%)'
},
{
color: 'hsl(210, 100%, 30%)',
label: 'hsl(210, 100%, 30%)'
},
{
color: 'hsl(210, 100%, 40%)',
label: 'hsl(210, 100%, 40%)'
},
{
color: 'hsl(210, 100%, 50%)',
label: 'hsl(210, 100%, 50%)'
},
{
color: 'hsl(210, 100%, 60%)',
label: 'hsl(210, 100%, 60%)'
},
{
color: 'hsl(210, 100%, 70%)',
label: 'hsl(210, 100%, 70%)'
},
{
color: 'hsl(210, 100%, 80%)',
label: 'hsl(210, 100%, 80%)'
},
{
color: 'hsl(210, 100%, 90%)',
label: 'hsl(210, 100%, 90%)'
},
{
color: 'hsl(240, 100%, 10%)',
label: 'hsl(240, 100%, 10%)'
},
{
color: 'hsl(240, 100%, 20%)',
label: 'hsl(240, 100%, 20%)'
},
{
color: 'hsl(240, 100%, 30%)',
label: 'hsl(240, 100%, 30%)'
},
{
color: 'hsl(240, 100%, 40%)',
label: 'hsl(240, 100%, 40%)'
},
{
color: 'hsl(240, 100%, 50%)',
label: 'hsl(240, 100%, 50%)'
},
{
color: 'hsl(240, 100%, 60%)',
label: 'hsl(240, 100%, 60%)'
},
{
color: 'hsl(240, 100%, 70%)',
label: 'hsl(240, 100%, 70%)'
},
{
color: 'hsl(240, 100%, 80%)',
label: 'hsl(240, 100%, 80%)'
},
{
color: 'hsl(240, 100%, 90%)',
label: 'hsl(240, 100%, 90%)'
},
{
color: 'hsl(270, 100%, 10%)',
label: 'hsl(270, 100%, 10%)'
},
{
color: 'hsl(270, 100%, 20%)',
label: 'hsl(270, 100%, 20%)'
},
{
color: 'hsl(270, 100%, 30%)',
label: 'hsl(270, 100%, 30%)'
},
{
color: 'hsl(270, 100%, 40%)',
label: 'hsl(270, 100%, 40%)'
},
{
color: 'hsl(270, 100%, 50%)',
label: 'hsl(270, 100%, 50%)'
},
{
color: 'hsl(270, 100%, 60%)',
label: 'hsl(270, 100%, 60%)'
},
{
color: 'hsl(270, 100%, 70%)',
label: 'hsl(270, 100%, 70%)'
},
{
color: 'hsl(270, 100%, 80%)',
label: 'hsl(270, 100%, 80%)'
},
{
color: 'hsl(270, 100%, 90%)',
label: 'hsl(270, 100%, 90%)'
},
{
color: 'hsl(300, 100%, 10%)',
label: 'hsl(300, 100%, 10%)'
},
{
color: 'hsl(300, 100%, 20%)',
label: 'hsl(300, 100%, 20%)'
},
{
color: 'hsl(300, 100%, 30%)',
label: 'hsl(300, 100%, 30%)'
},
{
color: 'hsl(300, 100%, 40%)',
label: 'hsl(300, 100%, 40%)'
},
{
color: 'hsl(300, 100%, 50%)',
label: 'hsl(300, 100%, 50%)'
},
{
color: 'hsl(300, 100%, 60%)',
label: 'hsl(300, 100%, 60%)'
},
{
color: 'hsl(300, 100%, 70%)',
label: 'hsl(300, 100%, 70%)'
},
{
color: 'hsl(300, 100%, 80%)',
label: 'hsl(300, 100%, 80%)'
},
{
color: 'hsl(300, 100%, 90%)',
label: 'hsl(300, 100%, 90%)'
},
{
color: 'hsl(330, 100%, 10%)',
label: 'hsl(330, 100%, 10%)'
},
{
color: 'hsl(330, 100%, 20%)',
label: 'hsl(330, 100%, 20%)'
},
{
color: 'hsl(330, 100%, 30%)',
label: 'hsl(330, 100%, 30%)'
},
{
color: 'hsl(330, 100%, 40%)',
label: 'hsl(330, 100%, 40%)'
},
{
color: 'hsl(330, 100%, 50%)',
label: 'hsl(330, 100%, 50%)'
},
{
color: 'hsl(330, 100%, 60%)',
label: 'hsl(330, 100%, 60%)'
},
{
color: 'hsl(330, 100%, 70%)',
label: 'hsl(330, 100%, 70%)'
},
{
color: 'hsl(330, 100%, 80%)',
label: 'hsl(330, 100%, 80%)'
},
{
color: 'hsl(330, 100%, 90%)',
label: 'hsl(330, 100%, 90%)'
},
],
//列
columns: 9,
},
//设置字体背景颜色
fontBackgroundColor: {
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%, 10%)',
label: 'hsl(30, 100%, 10%)'
},
{
color: 'hsl(30, 100%, 20%)',
label: 'hsl(30, 100%, 20%)'
},
{
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%, 40%)',
label: 'hsl(90, 100%, 40%)'
},
{
color: 'hsl(90, 100%, 50%)',
label: 'hsl(90, 100%, 50%)'
},
{
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%)'
},
{
color: 'hsl(150, 100%, 70%)',
label: 'hsl(150, 100%, 70%)'
},
{
color: 'hsl(150, 100%, 80%)',
label: 'hsl(150, 100%, 80%)'
},
{
color: 'hsl(150, 100%, 90%)',
label: 'hsl(150, 100%, 90%)'
},
{
color: 'hsl(180, 100%, 10%)',
label: 'hsl(180, 100%, 10%)'
},
{
color: 'hsl(180, 100%, 20%)',
label: 'hsl(180, 100%, 20%)'
},
{
color: 'hsl(180, 100%, 30%)',
label: 'hsl(180, 100%, 30%)'
},
{
color: 'hsl(180, 100%, 40%)',
label: 'hsl(180, 100%, 40%)'
},
{
color: 'hsl(180, 100%, 50%)',
label: 'hsl(180, 100%, 50%)'
},
{
color: 'hsl(180, 100%, 60%)',
label: 'hsl(180, 100%, 60%)'
},
{
color: 'hsl(180, 100%, 70%)',
label: 'hsl(180, 100%, 70%)'
},
{
color: 'hsl(180, 100%, 80%)',
label: 'hsl(180, 100%, 80%)'
},
{
color: 'hsl(180, 100%, 90%)',
label: 'hsl(180, 100%, 90%)'
},
{
color: 'hsl(210, 100%, 10%)',
label: 'hsl(210, 100%, 10%)'
},
{
color: 'hsl(210, 100%, 20%)',
label: 'hsl(210, 100%, 20%)'
},
{
color: 'hsl(210, 100%, 30%)',
label: 'hsl(210, 100%, 30%)'
},
{
color: 'hsl(210, 100%, 40%)',
label: 'hsl(210, 100%, 40%)'
},
{
color: 'hsl(210, 100%, 50%)',
label: 'hsl(210, 100%, 50%)'
},
{
color: 'hsl(210, 100%, 60%)',
label: 'hsl(210, 100%, 60%)'
},
{
color: 'hsl(210, 100%, 70%)',
label: 'hsl(210, 100%, 70%)'
},
{
color: 'hsl(210, 100%, 80%)',
label: 'hsl(210, 100%, 80%)'
},
{
color: 'hsl(210, 100%, 90%)',
label: 'hsl(210, 100%, 90%)'
},
{
color: 'hsl(240, 100%, 10%)',
label: 'hsl(240, 100%, 10%)'
},
{
color: 'hsl(240, 100%, 20%)',
label: 'hsl(240, 100%, 20%)'
},
{
color: 'hsl(240, 100%, 30%)',
label: 'hsl(240, 100%, 30%)'
},
{
color: 'hsl(240, 100%, 40%)',
label: 'hsl(240, 100%, 40%)'
},
{
color: 'hsl(240, 100%, 50%)',
label: 'hsl(240, 100%, 50%)'
},
{
color: 'hsl(240, 100%, 60%)',
label: 'hsl(240, 100%, 60%)'
},
{
color: 'hsl(240, 100%, 70%)',
label: 'hsl(240, 100%, 70%)'
},
{
color: 'hsl(240, 100%, 80%)',
label: 'hsl(240, 100%, 80%)'
},
{
color: 'hsl(240, 100%, 90%)',
label: 'hsl(240, 100%, 90%)'
},
{
color: 'hsl(270, 100%, 10%)',
label: 'hsl(270, 100%, 10%)'
},
{
color: 'hsl(270, 100%, 20%)',
label: 'hsl(270, 100%, 20%)'
},
{
color: 'hsl(270, 100%, 30%)',
label: 'hsl(270, 100%, 30%)'
},
{
color: 'hsl(270, 100%, 40%)',
label: 'hsl(270, 100%, 40%)'
},
{
color: 'hsl(270, 100%, 50%)',
label: 'hsl(270, 100%, 50%)'
},
{
color: 'hsl(270, 100%, 60%)',
label: 'hsl(270, 100%, 60%)'
},
{
color: 'hsl(270, 100%, 70%)',
label: 'hsl(270, 100%, 70%)'
},
{
color: 'hsl(270, 100%, 80%)',
label: 'hsl(270, 100%, 80%)'
},
{
color: 'hsl(270, 100%, 90%)',
label: 'hsl(270, 100%, 90%)'
},
{
color: 'hsl(300, 100%, 10%)',
label: 'hsl(300, 100%, 10%)'
},
{
color: 'hsl(300, 100%, 20%)',
label: 'hsl(300, 100%, 20%)'
},
{
color: 'hsl(300, 100%, 30%)',
label: 'hsl(300, 100%, 30%)'
},
{
color: 'hsl(300, 100%, 40%)',
label: 'hsl(300, 100%, 40%)'
},
{
color: 'hsl(300, 100%, 50%)',
label: 'hsl(300, 100%, 50%)'
},
{
color: 'hsl(300, 100%, 60%)',
label: 'hsl(300, 100%, 60%)'
},
{
color: 'hsl(300, 100%, 70%)',
label: 'hsl(300, 100%, 70%)'
},
{
color: 'hsl(300, 100%, 80%)',
label: 'hsl(300, 100%, 80%)'
},
{
color: 'hsl(300, 100%, 90%)',
label: 'hsl(300, 100%, 90%)'
},
{
color: 'hsl(330, 100%, 10%)',
label: 'hsl(330, 100%, 10%)'
},
{
color: 'hsl(330, 100%, 20%)',
label: 'hsl(330, 100%, 20%)'
},
{
color: 'hsl(330, 100%, 30%)',
label: 'hsl(330, 100%, 30%)'
},
{
color: 'hsl(330, 100%, 40%)',
label: 'hsl(330, 100%, 40%)'
},
{
color: 'hsl(330, 100%, 50%)',
label: 'hsl(330, 100%, 50%)'
},
{
color: 'hsl(330, 100%, 60%)',
label: 'hsl(330, 100%, 60%)'
},
{
color: 'hsl(330, 100%, 70%)',
label: 'hsl(330, 100%, 70%)'
},
{
color: 'hsl(330, 100%, 80%)',
label: 'hsl(330, 100%, 80%)'
},
{
color: 'hsl(330, 100%, 90%)',
label: 'hsl(330, 100%, 90%)'
},
],
columns: 9,
},
language: 'zh-cn',
//设置图片位置以及大小
image: {
styles: [
'alignLeft', 'alignCenter', 'alignRight'
],
resizeOptions: [
{
name: 'imageResize:original',
label: '原版',
value: null
},
{
name: 'imageResize:50',
label: '50%',
value: '50'
},
{
name: 'imageResize:75',
label: '75%',
value: '75'
}
],
toolbar: [
'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
'|',
'imageResize',
'|',
'imageTextAlternative'
]
},
//表格配置
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
//访问许可证密钥
licenseKey: '',
//图片上传
ckfinder: {
uploadUrl: 'http://192.168.31.123:2000/api/Home/UploadImg'
},
//自定义providers,给上传的视频链接设置相应的html，让其可以正常在富文本编辑器中显示
mediaEmbed: {
providers: [
{
name: 'myprovider',
url: [
/^lizzy.*\.com.*\/media\/(\w+)/,
/^www\.lizzy.*/,
/^.*/
],
html: match => {
//获取媒体url
const input = match['input'];
return (
'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +
'<video controls="controls" autoplay name="media" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;">'+
`<source src="${input}" type="video/mp4">`+
'</video>'+
'</div>'
);
}
}
]
},
//自定义字体
fontFamily: {
options: [
'default',
'Blackoak Std',
'宋体,SimSun',
'新宋体,NSimSun',
'黑体,SimHei',
'微软雅黑,Microsoft YaHei',
'楷体_GB2312,KaiTi_GB2312',
'隶书,LiSu',
'幼园,YouYuan',
'华文细黑,STXihei',
'细明体,MingLiU',
'新细明体,PMingLiU'
]
},
}
//初始化编辑器实例1
ClassicEditor
.create( document.querySelector( '#editor' ), config)
.then( editor => {
window.editor = editor;
} )
.catch( error => {
} );
//初始化编辑器实例2
ClassicEditor
.create( document.querySelector( '#editor2' ), config)
.then( editor => {
window.editor2 = editor;
} )
.catch( error => {
} );
window.onload = function(){
document.getElementById("btn").onclick = function(){
//获取内容数据，以及给获取的内容数据中的oembed替换成video
window.str = window.editor.getData().replace(/oembed url/g,'video controls src').replace(/oembed/g,'video')
console.log(window.str);
}
//给编辑器插入内容
document.getElementById("btn2").onclick = function(){
// //初始化编辑器中的数据;
window.editor.setData('')
//对插入的内容进行转换,将video标签转换为oembed标签
var newContent = window.str.replace(/<video controls src=/g,'<oembed url=').replace(/<\/\video>/g,'<\/\oembed>')
//将数据转换为文档片段
var viewFragment = window.editor.data.processor.toView( newContent );
//对转换的数据进行包裹
var modelFragment = window.editor.data.toModel( viewFragment );
//插入到编辑器中
window.editor.model.insertContent( modelFragment );
}
document.getElementById("btn3").onclick = function(){
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
