|
@@ -0,0 +1,55 @@
|
|
|
+<template>
|
|
|
+ <div id="editor">
|
|
|
+ <div style="border: 1px solid #ccc">
|
|
|
+ <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
|
|
|
+ <Editor class="editor" :value="text" @input="toInput" :defaultConfig="ec" :mode="mode" @onCreated="onCreated" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'editor',
|
|
|
+ props: {
|
|
|
+ text: { type: String },
|
|
|
+ mode: { type: String, default: 'default' }, // 或者simple
|
|
|
+ toolbarConfig: { type: Object, default: () => ({}) },
|
|
|
+ editorConfig: { type: Object, default: () => ({}) },
|
|
|
+ },
|
|
|
+ model: {
|
|
|
+ prop: 'text',
|
|
|
+ event: 'input',
|
|
|
+ },
|
|
|
+ components: { Editor, Toolbar },
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ editor: null,
|
|
|
+ ec: { placeholder: '请输入内容...', ...this.editorConfig },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ onCreated(editor) {
|
|
|
+ this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错
|
|
|
+ },
|
|
|
+ toInput(e) {
|
|
|
+ this.$emit('input', e);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ const editor = this.editor;
|
|
|
+ if (editor == null) return;
|
|
|
+ editor.destroy(); // 组件销毁时,及时销毁编辑器
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style src="@wangeditor/editor/dist/css/style.css"></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.editor {
|
|
|
+ height: 500px;
|
|
|
+ overflow-y: hidden;
|
|
|
+}
|
|
|
+</style>
|