Element Tiptap Editor富文本编辑器脚手架安装搭建

Element Tiptap Editor是web开发领域中一款“所见即所得”的富文本编辑器。它是基于tiptap编辑器和element-ui开发的。与许多富文本编辑器相比，Element Tiptap Editor易于使用，对开发人员友好，可扩展，设计简单。

安装 Element Tiptap Editor

// 使用 yarn
yarn add element-tiptap

// 使用 npm
npm install --save element-tiptap

在 Vue 中全局注册

import Vue from 'vue';
import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
// 引入 ElementUI 样式
import 'element-ui/lib/theme-chalk/index.css';
// import element-tiptap 样式
import 'element-tiptap/lib/index.css';

// 安装 ElementUI 插件
Vue.use(ElementUI);
// 安装 element-tiptap 插件
Vue.use(ElementTiptapPlugin, {
  /* 插件配置项 */
});

在 Vue 中局部引入

<template>
  <div>
    <el-tiptap ...><el-tiptap>
  </div>
</template>

<script>
import { ElementTiptap } from 'element-tiptap';

export default {
  components: {
    'el-tiptap': ElementTiptap,
  },
};
</script>

其它组件引入

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

<script>
import {
  // 罗列出需要的功能按钮
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
} from 'element-tiptap';

export default {
  data () {
    return {
    // 按照罗列的顺序被添加到菜单栏和气泡菜单中
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }), // 支持多级标题，设置为5级
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
      ],
      // 编辑器的内容
      content: `
        <h1>Heading</h1>
        <p>This Editor is awesome!</p>
      `,
    };
  },
},
</script>

Element Tiptap Editor 的官网很简洁，风格传承 Tiptap 1.x 版本，功能演示即代码，非常简单易懂。

进入Element Tiptap Editor中文官网