「后端小伙伴来学前端了」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-tiptapv-model="content":extensions="extensions"/></div>
</template><script>
import {// necessary extensionsDoc,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 contentcontent: `<h1>Heading</h1><p>This Editor is awesome!</p>`,};},
},
</script>

效果图如下：

他的样式是直接和element-ui结合的。

功能这个方面的话，确实有点点少，但是就正好是符合我的需求。

「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器，实现气泡菜单，划词弹出菜单相关推荐

「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐.就是所谓的render函数. 一.main.js ...
「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表，得学学了，必须要会的基本操作了
依旧还是学妹给的封面直接进入主题-在vue中使用个啥,都差不多是一个流程. 引入Echarts 安装 npm install echarts --save 我们写一个Echarts组件,在内进行引入 ...
「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误？你有没有思考过？
清晨的☀ 前言我们都知道在 Vue 中并不只有纯正的CSS,还有less.sass等,后面这些,写起来都可以级联着,不需要像原生的css那样,会方便很多. 大家都知道我也是最近写的vue,看见周围人 ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
「后端小伙伴来学前端了」Vue中全局事件总线（GlobalEventBus）原理及探究过程
前言上一篇文章写了 Vue 中的自定义事件,自定义事件是全局事件总线基础.我在上一篇文章中埋下了一个小小的伏笔.如下图: 我说过,在Vue中如果我们用(@orv-on)给组件绑定上一个自定义事件,其 ...
「后端小伙伴来学前端了」Vue中利用全局事件总线改造 TodoList 案例
前言上上篇写了:
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信
校园的云前言废话: 上篇文章写了关于Vue 中的 props

「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器，实现气泡菜单，划词弹出菜单

前言

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

二、开始使用

正常菜单：

「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器，实现气泡菜单，划词弹出菜单相关推荐

最新文章

热门文章