大家好,我是前端实验室的大师兄!
今天大师兄给大家推荐一款专为Element UI搭配的编辑器:Element Tiptap Editor
。
Element Tiptap Editor
是一个在 web 开发领域“所见即所得
”的富文本编辑器。
它基于 tiptap
编辑器和 element-ui
开发,相比很多富文本编辑器,Element Tiptap Editor
使用易上手,对开发者友好,而且可扩展性强,设计简洁。
Element Tiptap Editor 的官网很简洁,风格传承 Tiptap 1.x 版本,功能演示即代码,非常简单易懂。
安装 Element Tiptap Editor
// 使用 yarn
yarn add element-tiptap
// 使用 npm
npm install --save element-tiptap
在 Vue 中全局注册
import Vue from 'vue';
import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
// 引入 ElementUI 样式
import 'element-ui/lib/theme-chalk/index.css';
// import element-tiptap 样式
import 'element-tiptap/lib/index.css';
// 安装 ElementUI 插件
Vue.use(ElementUI);
// 安装 element-tiptap 插件
Vue.use(ElementTiptapPlugin, {
/* 插件配置项 */
});
当然也可以局部引入
<template>
<div>
<el-tiptap ...><el-tiptap>
</div>
</template>
<script>
import { ElementTiptap } from 'element-tiptap';
export default {
components: {
'el-tiptap': ElementTiptap,
},
};
</script>
富文本的操作菜单有很多,最简单的使用方法就是:按需传入
。
只要按顺序把需要用到的功能罗列出来,传入组件,就完成了编辑器的搭建:
<template>
<div>
<el-tiptap v-model="content" :extensions="extensions" />
</div>
</template>
<script>
import {
// 罗列出需要的功能按钮
Doc,
Text,
Paragraph,
Heading,
Bold,
Underline,
Italic,
Strike,
ListItem,
BulletList,
OrderedList,
} from 'element-tiptap';
export default {
data () {
return {
// 按照罗列的顺序被添加到菜单栏和气泡菜单中
extensions: [
new Doc(),
new Text(),
new Paragraph(),
new Heading({ level: 5 }), // 支持多级标题,设置为5级
new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
new Italic(),
new Strike(),
new ListItem(),
new BulletList(),
new OrderedList(),
],
// 编辑器的内容
content: `
<h1>Heading</h1>
<p>This Editor is awesome!</p>
`,
};
},
},
</script>
一个简单具备编辑功能的富文本编辑器就完成了。
内置的功能都是基础的文字排版,如果要实现较为复杂的功能,比如插入特定结构或格式的内容(插入一篇文章的封面和摘要),就需要根据 Tiptap
提供的事件来处理。
比如,Init事件。
<template>
<el-tiptap @onInit="onInit" />
</template>
<script>
export default {
...
methods: {
/*
* tiptap editor 实例
*/
onInit ({ editor }) {
// 做你初始化想做的事。
},
},
},
</script>
Element Tiptap Editor
还可以自定义扩展菜单功能。更多详细内容请查阅官方文档。
地址 https://github.com/Leecason/element-tiptap
欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式:在下方公众号后台,回复 111
,按提示操作即可进群。
如果该文章对你有帮助,那么就点击右下角的 [点赞]「在看」,给一个小小的鼓励吧~