<template>
<div>
<div style="border: 1px solid #ccc; width: 500px">
<!-- 工具栏 -->
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
<!-- 编辑器 -->
<Editor style="height: 400px; overflow-y: hidden" :defaultConfig="editorConfig" v-model="html" @onChange="onChange" @onCreated="onCreated" />
</div>
</div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import Cookie from 'js-cookie';
export default {
name: 'MyEditor',
components: { Editor, Toolbar },
props: {
destDir: {
type: String,
},
},
data() {
return {
editor: null,
html: '',
toolbarConfig: {
// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
// excludeKeys: [ /* 隐藏哪些菜单 */ ],
},
editorConfig: {
placeholder: '请输入内容...',
// autoFocus: false,
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {},
},
};
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
console.log('Created');
},
onChange(editor) {
// console.log('onChange', editor.getHtml()); // onChange 时获取编辑器最新内容
},
loadHtml(html) {
this.html = html;
},
insertTextHandler(html) {
const editor = this.editor;
if (editor == null) return;
console.log(html);
editor.insertText(html);
},
printEditorHtml() {
const editor = this.editor;
if (editor == null) return;
console.log(editor.getHtml());
},
disableHandler() {
const editor = this.editor;
if (editor == null) return;
editor.disable();
},
// 自定义校验图片
customCheckImageFn(src, alt, url) {
if (!src) {
return;
}
if (src.indexOf('http') !== 0) {
return '图片网址必须以 http/https 开头';
}
return true;
// 返回值有三种选择：
// 1. 返回 true ，说明检查通过，编辑器将正常插入图片
// 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
},
// 转换图片链接
customParseImageSrc(src) {
// JS 语法
if (src.indexOf('http') !== 0) {
return `${this.pictureUrl}${src}`;
}
return src;
},
},
created() {
let that = this;
this.editorConfig.MENU_CONF['uploadImage'] = {
server: process.env.VUE_APP_API_MANAGE + '/uploadFileController/editUpload.do',
fieldName: 'file',
// 继续写其他配置...
meta: {
destDir: that.destDir,
},
headers: {
adminToken: Cookie.get('adminToken'),
},
onSuccess(file, res) {
// JS 语法
console.log(`${file.name} 上传成功`, res);
},
// customInsert(res: any, insertFn: InsertFnType) {
// TS 语法
customInsert(res, insertFn) {
// JS 语法
// res 即服务端的返回结果
// 从 res 中找到 url alt href ，然后插入图片
insertFn(process.env.VUE_APP_SERVER + 'imageServer' + res.data.url, res.data.alt, res.data.href);
},
};
// 插入图片
this.editorConfig.MENU_CONF['insertImage'] = {
onInsertedImage(imageNode) {
// JS 语法
if (imageNode == null) return;
const { src, alt, url, href } = imageNode;
console.log('inserted image', src, alt, url, href);
},
checkImage: that.customCheckImageFn, // 也支持 async 函数
parseImageSrc: that.customParseImageSrc, // 也支持 async 函数
};
},
mounted() {
// // 模拟 ajax 请求，异步渲染编辑器
// setTimeout(() => {
// this.html = '<p>Ajax 异步设置内容 HTML</p>';
// }, 1500);
},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
},
};
</script>
<style>
.w-e-full-screen-container {
bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: fixed;
right: 0 !important;
top: 0 !important;
width: 100% !important;
z-index: 99999;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
vue富文本（5版本）组件的相关教程结束。
