冬日暖阳
前言
明天在写前端的时候，就是遇到一个问题。一开始我认为用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>三、喃喃自语
纸上得来终觉浅，绝知此事要躬行。大家好，我是博主
宁在春：主页一名喜爱文艺却踏上编程这条路线的小青年。
心愿：
咱们，待别日相见时，都已有所成。
明天看能不能实现自定义菜单，正在致力中...