编程知识 cdmana.com

Vue integrates element tip rich text editor to realize bubble menu and stroke pop-up menu

It's warm in winter

Preface

When writing the front end today , Just encounter a problem . At first I thought it was textarea Remove the corner mark , Achieve automatic growth , And then it's all right . Who knows it has to be styled , In bold 、 Italics , The teacher didn't give the design draft at the beginning . Directly numb .

Then I went to work on this rich text editor . It's not easy at the front , There are so many things to learn .


The functional requirements are as follows

image-20211108232625501

Is to select the article , Make it bold , Italicized , Add style , And when selected, a small menu can pop up on it .

For this bubble menu , I really found a lot of rich text editors , Finally, turn to element-tiptap, See this on the style .

image-20211108232914983

One 、Element-tiptap Rich text editor Introduction

It's easy to use , Developer friendly , Completely scalable , Simple design .

In its words , Mainly and element High adaptability , Then I wanted to use him , Use element-ui Components .

github Official website :https://github.com/Leecason/e...

Two 、 Start using

npm install :

npm install --save element-tiptap

Just install it directly

Normal menu :

Let's post the simplest example :

<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>

The renderings are as follows :

image-20211108234111582

His style is direct and element-ui The combination of .

In terms of function , It's a little less , But it just meets my needs .

In addition, it also has its own stroke to select the pop-up bubble menu .

Bubble menu :

The above example has been implemented directly .

image-20211108234330691

In addition, his parameters are and element equally , Is directly bound to the label .

for example :

We don't need character counting

Just bind this property directly on the tag charCounterCount

as follows :

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

3、 ... and 、 Think aloud

It's on paper , We must know that we must do it .

Hello everyone , I'm a blogger Better in spring Home page

A young man who likes literature and art but embarks on the road of programming .

hope : We , When we meet on another day , It's all done .
Today, let's see if we can customize the menu , We are working hard ...

 Insert picture description here

版权声明
本文为[Ning Zaichun]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/11/20211109091141883e.html

Scroll to Top