WangEditor v5 官方文档
安装 editor
npm install @wangeditor/editor --save
安装 Vue2 组件(可选)
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>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default Vue.extend({
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>
记得引入 style (忘记加的话工具栏样式会有问题)
<style src="@wangeditor/editor/dist/css/style.css"></style>
或者
import '@wangeditor/editor/dist/css/style.css'
图片和视频上传(oss上传)
editor: null,
html: "<p>hello</p>",
toolbarConfig: {},
editorConfig: {
placeholder: "请输入内容...",
MENU_CONF: {
uploadImage: {
customUpload: this.uploadImg,
// server: "https://yimiaoyouxi.oss-cn-qingdao.aliyuncs.com/",
//自定义上-oss
// this.editor.initSelection();
customUpload: async (file, insertFn) => {
const resultUrl = await ossUpload(file, file.name);
// this.editor.initSelection();
insertFn(resultUrl, "图片", resultUrl);
// insertImg(resultUrl);
},
// 单个文件的最大体积限制,默认为 2M
maxFileSize: 6 * 1024 * 1024, // 6M
// 最多可上传几个文件,默认为 100
maxNumberOfFiles: 100,
// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
allowedFileTypes: ["image/*"],
// 自定义上传参数,例如传递验证的 token 等。
参数会被添加到 formData 中,一起上传到服务端。
meta: {
// key: "xxx",
// otherKey: "yyy"
},
// 将 meta 拼接到 url 参数中,默认 false
metaWithUrl: false
// 超时时间,默认为 10 秒
timeout: 10 * 1000 // 5 秒
},
uploadVideo: {
allowedFileTypes: ["video/*"],
customUpload: async (file, insertFn) => {
const resultUrl = await ossUpload(file, file.name);
insertFn(resultUrl);
}
}
}
},
mode: "default", // or 'simple'
import $http from '@/util/http.js'
const OSS = require("ali-oss");
const api = require('@/util/api.js')
//获取配置的方法
const getListData = async () => {
let info = await $http.get(api.getOssConfig)
return {
accessKeyId:.info.accessid,
accessKeySecret: info.accessKeySecret,
stsToken: info.securityToken,
}
};
//获取配置条件
const client = (data) => {
return new OSS({
region: "oss-cn-hangzhou",//这个根据自己项目去填写(地区)
accessKeyId: data.accessKeyId,//
accessKeySecret: data.accessKeySecret,
stsToken: data.stsToken,
bucket: "xxx", ,//这个根据自己项目去填写
});
};
//获取uuid随机数作为文件名称
const getFileNameUUID = () => {
function rx() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return `${+new Date()}_${rx()}${rx()}`;
};
//创建oss上传方法
async function ossUpload(file,module='image') {
//调用接口,获取配置
let configInfo = await getListData();
let fileType = file.type.split("/")[1]
//拼接文件名称(拼接你需要保存的目录路径,'avatar/'这是我的目录路径)
var date = new Date();
let fileNameUrl = `avatar/${await getFileNameUUID()}.${fileType}`;
let res = await client(configInfo).put(fileNameUrl, file);
return res.url;
}
export default ossUpload;
关于WangEditor全屏层级的问题
解决方案(修改文本编辑区域的z-index 堆叠层级)
.w-e-full-screen-container {
z-index: 1;
}