关于javascript:Vue集成-Elementtiptap-富文本编辑器实现气泡菜单划词弹出菜单

冬日暖阳

前言

明天在写前端的时候，就是遇到一个问题。一开始我认为用textarea去掉角标，实现主动增长，而后就能够了。谁晓得它还得加款式，加粗、斜体，老师在最开始给的设计稿上基本没有。间接麻掉。

起初就去搞这个富文本编辑器。感觉前端也不容易，要学习的货色真的蛮多。

性能需要是这样的

就是选中文章，给它加粗，加斜体，加款式，并且选中的时候可能在下面弹出一个小菜单。

为了这个气泡菜单，真的找了很多富文本编辑器，最初翻到个element-tiptap，看到款式上有这个。

一、Element-tiptap富文本编辑器介绍

它易于应用，对开发人员敌对，齐全可扩大，设计简洁。

用它的话，次要是和element适配度高，而后我就想用他了，应用element-ui组件。

github官网：https://github.com/Leecason/e…

二、开始应用

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>

三、喃喃自语

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主宁在春：主页

一名喜爱文艺却踏上编程这条路线的小青年。

心愿：咱们，待别日相见时，都已有所成。
明天看能不能实现自定义菜单，正在致力中…