安装
npm install @wangeditor/editor @wangeditor/editor-for-vue @wangeditor/plugin-formula -S
npm install jquery
封装组件
<template>
<div>
<div style="border: 1px solid #ccc; margin-top: 10px">
<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";
export default {
name: "WangEditor",
components: {Editor, Toolbar},
props: {
html: {
type: String,
default: ""
}
},
data() {
return {
editor: null,
toolbarConfig: {
excludeKeys: [
"group-image",
"group-video",
],
},
editorConfig: {
placeholder: "",
MENU_CONF: {},
},
};
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor);
},
onChange(editor) {
let content = editor.getHtml();
this.$emit("receiveContent", content);
},
getEditorText() {
const editor = this.editor;
if (editor == null) return;
console.log(editor.getText());
},
printEditorHtml() {
const editor = this.editor;
if (editor == null) return;
console.log(editor.getHtml());
},
},
mounted() {
setTimeout(() => {
}, 1500);
},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy();
},
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
使用组件
<wang-editor :html="data.content" @receiveContent="receiveContent"></wang-editor>
//接收内容
receiveContent(content) {
this.data.content = content;
}