wangeditor v5 在vue中的使用

wangeditor的使用

下载依赖  cnpm i @wangeditor/editor @wangeditor/editor-for-vue -D

基础使用

<div style="border: 1px solid #ccc;"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"/>
</div>

<script>import { Editor, Toolbar } from '@wangeditor/editor-for-vue'import "@wangeditor/editor/dist/css/style.css"export default {name: 'HomeView',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() ，否则会报错}},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器},components: {Editor, Toolbar}}
</script>

到此就成了一个最基础的富文本了

接下来就做一些配置上的工作

链接： https://www.wangeditor.com/v5/menu-config.html

配置链接

// 自定义校验链接
const customCheckLinkFn = (text, url) => {if (!url) {this.$message.warning("链接不能为空");return}if (url.indexOf('http') !== 0) {this.$message.warning("链接必须以 http/https 开头");return;}return true// 返回值有三种选择：// 1. 返回 true ，说明检查通过，编辑器将正常插入链接// 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
}// 自定义转换链接 url
const customParseLinkUrl = (url) => {if (url.indexOf('http') !== 0) {return `http://${url}`}return url}// 插入链接的校验insertLink: {checkLink: customCheckLinkFn, // 也支持 async 函数parseLinkUrl: customParseLinkUrl // 也支持 async 函数},// 修改链接的校验editLink: {checkLink: customCheckLinkFn, // 也支持 async 函数parseLinkUrl: customParseLinkUrl, // 也支持 async 函数},

配置图片的插入

// 自定义校验图片
const customCheckImageFn = (src, alt, url) => {if (!src) {this.$message.warning("图片网址不能为空");return}if (src.indexOf('http') !== 0) {this.$message.warning("图片地址必须以 http/https 开头");return '图片地址必须以 http/https 开头'}if(url.indexOf('http') !== 0) {this.$message.warning("图片链接必须以 http/https 开头");return '图片链接必须以 http/https 开头'}return true// 返回值有三种选择：// 1. 返回 true ，说明检查通过，编辑器将正常插入图片// 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
}// 转换图片链接
const customParseImageSrc = (src) => {if (src.indexOf('http') !== 0) {return `http://${src}`}return src
}// 插入网络图片的校验
insertImage: {//  插入图片之后的回调onInsertedImage(imageNode) {if (imageNode == null) returnconst { src, alt, url, href } = imageNodeconsole.log('inserted image', src, alt, url, href)},// 校验图片链接checkImage: customCheckImageFn, // 也支持 async 函数// 转换图片链接parseImageSrc: customParseImageSrc, // 也支持 async 函数
},// 编辑网络图片的校验
editImage: {// 更新图片之后的回调onUpdatedImage(imageNode = null) {if (imageNode == null) returnconst { src, alt, url } = imageNodeconsole.log('updated image', src, alt, url)},// 校验图片链接checkImage: customCheckImageFn, // 也支持 async 函数// 转换图片链接parseImageSrc: customParseImageSrc, // 也支持 async 函数
},

配置图片的上传

// 图片的上传
uploadImage: {async customUpload(file, insertFn) {let formData = new FormData();formData.append("file", file);const configs = {// 上传请求头headers:{'Content-Type': 'multipart/form-data'},// 上传进度onUploadProgress: progressEvent => {let percent = (progressEvent.loaded / progressEvent.total * 100 | 0);console.log(percent)}};const res = await that.$axios.post("/api/uploadFile", formData, configs);const { data, success } = res.data;if(success) {const alt = (data.split("/")[data.split("/").length - 1]).substring(36);insertFn(data, alt, data);  // insertFn 参数1：路径； 参数2：alt值； 参数三：路径}else{that.$message.warning(data);}}
},

配置视频的插入

 // 自定义校验视频
const customCheckVideoFn = (src) => {if (!src) {return}if (src.indexOf('http') !== 0) {this.$message.warning("视频地址必须以 http/https 开头");return '视频地址必须以 http/https 开头'}return true// 返回值有三种选择：// 1. 返回 true ，说明检查通过，编辑器将正常插入视频// 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
}// 自定义转换视频
const customParseVideoSrc = (src) => {if (src.includes('.bilibili.com')) {// 转换 bilibili url 为 iframe （仅作为示例，不保证代码正确和完整）const arr = location.pathname.split('/')const vid = arr[arr.length - 1]return `<iframe src="//player.bilibili.com/player.html?bvid=${vid}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>`}return src
}// 插入视频校验
insertVideo: {// 插入视频之后的回调onInsertedVideo(videoNode = null) {if (videoNode == null) returnconst { src } = videoNodeconsole.log('inserted video', src)},// 校验视频链接checkVideo: customCheckVideoFn, // 也支持 async 函数// 转换视频链接parseVideoSrc: customParseVideoSrc, // 也支持 async 函数
},

配置视频的上传

// 视频上传uploadVideo: {async customUpload(file, insertFn) {let formData = new FormData();formData.append("file", file);const configs = {// 上传请求头headers:{'Content-Type': 'multipart/form-data'},`在这里插入代码片`// 上传进度onUploadProgress: progressEvent => {let percent = (progressEvent.loaded / progressEvent.total * 100 | 0);console.log(percent)}};const res = await that.$axios.post("/api/uploadFile", formData, configs);const { data, success } = res.data;if(success) {insertFn(data);}else{that.$message.warning(data);}}}

完整代码

<template><div class="home"><div style="border: 1px solid #ccc;"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"@onChange="onChange"/></div><el-button type="primary" @click="result">结果</el-button></div>
</template><script>import { Editor, Toolbar } from '@wangeditor/editor-for-vue'import "@wangeditor/editor/dist/css/style.css"export default {name: 'HomeView',data() {// 自定义校验链接const customCheckLinkFn = (text, url) => {if (!url) {this.$message.warning("链接不能为空");return}if (url.indexOf('http') !== 0) {this.$message.warning("链接必须以 http/https 开头");return;}return true// 返回值有三种选择：// 1. 返回 true ，说明检查通过，编辑器将正常插入链接// 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息}// 自定义转换链接 urlconst customParseLinkUrl = (url) => {if (url.indexOf('http') !== 0) {return `http://${url}`}return url}// 自定义校验图片const customCheckImageFn = (src, alt, url) => {if (!src) {this.$message.warning("图片网址不能为空");return}if (src.indexOf('http') !== 0) {this.$message.warning("图片地址必须以 http/https 开头");return '图片地址必须以 http/https 开头'}if(url.indexOf('http') !== 0) {this.$message.warning("图片链接必须以 http/https 开头");return '图片链接必须以 http/https 开头'}return true// 返回值有三种选择：// 1. 返回 true ，说明检查通过，编辑器将正常插入图片// 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息}// 转换图片链接const customParseImageSrc = (src) => {if (src.indexOf('http') !== 0) {return `http://${src}`}return src}// 自定义校验视频const customCheckVideoFn = (src) => {if (!src) {return}if (src.indexOf('http') !== 0) {this.$message.warning("视频地址必须以 http/https 开头");return '视频地址必须以 http/https 开头'}return true// 返回值有三种选择：// 1. 返回 true ，说明检查通过，编辑器将正常插入视频// 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息}// 自定义转换视频const customParseVideoSrc = (src) => {if (src.includes('.bilibili.com')) {// 转换 bilibili url 为 iframe （仅作为示例，不保证代码正确和完整）const arr = location.pathname.split('/')const vid = arr[arr.length - 1]return `<iframe src="//player.bilibili.com/player.html?bvid=${vid}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>`}return src}const that = this;return{editor: null,html: '<p>hello</p>',toolbarConfig: { },editorConfig: {placeholder: '请输入内容...',MENU_CONF: {// 插入链接的校验insertLink: {checkLink: customCheckLinkFn, // 也支持 async 函数parseLinkUrl: customParseLinkUrl // 也支持 async 函数},// 修改链接的校验editLink: {checkLink: customCheckLinkFn, // 也支持 async 函数parseLinkUrl: customParseLinkUrl, // 也支持 async 函数},// 插入网络图片的校验insertImage: {//  插入图片之后的回调onInsertedImage(imageNode) {if (imageNode == null) returnconst { src, alt, url, href } = imageNodeconsole.log('inserted image', src, alt, url, href)},// 校验图片链接checkImage: customCheckImageFn, // 也支持 async 函数// 转换图片链接parseImageSrc: customParseImageSrc, // 也支持 async 函数},// 编辑网络图片的校验editImage: {// 更新图片之后的回调onUpdatedImage(imageNode = null) {if (imageNode == null) returnconst { src, alt, url } = imageNodeconsole.log('updated image', src, alt, url)},// 校验图片链接checkImage: customCheckImageFn, // 也支持 async 函数// 转换图片链接parseImageSrc: customParseImageSrc, // 也支持 async 函数},// 图片的上传uploadImage: {async customUpload(file, insertFn) {let formData = new FormData();formData.append("file", file);const configs = {// 上传请求头headers:{'Content-Type': 'multipart/form-data'},// 上传进度onUploadProgress: progressEvent => {let percent = (progressEvent.loaded / progressEvent.total * 100 | 0);console.log(percent)}};const res = await that.$axios.post("/api/uploadFile", formData, configs);const { data, success } = res.data;if(success) {const alt = (data.split("/")[data.split("/").length - 1]).substring(36);insertFn(data, alt, data);  // insertFn 参数1：路径； 参数2：alt值； 参数三：路径}else{that.$message.warning(data);}}},// 插入视频校验insertVideo: {// 插入视频之后的回调onInsertedVideo(videoNode = null) {if (videoNode == null) returnconst { src } = videoNodeconsole.log('inserted video', src)},// 校验视频链接checkVideo: customCheckVideoFn, // 也支持 async 函数// 转换视频链接parseVideoSrc: customParseVideoSrc, // 也支持 async 函数},// 视频上传uploadVideo: {async customUpload(file, insertFn) {let formData = new FormData();formData.append("file", file);const configs = {// 上传请求头headers:{'Content-Type': 'multipart/form-data'},// 上传进度onUploadProgress: progressEvent => {let percent = (progressEvent.loaded / progressEvent.total * 100 | 0);console.log(percent)}};const res = await that.$axios.post("/api/uploadFile", formData, configs);const { data, success } = res.data;if(success) {insertFn(data);}else{that.$message.warning(data);}}}}},mode: 'default', // or 'simple'}},methods: {onCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错},result() {console.log(this.html);},onChange(val) {console.log(val.getHtml())}},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器},mounted() {setTimeout(()=>{}, 1000);},components: {Editor, Toolbar}}
</script>

 注：使用视频插入的时候需要在index.html页面中加上 <meta name=referrer content=no-referrer>  标签

wangeditor v5 在vue中的使用相关推荐

vue-html5-editor接收数据,在vue中获取wangeditor的html和text的操作
目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wa ...
在vue中使用wangEditor上传视频
一.效果展示实现效果原本效果二.修改wangEditor源码添加插入视频panel 只修改Video.prototype._createPanel方法 // 原型 Video.prototyp ...
vue中wangeditor富文本框的使用方法
vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor .开始我用的是 vue-quill-editor,后来又换成了 wangeditor.为啥呢?因为 vu ...
15 行代码在 wangEditor v5 使用数学公式
前言 wangEditor v5 正式版发布在即,为了验证它的扩展性,我开发了几个常用的第三方插件.本文介绍一下 formula 插件的设计和使用. 插入数学公式要使用 LateX 语法,渲染公式需要 ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...

wangeditor v5 在vue中的使用

wangeditor的使用

接下来就做一些配置上的工作

链接： https://www.wangeditor.com/v5/menu-config.html

配置链接

配置图片的插入

配置图片的上传

配置视频的插入

配置视频的上传

完整代码

wangeditor v5 在vue中的使用相关推荐

最新文章

热门文章