共计 4383 个字符，预计需要花费 11 分钟才能阅读完成。
wangEditor v5
wangEditor v5 是国内一名优良的开发者开发的富文本编辑器，是一款十分好用的编辑器
官网：wangEditor v5
vue2-cli 应用 wangEditor v5
vue-cli 装置应用请跳官网：vue-cli
装置：
| yarn add @wangeditor/editor | |
| # 或者 npm install @wangeditor/editor --save | |
| yarn add @wangeditor/editor-for-vue | |
| # 或者 npm install @wangeditor/editor-for-vue --save |
应用
模板
| <template> | |
| <div style="border: 1px solid #ccc;"> | |
| <Toolbar | |
| style="border-bottom: 1px solid #ccc" | |
| :editor="editor" | |
| :defaultConfig="toolbarConfig" | |
| :mode="mode" | |
| /> | |
| <Editor | |
| style="height: 500px; overflow-y: hidden;" | |
| v-model="html" | |
| :defaultConfig="editorConfig" | |
| :mode="mode" | |
| @onCreated="onCreated" | |
| /> | |
| </div> | |
| </template> |
script
| <script> | |
| import {Editor, Toolbar} from '@wangeditor/editor-for-vue' | |
| export default {components: { Editor, Toolbar}, | |
| data() { | |
| return { | |
| editor: null, | |
| html: '<p>hello</p>', | |
| toolbarConfig: { }, | |
| editorConfig: {placeholder: '请输出内容...'}, | |
| mode: 'default', // or 'simple' | |
| } | |
| }, | |
| methods: {onCreated(editor) {this.editor = Object.seal(editor) // 肯定要用 Object.seal()，否则会报错}, | |
| }, | |
| mounted() { | |
| // 模仿 ajax 申请，异步渲染编辑器 | |
| setTimeout(() => {this.html = '<p> 模仿 Ajax 异步设置内容 HTML</p>'}, 1500) | |
| }, | |
| beforeDestroy() { | |
| const editor = this.editor | |
| if (editor == null) return | |
| editor.destroy() // 组件销毁时，及时销毁编辑器} | |
| } | |
| </script> |
css
<style src="@wangeditor/editor/dist/css/style.css"></style>
到这就能够失常应用了，接下来教大家怎么上传图片和视频
上传图片与视频
咱们先看一下文档对于上传图片和视频的阐明
上传图片和视频配置必须在 uploadImage 里进行配置
editorConfig.MENU_CONF['uploadImage'] = {// 上传图片的配置}
间接给大家看我怎么配置的，间接在 data 里的 editorConfig.MENU_CONF 进行配置
| editorConfig: { | |
| placeholder: '请输出内容...', | |
| // autoFocus: false, | |
| // 所有的菜单配置，都要在 MENU_CONF 属性下 | |
| MENU_CONF: { | |
| // 图片上传 | |
| uploadImage: { | |
| server: '/api/blade-resource/fileSystem/fileUpload', | |
| fieldName: 'file', | |
| // 单个文件的最大体积限度，默认为 2M | |
| maxFileSize: 10 * 1024 * 1024, // 10M | |
| // 最多可上传几个文件，默认为 100 | |
| maxNumberOfFiles: 10, | |
| // 抉择文件时的类型限度，默认为 ['image/*']。如不想限度，则设置为 [] | |
| allowedFileTypes: ['image/*'], | |
| // 自定义上传参数，例如传递验证的 token 等。参数会被增加到 formData 中，一起上传到服务端。meta: { | |
| // token: 'xxx', | |
| // otherKey: 'yyy' | |
| // file:'' | |
| }, | |
| // 将 meta 拼接到 url 参数中，默认 false | |
| metaWithUrl: false, | |
| // 自定义减少 http header | |
| headers: { | |
| // Accept: 'text/x-json', | |
| // otherKey: 'xxx' | |
| }, | |
| // 跨域是否传递 cookie，默认为 false | |
| withCredentials: true, | |
| // 超时工夫，默认为 10 秒 | |
| timeout: 10 * 1000, //10 秒 | |
| // 上传前 | |
| onBeforeUpload(files) { | |
| Message({ | |
| message: '图片正在上传中, 请急躁期待', | |
| duration: 0, | |
| customClass: 'uploadTip', | |
| iconClass: 'el-icon-loading', | |
| showClose: true | |
| }); | |
| return files; | |
| }, | |
| // 自定义插入图片 | |
| customInsert(res, insertFn) { | |
| // 因为自定义插入导致 onSuccess 与 onFailed 回调函数不起作用, 本人手动解决 | |
| // 先敞开期待的 Message | |
| Message.closeAll(); | |
| if (res.code === 200) { | |
| Message.success({message: `${res.data.originalName} 上传胜利 ` | |
| }); | |
| } else { | |
| Message.error({message: `${res.data.originalName} 上传失败，请从新尝试 ` | |
| }); | |
| } | |
| insertFn(res.data.link, res.data.name, res.data.link); | |
| }, | |
| // 单个文件上传胜利之后 | |
| onSuccess(file, res) {console.log(`${file.name} 上传胜利 `, res); | |
| }, | |
| // 单个文件上传失败 | |
| onFailed(file, res) {console.log(`${file.name} 上传失败 `, res); | |
| }, | |
| // 上传进度的回调函数 | |
| onProgress(progress) {console.log('progress', progress); | |
| // progress 是 0-100 的数字 | |
| }, | |
| // 上传谬误，或者触发 timeout 超时 | |
| onError(file, err, res) {console.log(`${file.name} 上传出错 `, err, res); | |
| } | |
| }, | |
| // 视频上传 | |
| uploadVideo: { | |
| fieldName: 'file', | |
| server: '/api/blade-resource/fileSystem/fileUpload', | |
| // 单个文件的最大体积限度，默认为 10M | |
| maxFileSize: 50 * 1024 * 1024, // 50M | |
| // 最多可上传几个文件，默认为 5 | |
| maxNumberOfFiles: 3, | |
| // 抉择文件时的类型限度，默认为 ['video/*']。如不想限度，则设置为 [] | |
| allowedFileTypes: ['video/*'], | |
| // 自定义上传参数，例如传递验证的 token 等。参数会被增加到 formData 中，一起上传到服务端。meta: { | |
| // token: 'xxx', | |
| // otherKey: 'yyy' | |
| }, | |
| // 将 meta 拼接到 url 参数中，默认 false | |
| metaWithUrl: false, | |
| // 自定义减少 http header | |
| headers: { | |
| // Accept: 'text/x-json', | |
| // otherKey: 'xxx' | |
| }, | |
| // 跨域是否传递 cookie，默认为 false | |
| withCredentials: true, | |
| // 超时工夫，默认为 30 秒 | |
| timeout: 1000 * 1000, // 1000 秒, | |
| // 上传之前触发 | |
| onBeforeUpload(file) { | |
| Message({ | |
| message: '视频正在上传中, 请急躁期待', | |
| duration: 0, | |
| customClass: 'uploadTip', | |
| iconClass: 'el-icon-loading', | |
| showClose: true | |
| }); | |
| return file; | |
| }, | |
| // 自定义插入视频 | |
| customInsert(res, insertFn) { | |
| // 因为自定义插入导致 onSuccess 与 onFailed 回调函数不起作用, 本人手动解决 | |
| // 先敞开期待的 Message | |
| Message.closeAll(); | |
| if (res.code === 200) { | |
| Message.success({message: `${res.data.originalName} 上传胜利 ` | |
| }); | |
| } else { | |
| Message.error({message: `${res.data.originalName} 上传失败，请从新尝试 ` | |
| }); | |
| } | |
| insertFn(res.data.link, res.data.link); | |
| }, | |
| // 上传进度的回调函数 | |
| onProgress(progress) {console.log(progress); | |
| // onProgress(progress) { // JS 语法 | |
| // progress 是 0-100 的数字 | |
| }, | |
| // // 单个文件上传胜利之后 | |
| // onSuccess(file, res) {// console.log(`${file.name} 上传胜利 `, res); | |
| // this.successMsg(file); | |
| // }, | |
| // // 单个文件上传失败 | |
| // onFailed(file, res) {// console.log(`${file.name} 上传失败 `, res); | |
| // this.errorMsg(file); | |
| // }, | |
| // 上传谬误，或者触发 timeout 超时 | |
| onError(file, err, res) {console.log(`${file.name} 上传出错 `, err, res); | |
| Notification.error({ | |
| title: '谬误', | |
| message: `${file.name} 上传失败，请从新尝试 ` | |
| }); | |
| } | |
| } | |
| } | |
| }, |
其中最要害的一步就是自定义插入，官网文档形容：
也就是说如果后端返回来的格局与富文本要求的格局无奈统一，能够应用自定义插入来插入图片和视频，因为这里有一个小问题，应用自定义插入会导致 onSuccess 与 onFailed 回调函数不起作用，我便本人在 customInsert 进行解决，这个问题我曾经反馈给作者，置信很快解决，各位小伙伴应用自定义插入的时候能够先看看回调函数是否起作用，如果有，能够把下面 customInsert 外面对于回调的解决去掉
后果
上传本地图片
复制网络照片间接粘贴编辑器里
上传本地视频
正文完
