基本
<template>
<div>
<Toolbar class="editor-toolbar" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor
class="editor-container"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
@onDestroyed="onDestroyed"
@onMaxLength="onMaxLength"
@onFocus="onFocus"
@onBlur="onBlur"
@customAlert="customAlert"
@customPaste="customPaste"
/>
</div>
</template>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.editor-toolbar {
border-bottom: 1px solid #e8e8e8;
position: relative;
.exportBtn{
position: absolute;
bottom: 0;
right: 0;
}
}
.editor-container {
}
</style>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import FileSaver from "file-saver";
import htmlDocx from "html-docx-js/dist/html-docx";
export default Vue.extend({
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: "<p>hello</p>",
toolbarConfig: {},
editorConfig: { placeholder: "请输入内容...", scroll: true },
mode: "default", // or 'simple'
};
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错
},
onChange(editor) {
console.log("onChange", editor.children);
console.log(this.html);
},
onDestroyed(editor) {
console.log("onDestroyed", editor);
},
onMaxLength(editor) {
console.log("onMaxLength", editor);
},
onFocus(editor) {
console.log("onFocus", editor);
},
onBlur(editor) {
console.log("onBlur", editor);
},
customAlert(info, type) {
window.alert(`customAlert in Vue demo\n${type}:\n${info}`);
},
customPaste(editor, event, callback) {
console.log("ClipboardEvent 粘贴事件对象", event);
// const html = event.clipboardData.getData('text/html'); // 获取粘贴的 html
// const text = event.clipboardData.getData('text/plain'); // 获取粘贴的纯文本
// const rtf = event.clipboardData.getData('text/rtf'); // 获取 rtf 数据(如从 word wsp 复制粘贴)
// // 自定义插入内容
// editor.insertText(text);
// // 返回 false ,阻止默认粘贴行为
// event.preventDefault();
// callback(false); // 返回值(注意,vue 事件的返回值,不能用 return)
// 返回 true ,继续默认的粘贴行为
callback(true);
},
// 导出word文档
exportWord() {
const converted = htmlDocx.asBlob(this.html);
FileSaver.saveAs(converted, "模块汇总表.docx");
},
},
mounted() {
// 模拟 ajax 请求,异步渲染编辑器
setTimeout(() => {
this.html =
'<h1 style="text-align: center;">hello</h1>';
}, 1500);
},
beforeDestroy() {
const { editor } = this;
if (editor == null) return;
editor.destroy(); // 组件销毁时,及时销毁编辑器
},
});
</script>
上传图片
editorConfig: {
placeholder: '请输入内容...',
// 所有的菜单配置,都要在 MENU_CONF 属性下
MENU_CONF: {
// 配置上传图片
uploadImage: {
customUpload: this.FileUploadImage,
},
},
},
FileUploadImage(file, insertFn) {
// 通过FormData将文件转成二进制数据
const formData = new FormData();
// 将文件转二进制 file 即选中的文件
formData.append('uploadFile', file);
const paramsImg = {
query: '',
data: formData,
};
//上传图片的接口
uploadImage(paramsImg).then((res) => {
if (res.code === '00000') {
// 图片的完整地址,可以直接在浏览器访问的
const src = res.data.src;
insertFn(src, file.name, '');
}
});
},
蒙版 mask
<div class="mask" :style="{ display: modalShow ? 'block' : 'none' }" />
<Toolbar
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
ref="toolbar"
/>
<Editor
class="editor-container"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
@onDestroyed="onDestroyed"
@onMaxLength="onMaxLength"
@onFocus="onFocus"
@onBlur="onBlur"
@customAlert="customAlert"
@customPaste="customPaste"
/>
data() {
return {
modalShow: false,
toolbarConfig: { modalAppendToBody: true }, // 将菜单弹出的 modal 添加到 body 下,可以不设
};
},
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错
// 监听所有监控弹出框
this.editor.on('modalOrPanelShow', (modalOrPanel) => {
// 因为下拉框也算弹出,所以要只对modal做遮罩,需要处理
if (modalOrPanel.type !== 'modal') return;
this.modalShow = true;
});
this.editor.on('modalOrPanelHide', () => {
// 隐藏蒙层
this.modalShow = false;
});
},
.w-e-modal {
position: absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
z-index: 9999;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
z-index: 999;
}
参考: