1.0.4 • Published 2 years ago
@leodigital/ckeditor5 v1.0.4
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;