Vue使用UEditor富文本编辑器

UEditor是一个功能强大、兼容性比较好的富文本编辑器，大概是长成以下的样子：

要在Vue的webpack项目中使用UEditor，具体的步骤如下：

一、下载UEditor源码包

1、到https://ueditor.baidu.com/website/download.html下载相应的版本

2、把下载好的包放在项目的目录中（我放在static目录下）

二、修改文件参数

打开/static/UM/umeditor.config.js文件，加入一行参数：

window.UMEDITOR_HOME_URL = '/static/UE/'

三、引入文件

1、下载Jquery的文件，我把文件放在/static目录下：

因为UEditor插件是依赖到Jquery的，所以在目录的index.html文件中，引入Jquery文件：

2、引入UEditor相关文件

在main.js文件中引入：

import '../static/UM/umeditor.config.js'

import '../static/UM/umeditor.min.js'

import '../static/UM/lang/zh-cn/zh-cn.js'

import '../static/UM/themes/default/css/umeditor.min.css'

注意引入的顺序，引入之后window.UM就是UEditor的对象了。

四、封装一个组件

在components下新建一个.vue文件，代码写成这样：

<template> <div> <script id="editor" type="text/plain"></script> </div> </template> <script> export default { name: 'UM', data () { return { editor: null } }, props: { defaultMsg: { type: String }, config: { type: Object } }, mounted() { const _this = this; this.editor = UM.getEditor('editor', this.config); this.editor.ready(() => { this.editor.setContent(this.defaultMsg); }); }, methods: { getContent() { return this.editor.getContent() } }, destroyed() { this.editor.destroy(); } } </script>

五、使用组件

可以在需要用到编辑器的地方，引入组件：

<template> <div> <UM :defaultMsg="defaultMsg" :config="config" ref="um"></UM> </div> </template> <script> import UM from '@/components/editor.vue'; export default { data() { return { defaultMsg: '初始文字', config: { initialFrameWidth: null, initialFrameHeight: 350 } } } components: {     UM } } </script>

defaultMsg：初始的文本内容；

config: 编辑器相应的配置；

this.$refs.um.getContent():获取文本的内容。

根据以上的步骤就可以在Vue项目使用UEditor，具体对编辑器的参数修改或操作处理，请查看官方API。