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

Ning Zaichun 2021-11-25 17:40:55

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

Please bring the original link to reprint ,thank
Similar articles

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25