Vue集成 Element-tiptap 富文本編輯器，實現氣泡菜單，划詞彈出菜單

冬日暖陽

前言

今天在寫前端的時候，就是遇到一個問題。一開始我以為用textarea去掉角標，實現自動增長，然后就可以了。誰知道它還得加樣式，加粗、斜體，老師在最開始給的設計稿上根本沒有。直接麻掉。

后來就去搞這個富文本編輯器。感覺前端也不容易，要學習的東西真的蠻多。

---

功能需求是這樣的

就是選中文章，給它加粗，加斜體，加樣式，並且選中的時候能夠在上面彈出一個小菜單。

為了這個氣泡菜單，真的找了很多富文本編輯器，最后翻到個element-tiptap，看到樣式上有這個。

一、Element-tiptap富文本編輯器介紹

它易於使用，對開發人員友好，完全可擴展，設計簡潔。

用它的話，主要是和element適配度高，然后我就想用他了，使用element-ui組件。

github官網：https://github.com/Leecason/element-tiptap

二、開始使用

npm 安裝：

npm install --save element-tiptap

直接安裝完就完事啦

正常菜單：

來貼個最簡單的例子：

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

<script>
import {
  // necessary extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
} from 'element-tiptap';

export default {
  data () {
    // editor extensions
    // they will be added to menubar and bubble menu by the order you declare.
    return {
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // render command-button in bubble menu.
        new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
      ],
      // editor's content
      content: `
        <h1>Heading</h1>
        <p>This Editor is awesome!</p>
      `,
    };
  },
},
</script>

效果圖如下：

他的樣式是直接和element-ui結合的。

功能這個方面的話，確實有點點少，但是就正好是符合我的需求。😂

另外還自帶划詞選中彈出氣泡菜單。

氣泡菜單：

直接是上面那個例子就已經實現了。

另外他的參數就是和element一樣，是直接綁定在標簽上的。

例如：

我們不需要字符計數

直接在標簽上綁定這個屬性即可charCounterCount

如下:

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

三、自言自語

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。
今天看能不能實現自定義菜單，正在努力中...