重置富文本UI，重写图片上传部分，实现本地预览

IE >= 10 (插入地图、公式的功能也可以在IE9中使用)
Chrome
Firebox

npm install raw-loader --save-dev npm install '@blog1997/vue-umeditor' --save

import editor from '@blog1997/vue-umeditor' import Vue from 'vue' Vue.use(editor) script标签

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@blog1997/vue-umeditor@latest/dist/main.bundle.js"> </script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@blog1997/vue-umeditor@latest/dist/vendors~main.bundle.js"></script> <script> Vue.use(VueUmeditor) </script> 模板语法

<div id="editor"> <umeditor v-model="content" @receiveUM="receiveUM"/> </div>

new Vue({ el: '#editor', data() { return { editor: '', content: '<p>everything you like</p>' } }, methods: { receiveUM (editor) { this.editor = editor } } }) 关于图片的上传

/** * @param FormData files * upfile[] => FileList */ const images = this.editor.getFileFormData() const formData = new FormData images.forEach(element => { formData.append('images[]', element) }); // 根据返回的数据，替换本地的图片 axios.post('upload', images) .then((response) => { // response.data : array this.editor.replaceImageUrl(response.data) }).catch(e => { // do something }) Features 数据的双向绑定 对数学公式的支持 全新的UI 可以插入地图（一般用不到） 自动导入各种依赖文件 FAQ（常见问题）

1、 这个包使用的是ES6语法，需要在使用的时候配置一下babel-loader。
例如：
在vue项目中，需要对transpileDependencies属性进行配置
在nuxt项目中，对transpile属性进行配置
2、 内置了一个模拟组件用于测试

import umeditor from '@blog1997/vue-umeditor/test'

3、 关于SSR，因为在服务器端不执行mounted钩子函数，而组建实例话UmEditor是在mounted钩子函数中执行的，可以在只服务端注册组件，让其只渲染相关的模板，然后在客户端生成富文本

// server side code import umeditor from '@blog1997/vue-umeditor/component' vue.component('umeditor', umeditor)

然后在客户端入口导入相关的文件

import '@blog1997/vue-umeditor'

4、 如何初始化数学公式和地图
举个例子，富文本提取的公式内容是这样的, \sqrt[]{}, 需要使用mathquill将其转成我们要呈现的样子。需要使用组件的 initFormula方法

import { initFormula, initMap } from '@blog1997/vue-umeditor' initFormula() // 初始化数学公式 initMap() // 初始化地图

5、在使用地图功能之前，需要申请一个百度地图的ak，然后传入baiduMapAk props。

<umeditor baiduMapAk="your application key" />

6、语言的选择

<umeditor lang="en|zh-cn" />

7、二次开发

在实例话编辑器之前，通过before-init钩子，做一些提前准备工作。可以参考源码，做一些你需要的扩展

8、关于图片的上传
因为采用了本地预览图片的策略，所以在提交文本之前，需要先将图片上传到服务器上。编辑器实例的getFileFormData方法会返回一个FileList数组(其元素是File 实例)，之后，你可以通过FormData将其上传到服务器上。然后使用replaceImageUrl方法，将服务端返回的路径替换掉本地预览的路径。

// 上传图片 uploadImage() { const images = this.editor.getFileFormData(); const formData = new FormData images.forEach(element => { formData.append('upfile[]', element) }); axios.post("https://www.blog1997.com/api/admin/upload/image/article", formData) .then((response) => { this.editor.replaceImageUrl(response.data.data) }); }

9、无痕模式下的视频可能无法播放
10、因为百度地图自身的原因，使用https协议的地址，不能正常显示动态地图。