vue3 + ts以及ckEditor5 富文本编辑器 工具栏 以及正文内容的编辑问题小结！

注意：使用CKEditor版本为js版本的CKEditor 4.8.0，参考自CKEditor官方API：CKEditor Documentation Website

哈哈哈哈 ，刚看代码没有注意到，后来分到这个任务才看到是这样的写法。任务是工具栏添加，给字体设置颜色以及背景色字体。

改之前的页面如图所示：

 咱们看下改完之后的效果吧：

  ckEditor5 自己有一个目录，然后每次编辑完之后打包，再自己本地项目再从新下一边就好了。这个要格外注意下！

在这个目录下，配置一些工具栏的选项

 ckeditor.js  文件：

Editor.defaultConfig = {
	toolbar: {
		items: [
			'heading',
			'|',
			'fontSize',
			'fontColor',
			// 'fontBackgroundColor',
			// 'fontFamily',
			'bold',
			'link',
			'|',
			'alignment',
			'outdent',
			'indent',
			'|',
			'imageInsert',
			'mediaEmbed',
			'|',
			'sourceEditing',
			'|',
			'undo',
			'redo'
		]
	},
	language: 'zh-cn',
	image: {
		toolbar: [
			'imageTextAlternative',
			'imageStyle:inline',
			'imageStyle:block',
			'imageStyle:side',
			'linkImage'
		]
	},
	table: {
		contentToolbar: [
			'tableColumn',
			'tableRow',
			'mergeTableCells'
		]
	}
};

编辑完之后打包一下：

注意：这里一定要再富文本编辑器自己的目录下打包，万不可再整个大项目下打包：

npm run  build

然后再自己项目里面，配置一下选项就可以了，代码如下：

rich_text.vue 文件：

  editorConfig:{
        upload:{maxSize:100 * 100 * 1024 },
        fontSize: {
          options: [14,15,16,17,18, 19,20, 21,24,48 ]
        },
        fontColor:  [{color: '#E64C4C', label: 'Red'},
        ],
        // fontBackgroundColor: {columns: 6},
        indentBlock: { offset: 40, unit: 'px'},
        mediaEmbed: {
          providers: [{
            name: 'myprovider',
            url: /^.*/,
            html: (match:any) => {
              const input = match['input'];
              return (
                '
' +
                 `'
                    +'
'
              );
            },}]
        }
      },
    });

 配置完以后，下载一下刚配置好的ckeditor项目即可：

npm  install

最后从新启动项目就可以看到效果啦！哈哈哈 第一次记录，自己分配到的任务，有些生疏，会越来越好的。