创建一个editor.vue文件，代码如下

<template>
	<div style="border: 1px solid #ccc;">
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
		<Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
			@onCreated="onCreated" />
	</div>
</template>

<script>
	import Vue from 'vue'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'


	export default Vue.extend({

		components: {
			Editor,
			Toolbar
		},
		data() {
			return {
				// imgUrl:'',
				// uploadurl:'',
				editor: null,
				html: '<p>hello</p>',
				toolbarConfig: {}, //工具栏配置
				editorConfig: {
					placeholder: '请输入内容...',
					MENU_CONF: {	
						// 所有的菜单配置，都要在 MENU_CONF 属性下
					},
				},
				mode: 'default', // or 'simple'

			};
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				this.uploadurl = this.Picurlprefix.requestUploadPrefix;
			},
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
			},
			onChange(editor) {
				console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
			},
			insertTextHandler() {
				const editor = this.editor
				if (editor == null) return
				editor.insertText(' hello ')
			},
			printEditorHtml() {
				const editor = this.editor
				if (editor == null) return
				console.log(editor.getHtml())
			},
			disableHandler() {
				const editor = this.editor
				if (editor == null) return
				editor.disable()
			},

		},
		mounted() {
			// 模拟 ajax 请求，异步渲染编辑器
			setTimeout(() => {
				this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
			}, 1500)
		},
		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		}
	})
</script>

<style src="@wangeditor/editor/dist/css/style.css">

</style>

在新建一个editortest.vue使用

<template>
	<div>
		<span>编辑器</span>
		<MyEditor></MyEditor>
	</div>
</template>

<script>
	import MyEditor from "../../views/editor/editor.vue"
	export default {
		components:{
			MyEditor
		}
	}
</script>

<style>
</style>

在router下的index.vue配置路由跳转

import editortest from "../views/editor/editortest.vue"




Vue.use(VueRouter)

export default new VueRouter({
	mode: 'history',   //历史模式，地址栏中不存在#;不设置的话，默认是hash，带#
	routes: [
		{
			path: '/',
		    name: 'home',
		    component: home
		  },
		  {
		    path: '/editortest',
		    name: 'editortest',
		    component: editortest
		  }
    ]
})

运行项目，成功界面如下

配置上传图片

在menu-conf下配置如下

MENU_CONF: {
						// 所有的菜单配置，都要在 MENU_CONF 属性下
						// 配置上传图片

						uploadImage: {
							// 后端上传地址，必填
							server: "/dev-api/common/upload",

							timeout: 5 * 1000, // 5s 超时时间

							fieldName: 'custom-fileName',

							//选择文件时的类型限制，默认为['image/*'] 如不想限制，则设置为 []
							allowedFileTypes: ['image/*'],
							
							metaWithUrl: true, // 参数拼接到 url 上

							maxFileSize: 1000 * 1024 * 1024, //1g //设置大点 不然图片过大会报错

							base64LimitSize: 1000000 * 1024, // 1g 以下插入 base64

							// 上传前
							onBeforeUpload(file) {
								console.log('onBeforeUpload', file)
								// Message({
								//                 message: '图片正在上传中,请耐心等待',
								//                 duration: 0,
								//                 customClass: 'uploadTip',
								//                 iconClass: 'el-icon-loading',
								//                 showClose: true
								//               });
								              return files;
								return file.url // 返回哪些文件可以上传
								// return false 会阻止上传
							},
							 // 上传进度的回调函数
							onProgress(progress) {
								console.log('onProgress', progress)
							},
							 // 单个文件上传成功之后
							onSuccess(file, res) {
								console.log('onSuccess', file.url, res)
							},
							// 单个文件上传失败
							onFailed(file, res) {
								alert(res.message)
								console.log('onFailed', file, res)
							},
							// 上传错误，或者触发 timeout 超时
							onError(file, err, res) {
								alert(err.message)
								console.error('onError', file, err, res)
							},
						},

运行即可完成上传图片操作。