CKEditor 5 编辑器扩展

1.扩展CKEditor5支持本地视频文件上传功能，兼容vue，react

2.扩展了Emoji表情插件

环境

node v14+

如何继续扩展

1.将开发的插件放到 src/plugins 中

2.npm install 安装依赖

3.npm run build 重新编译CKEditor5

测试方法

1.启动测试接口，进入 testapi 文件夹，npm install 安装依赖，npm start 启动接口服务

2.进入 sample 文件夹，运行 index.html

CKEditor 5 配置

以下不同框架环境config采用以下配置,全开经典,支持自由配置

const CONFIG= 
{
	imageUpload: (file) => {
		const formData = new FormData();
		return new Promise((resolve, reject) => {
			formData.append("file", file);
			axios.post("http://127.0.0.1:8360/api/file/upload", formData).then(res => {
				resolve({url: res.data.url})
			})
		})
	},
	videoUpload: (file) => {
		const formData = new FormData();
		return new Promise((resolve, reject) => {
			formData.append("file", file);
			axios.post("http://127.0.0.1:8360/api/file/upload", formData).then(res => {
				resolve({url: res.data.url})
			})
		})
	},
	mediaEmbed: {
		extraProviders: [
			{
				name: 'leo',
				url: [
					/(.*?)/,
				],
				html: match => {
					const src = match.input;
					return (
						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;pointer-events: auto;">' +
						'<video controls style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" src="' + src + '">' +
						'</video>' +
						'</div>'
					);
				}
			},
		]
	},
	licenseKey: '',
	toolbar: {
		items: [
			'heading',
			'|',
			'bold',
			'italic',
			'underline',
			'fontBackgroundColor',
			'fontColor',
			'fontSize',
			'fontFamily',
			'link',
			'insertTable',
			'imageUpload',
			'mediaEmbed',
			'|',
			'indent',
			'outdent',
			'alignment',
			'|',
			'blockQuote',
			'code',
			'codeBlock',
			'highlight',
			'horizontalLine',
			'numberedList',
			'bulletedList',
			'removeFormat',
			'specialCharacters',
			'emoji',
			'restrictedEditingException',
			'strikethrough',
			'subscript',
			'superscript',
			'todoList',
			'undo',
			'redo'
		]
	},
	language: 'zh-cn',
	image: {
		toolbar: [
			'imageTextAlternative',
			'imageStyle:inline',
			'imageStyle:block',
			'imageStyle:side',
			'linkImage'
		]
	},
	table: {
		contentToolbar: [
			'tableColumn',
			'tableRow',
			'mergeTableCells',
			'tableCellProperties',
			'tableProperties'
		]
	}
}

vue

步骤一装包

npm install --save @ckeditor/ckeditor5-vue2 @leodigital/ckeditor5

步骤二导包

main.js

import Vue from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue2'
// 再main.js导入import
Vue.use(CKEditor)

步骤三用包

<template>
	<ckeditor id="editor" :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>
<script>
const CONFIG = {
	// 这里放上面的配置
} 

import ClassicEditor from '@leodigital/ckeditor5'
import axios from 'axios'

// 扩展config中的方法
CONFIG.imageUpload = CONFIG.videoUpload = (file) => {
    const config = {
      	headers: {
        	'Content-Type': 'mutipart/form-data;charset=UTF-8'
      	}
    }
    const formData = new FormData()
    formData.append('file', file)
    return new Promise((resolve) => {
		// 使用自己的上传接口
    	axios.post('/api/file/upload', formData, config).then(res => {
        	resolve({url: res.data.url})
      	})
    })
}

export default {
  name: 'test',
  methods: {},
  data () {
    return {
      editor: ClassicEditor,
      editorData: '<p>Content of the editor.</p>',
      editorConfig: CONFIG
    }
  }
}
</script>

react

步骤一装包

npm install --save @ckeditor/ckeditor5-react @leodigital/ckeditor5

步骤二用包

Hook方式

import axios from 'axios';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@leodigital/ckeditor5';

const CONFIG = {
    // 这里放上面的配置
} 

// 扩展config中的方法
CONFIG.imageUpload = CONFIG.videoUpload = (file) => {
    const config = {
          headers: {
            'Content-Type': 'mutipart/form-data;charset=UTF-8'
          }
    }
    const formData = new FormData()
    formData.append('file', file)
    return new Promise((resolve) => {
        // 使用自己的上传接口
        axios.post('/api/file/upload', formData, config).then(res => {
            resolve({url: res.data.url})
          })
    })
}

const Ck = () => {
    return (
        <>
            <CKEditor
                editor={ClassicEditor}
                data="<p>Content of the editor.</p>"
                config={CONFIG}
            />
        </>
    )
}

export default Ck

Class方式

import { Component } from 'react';
import axios from 'axios';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@leodigital/ckeditor5';

const CONFIG = {
    // 这里放上面的配置
}

// 扩展config中的方法
CONFIG.imageUpload = CONFIG.videoUpload = (file) => {
    const config = {
          headers: {
            'Content-Type': 'mutipart/form-data;charset=UTF-8'
          }
    }
    const formData = new FormData()
    formData.append('file', file)
    return new Promise((resolve) => {
        // 使用自己的上传接口
        axios.post('/api/file/upload', formData, config).then(res => {
            resolve({url: res.data.url})
          })
    })
}

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ClassicEditor}
                    data="<p>Hello from CKEditor 5!</p>"
                    config={CONFIG}
                />
            </div>
        );
    }
}

export default App;