重置富文本UI,重写图片上传部分,实现本地预览,实现插入数学公式和地图的功能

Overview

vue组件umeditor

Current Release license javascript GitHub Workflow Status GitHub code size

  1. vue + UMeditor(ueditor迷你版本)

demo

在线演示

兼容性

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

依赖

  1. jQuery
  2. umeditor
  3. MathQuill
  4. baiduMap

使用

Npm

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/[email protected]/dist/main.bundle.js">

  </script>
<script type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@blog1997/[email protected]/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: '

everything you like

'
} }, 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

  1. 数据的双向绑定
  2. 对数学公式的支持
  3. 全新的UI
  4. 可以插入地图(一般用不到)
  5. 自动导入各种依赖文件

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钩子,做一些提前准备工作。可以参考源码,做一些你需要的扩展

[Save] 按钮
">
	<umeditor @before-init="beforeInit">umeditor>
	beforeInit() {
      UM.registerUI("save", function (name) {
        //该方法里的this指向编辑器实例
        var me = this,
          //实例化一个UMEDITOR提供的按钮对象
          $button = $.eduibutton({
            //按钮icon的名字, 在这里会生成一个“edui-icon-save”的className的icon box,
            //用户可以重写该className的background样式来更改icon的图标
            //覆盖示例见btn.css
            icon: "icofont-architecture-alt",
            title: me.options.lang === "zh-cn" ? "保存" : "save",
            click: function () {
              //在这里处理按钮的点击事件
              //点击之后执行save命令
              me.execCommand(name);
            },
          });

        //在这里处理保存按钮的状态反射
        me.addListener("selectionchange", function () {
          //检查当前的编辑器状态是否可以使用save命令
          var state = this.queryCommandState(name);

          //如果状态表示是不可用的( queryCommandState()的返回值为-1 ), 则要禁用该按钮
          $button
            .edui()
            .disabled(state == -1)
            .active(state == 1);
        });
        //返回该按钮对象后, 该按钮将会被附加到工具栏上
        return $button;
      });
      console.log(UM.Editor.prototype)
      // 默认载入自定义的 菜单
      UMEDITOR_CONFIG.toolbar.push("save");
    },

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

{ this.editor.replaceImageUrl(response.data.data) }); }">
// 上传图片
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协议的地址,不能正常显示动态地图。

Issues
  • Bump jquery from 2.2.4 to 3.4.1

    Bump jquery from 2.2.4 to 3.4.1

    Bumps jquery from 2.2.4 to 3.4.1.

    Commits
    • 75f7e96 3.4.1
    • 7dddb19 Core: Make isAttached work with iOS 10.0-10.2
    • 6c1e7db Event: Prevent leverageNative from registering duplicate dummy handlers
    • 24d71ac Event: Fix handling of multiple async focus events
    • b4fadc9 Build: Test on Node.js 12, stop testing on Node.js 6 & 11
    • 0d4af52 Build: Fix unresolved jQuery reference in finalPropName
    • 22caea8 Build: Updating the 3.4-stable version to 3.4.1-pre
    • 59ea765 Release: update AUTHORS.txt
    • 7c1ef15 Release: update version to 3.4.0-pre
    • d940bc0 Build: Update Sizzle from 2.3.3 to 2.3.4
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1