wangEditor 5的使用以和使用的错误
其实官网https://www.wangeditor.com/v5/for-frame.html#demo也说的很详细,这不是记录一下,哈哈
如果是vue2项目,下面先讲解vue2项目如何用
-
npm install @wangeditor/editor --save
-
npm install @wangeditor/editor-for-vue --save
如果安装的时候,报这个错误,有两种方法:
① 降低npm版本,最好6的版本。(自行搜索卸载命令,以及安装指定版本命令)
②(我用的第二种方法)在 后面加上 --legacy-peer-deps ,完整命令如下
-
npm install @wangeditor/editor --save --legacy-peer-deps
-
npm install @wangeditor/editor-for-vue --save --legacy-peer-deps
接着准备工作已做完,开始引入富文本
先建一个vue组件,这是我建的,在demo页面引入 Editoritem ,单独拿出来可以复用
在html部分贴上下面的代码
-
<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标签里先引入vue,再引入插件,代码如下,我也引入axios是因为等会本地上传图片,要用到接口,引入的另一个js文件,是我封装的oss上传的方法
-
import Vue from 'vue'
-
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
-
import axios from "axios";
-
import oss from "./ossjs_wangeditor";
引入插件里的组件记着注入,data里边定义了这些变量
代码贴出来,方便cv
-
components: {Editor, Toolbar},
-
data() {
-
return {
-
editor: null,
-
// html: '<p>hello</p>',
-
html: '',
-
toolbarConfig: {},
-
editorConfig: {placeholder: '请输入内容...'},
-
mode: 'default', // or 'simple'
-
}
-
},
下面先说一些基本配置,写完基本上富文本已经引过来,渲染出来了,这些代码官网上有,主要是我需要的本地上传图片,和本地上传视频两个方法,如果有需要可以继续往下看,如果不需要这两个,可以在工具栏中剔除这两个功能(如何剔除不需要的功能,在文章最后有讲解)
上传图片:(其实上传图片也可以走oss,但我们要求用自己的接口,代码如下)
-
editor.MENU_CONF['uploadImage'] = {
-
async customUpload(file, insertFn) {
-
const isJPG = file.type.split('/')[0] == 'image';
-
if (!isJPG) {
-
that.$message.warning("请上传图片");
-
return
-
}
-
let formData = new FormData();
-
formData.append("img", file);//这里说明一下,因为我们接口要求名字为img,你们接口要求什么可以填什么
-
const configs = {
-
// 上传请求头
-
headers: {
-
'authorization': localStorage.getItem('token'),
-
},
-
// 上传进度
-
onUploadProgress: progressEvent => {
-
let percent = (progressEvent.loaded / progressEvent.total * 100 | 0);
-
},
-
};
-
const res = await axios.post('此处为url', formData, configs);
-
const {data, code} = res.data;
-
if (code == 200) {
-
const alt = (data.split("/")[data.split("/").length - 1]).substring(36);
-
insertFn(data, alt, data); // insertFn 参数1:路径; 参数2:alt值; 参数三:路径
-
} else {
-
that.$message.warning(res.data.msg);
-
}
-
}
-
};
customUpload(file, insertFn) {}这个方法比较关键,里边的第二个参数里直接放返回的生成后的链接
insertFn(链接)
上传视频,我走的oss,如果你走的是自己的接口,那和上传图片大差不大,需要修改的可能就是把editor.MENU_CONF['uploadImage']换成editor.MENU_CONF['uploadVideo'],还需要把formData.append("img", file);里的img换成video或者file,下面是代码
-
// 视频上传
-
editor.MENU_CONF['uploadVideo'] = {
-
async customUpload(file, insertFn) {
-
console.log(file, insertFn)
-
console.log(editor.MENU_CONF['uploadVideo'])
-
const isJPG = file.type.split('/')[0] == 'video';
-
// const isJPG1 = file.type == 'image/png';
-
if (!isJPG) {
-
that.$message.warning("请上传视频");
-
return
-
}
-
//此处为自行封装的oss上传方法,如果你走的接口,和上边上传图片差不多,注意的是insertFn里还是放返回的视频链接
-
const result = await oss.ossUploadFile({file: file})
-
// console.log(result,result.fileUrl)
-
insertFn(result.fileUrl)
-
}
-
}
走到这富文本已经好了,
下一篇将CDN如何引入以及上传视频上传图片,还有如何剔除不需要的工具
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfheak
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01