vue中使用UEditor富文本编辑器

常见的富文本编辑器

首先我们来看一下当下比较常见的富文本编辑器：

• tinymce ：是一家老牌做富文本的公司推出的一款开源的富文本编辑器，界面清晰，支持图片在线处理，插件多，功能强大，还提供了强大的跨浏览器兼容性，文档也很完善而且目前一直有团队在维护。
• ckeditor ： 也是一家老牌做富文本的公司推出的产品，现在也出了 5.0 版本，ui 也变美观了不少，相当的不错，而且它号称是插件最丰富的富文本了。推荐大家也可以试用一下。
• quill ：也是一个非常火的富文本，长相很不错。基于它写插件也很简单，api 设计也很简单。它对图片的各种操作不友善，而且很难改。如果对图片没什么操作的用户，推荐使用。
• wangEditor： 一个国人写的富文本，它轻量、简洁、易用，但是升级到 3.x 之后，不便于定制化开发。不过毕竟是个人的，不像专门公司做富文本的，配置型和丰富性不足，但是个人能做成这样子很棒了。
• 百度 UEditor：是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。16年之后百度没有怎么更新了，不过现有的功能也足够用了。

本次项目我们选择了轻量，功能全面的百度UEditor，由于前端框架是VUE开发，所以选择了前端大佬封装的vue-ueditor-wrap插件，结合ueditor本身的压缩包来进行开发。
vue-ueditor-wrap： 它是Vue + UEditor + v-model 双向绑定，省去了初始化 UEditor、手动调用 getContent，setContent 等繁琐的操作，而是直接采用 v-model 来绑定数据，使得在 Vue 项目中的使用UEditor 可以像 Input 框一样简单。

vue-ueditor-wrap插件的使用

1：安装

	 npm i vue-ueditor-wrap
	 # 或者
	 yarn add vue-ueditor-wrap

2：下载最新的 UEditor 资源文件，只需要选择一个你需要的版本（UEditor修订版地址）

3：将下载完成的压缩包，修改文件名为 ueditor ，并放入你项目的静态资源目录中（如果你是cil3就放在public目录中，如果是cil2就放入static中）

4：引入VueUeditorWrap组件

• 组件内注册引入

	<template>
	  <div>
	    <!--使用组件  -->
		 <vue-ueditor-wrap v-model="msg" :config="config"></vue-ueditor-wrap>
	  </div>
	</template>
	<script>
		// 引入组件
		import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
		export default {
  			name: 'Ueditor',
			// 注册组件
			components: {
			  VueUeditorWrap
			}
  			data(){
  			return {
  			   // 双向绑定
	  		  msg: '这是 vue-ueditor-wrap ！',
	  		  // 配置
			  config: {
				    autoHeightEnabled: false,
			        initialFrameHeight: 600,
			        initialFrameWidth: '100%',
			        UEDITOR_HOME_URL: '/UEditor/',
			        serverUrl: 'http://xx.xx/xx', // 上传接口路径(后端服务器放上传接口的路径)
			        enableAutoSave: true // 开启从草稿箱恢复功能需要手动设置固定的 editorId，否则组件会默认随机一个，如果页面刷新，下次渲染的时候 editorId 会重新随机，导致无法加载草稿箱数据

       			}
  			}
  		}
	</script>
	

• 全局注册使用

	// 在 main.js 中引入
	import VueUeditorWrap from 'vue-ueditor-wrap'
	
	// 全局注册组件
	Vue.component('vue-ueditor-wrap', VueUeditorWrap)
	
	// 在组建中直接使用
	<vue-ueditor-wrap v-model="msg" :config="config"></vue-ueditor-wrap>

配置好之后应该就可以在项目中看到了

5：图片上传的功能

6：文件上传的功能