Vue中富文本编辑器的使用

Posted 2021-06-30 小小白学计算机

基于 Vue 的富文本编辑器有很多，例如官方就收录推荐了一些： https://github.com/vuejs/awesome-vue#rich-text-editing 。

这里我们以 element-tiptap 为例。

GitHub 仓库：https://github.com/Leecason/element-tiptap
在线示例：https://leecason.github.io/element-tiptap
中文文档：https://github.com/Leecason/element-tiptap/blob/master/README_ZH.md

1、安装

npm i element-tiptap

2、初始配置

<template>
	<el-tiptap lang="zh" v-model="content" :extensions="extensions"></el-tiptap>
</template>

<script>
 import {
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Image,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  HorizontalRule,
  Fullscreen,
  Preview,
  CodeBlock
} from 'element-tiptap'
import 'element-tiptap/lib/index.css'

export default {
  components: {
    'el-tiptap': ElementTiptap
  },
  data () {
    return {
      content: 'hello world',
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 3 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Image(),
        new Underline(), // 下划线
        new Italic(), // 斜体
        new Strike(), // 删除线
        new HorizontalRule(), // 华丽的分割线
        new ListItem(),
        new BulletList(), // 无序列表
        new OrderedList(), // 有序列表
        new TodoItem(),
        new TodoList(),
        new Fullscreen(),
        new Preview(),
        new CodeBlock()
      ]
    }
  }
}
</script>

处理富文本编辑器中的图片

1、创建 src/api/image.js 封装数据接口

/* 素材请求相关模块 */

import request from '../utils/request'

/* 上传图片素材 */
export const uploadImage = (data) => {
  return request({
    method: 'post',
    url: '/mp/v1_0/user/images',
    // 一般文件上传的接口都要求把请求的Content-Types设置为multipart/form-data
    // 但是我们使用axios上传文件的话不需要手动设置，你只要给data一个formData对象即可
    // new formData()
    data: data
  })
}

2、自定义图片上传到服务器