乐趣区

关于javascript:Element-Tiptap-Editor-免费开源的-Vue-富文本编辑器专门为搭配-Element-UI-使用优化

一款很容易上手配置的富文本编辑器,和 Element plus 一起应用成果十分好,还能自定义性能。

对于 Element Tiptap Editor

Element Tiptap Editor 是一个在 web 开发畛域“所见即所得”的富文本编辑器,基于 tiptap 编辑器和 element-ui 开发,相比很多富文本编辑器,Element Tiptap Editor 应用易上手,对开发者敌对,而且可扩展性强,设计简洁。

Element Tiptap Editor 的技术个性

  • 操作按钮等组件应用 element-ui 组件,整体款式协调好看
  • 有许多开箱即用的 extension(编辑器扩大)
  • 完满反对 markdown 语法
  • 反对 TypeScript
  • i18n 国际化反对 (en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he)
  • 高度自定义,能够自定义 extension 和它对应的菜单按钮视图
  • 操作灵便,能够通过间接管制编辑器的行为来定制编辑器
  • 提供中文文档

为什么抉择 Element Tiptap Editor

上个月在我的项目的治理后盾,接到到相似布告公布的需要,文字须要能够增强调色、列表编辑等较为轻量的富文本编辑需要,须要减少文章编辑的性能。

在一年多前我也写过文章举荐 Tiptap,这是一个基于 vue 的开源富文本编辑器,过后还是 1.x 版本,应用简略,当初更新的 2.0 全新版本,尽管性能更弱小了,但复杂程度也大幅晋升,1.x 版本也不再保护了。

就在束手无策的时候,发现了 Element Tiptap Editor,这是一个搭配 Element UI 应用,API 简化的 Tiptap 编辑器,在应用简略的同时,还能自定义扩大,一些须要依照肯定格局插入或者格式化的内容,能够通过自定义扩大来实现,在 Element UI 搭建的我的项目中,Element Tiptap Editor 几乎是最优的抉择。

开发上手

Element Tiptap Editor 的官网很简洁,格调传承 Tiptap 1.x 版本,性能演示即代码,非常简单易懂。

当然也能够部分引入

富文本的操作菜单有很多,最简略的应用办法,就是配置须要用到的性能按钮,放弃菜单的简洁,只有在按程序把须要用到的性能列举进去,传入组件,就实现了编辑器的搭建:

一个简略具备编辑性能的富文本编辑器就实现了。当然这些内置的性能都是根底的文字排版,如果要实现较为简单的性能,比方插入特定构造或格局的内容(插入一篇文章的封面和摘要),原理是依据 Tiptap 提供的事件,将解决后的内容插入到文章的选中地位,官网有具体的文档,代码量很少,也很容易弄懂。

收费开源阐明

Element Tiptap Editor 是一个收费开源的我的项目,基于 MIT 开源协定,而 Tiptap 和 Element UI 同样也是收费开源的。因而任何集体或者公司都能够收费下载应用,不论是集体我的项目还是商业我的项目,都能够收费应用。

Element Tiptap Editor 的官网不是很稳固,常常打不开,咱们也能够间接拜访它的 Github 主页:Leecason/element-tiptap。

相干网址:https://www.thosefree.com/ele…

退出移动版