Nuxt 2 + wangeditor 5.0

一、安装wangeditor

"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^1.0.2",

二、项目中引入

由于wagneditor渲染过程中需要用到 window 、document对象，所以不能在服务端渲染，只能弄到客户端渲染。 我们可以使用 component 标签来处理。

<template>
	<div>
		<component
			:is="toolBarComponent"
			style="border-bottom: 1px solid #ccc"
			:mode="mode"
			:editor="editor"
			:default-config="toolbarConfig"
		/>
		<component
			:is="editorComponent"
			v-model="html"
			style="height: 500px; overflow-y: hidden"
			:default-config="editorConfig"
			:mode="mode"
			@onCreated="onCreated"
		/>
	</div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css';

export default {
	data () {
		return {
			editor: null,
			html: '<p>hello</p>',
			toolbarConfig: {},
			editorConfig: { placeholder: '请输入内容...' },
			mode: 'default', // or 'simple'
			toolBarComponent: null, // 工具栏
			editorComponent: null
		};
	},
	created () {
		if (process.client) {
			const editor = require('@wangeditor/editor-for-vue');
			this.editorComponent = editor.Editor;
			this.toolBarComponent = editor.Toolbar;
		}
	},
	mounted () {
		setTimeout(() => {
			this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>';
		}, 1500);
	},
	methods: {
		onCreated (editor) {
			this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
		}
	}
}
</script>