完全可定制的富文本编辑框架——Slate.js

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了完全可定制的富文本编辑框架——Slate.js相关的知识,希望对你有一定的参考价值。

参考技术A Slate 是一个完全可定制的富文本编辑框架。通过 Slate,你可以构建出类似 Medium、Dropbox Paper 或者 Canvas 这样使用直观、富交互、体验也已成为 Web 应用标杆的编辑器。Slate 本身并不是一个编辑器,而是一套在 React 和 Immutable 的基础上,用于操作富文本数据的框架。基于 Slate 实现一个富文本编辑器,相当于是使用 React(视图层)+ Immutable(数据层)开发一个普通 Web 应用,Slate相当于Controller。

Github:

文档:

在线示例:

使用npm包管理

Slate 开放了一套用于构建编辑器的模块。其中,最重要的是 Editor 组件:

启动的时候我第一次失败了,然后重新启动下就行了,然后打开浏览器localhost:8080

通过简单的语法实现Markdown的编写

你可以从别的网站直接粘贴带有样式的文本

写过html标签的都知道

类似<textarea></textarea>

可以在应用某些更改后保存新版本,然后随时回滚到以前的版本

以下是开发者的一些说明(文档有中文版):

类似加粗和斜体的结构可以开箱即用,但评论、嵌入内容以及更多的定制性需求呢?

用户的编写体验可能不错,但在执行编程式变更时却不必要地复杂,而这对于构建高级的编辑行为至关重要。

这是一个非常常见的使用场景,但要实现将文档转换为 HTML 或 Markdown 的简单功能都需要编写大量的模板代码。

各种编辑器在重新发明视图层的轮子,而非使用 React 这样已有的技术方案。你必须学习一套带着自有限制和陷阱的新系统。

编辑器内部的数据结构使其无法用于实时、协作的编辑场景中,除非重写编辑器。

许多编辑器没有对外开放本应为开发者所复用的内部工具,以至于不得不重新发明轮子。

不少编辑器是围绕简单的【扁平】文档结构设计的,这使得表格、嵌入内容和字幕等内容难以理解,有时甚至无法实现。

Slate是一个可以高度定制化博众家之所长的富文本编辑器框架,其强大之处远不是本文所展现的这一点,你可以使用它来创建复杂且优雅的富文本编辑器,相对其他很多编辑器本身来说非常的灵活,文档也非常的详细,目前也正在不断地迭代当中,对富文本编辑器定制化需求比较高的可以尝试,希望能对你有所帮助!

基于Vue的无渲染的富文本编辑器——tiptap!

tiptap编辑器基于Prosemirror,完全可扩展且无渲染。可以轻松地将自定义节点添加为Vue组件。

 


 

技术图片

 

 


Github

https://github.com/scrumpy/tiptap

为什么使用tiptap?

市面上有不少富文本编辑器,但大多数可能并不能满足你的需求。编辑器应该易于扩展,并且不应基于旧的依赖项(例如jQuery)。对于React,已经有一个名为Slate.js的出色编辑器,其模块化给人留下深刻的印象。tiptap是基于Prosemirror进行扩展开发的没有很多公司在Prosemirror(富文本工具包)基础上进行开发。

无渲染要如何理解?

使用无渲染组件(函数式组件),你将(几乎)完全控制标记和样式。菜单的外观或在DOM中的显示位置。这完全取决于使用者。

安装和使用

  • 安装
npm install tiptap
#或者
yarn add tiptap
  • 使用
<template>
<editor-content :editor="editor" />
</template>

<script>
// Import the editor
import { Editor, EditorContent } from ‘tiptap‘

export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: ‘<p>This is just a boring paragraph</p>‘,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

Demo截图

下面是来自官方网站的一组Demo截图:

  • 基本使用

 

技术图片

 

  • 菜单气泡

 

技术图片

 

  • 浮动菜单

 

技术图片

 

  • 添加链接

 

技术图片

 

  • 图片

 

技术图片

 

  • 可隐藏菜单栏

点击可隐藏菜单栏

技术图片

 

  • 待办事项清单

 

技术图片

 

  • 表格table

 

技术图片

 

  • 搜索和替换

 

技术图片

 

  • 输入建议

 

技术图片

 

  • 快捷支持Markdown

 

技术图片

 

  • 代码突出高亮显示

 

技术图片

 

  • 历史记录

 

技术图片

 

  • 只读

 

技术图片

 

  • 嵌入

 

技术图片

 

  • 占位符

 

技术图片

 

  • 焦点

 

技术图片

 

  • 可通过前后端搭配实现协同编辑

 

技术图片

 

  • 标题

 

技术图片

 

  • 末尾段落

可理解为对图片等的解释说明等等,可灵活使用

 

技术图片

 

  • 导出html和json

 

技术图片

 

ProseMirror简介

ProseMirror 用于在网络应用程序上构建富文本编辑器的工具包,视图解决Markdown和经典WYSIWYG(所见即所得)编辑器。它通过实现WYSIWYG样式的编辑界面来实现此目的,以使文档比纯HTML更加受约束和结构化。可以自定义编辑器创建的文档的形状和结构,并根据应用程序的需要对其进行定制。

 

技术图片

 

 

https://github.com/prosemirror

总结

tiptap是一个相当不错的富文本编辑器,其无渲染特性以及可实现的协同编辑让其扩展更加方便!enjoy it!

 

以上是关于完全可定制的富文本编辑框架——Slate.js的主要内容,如果未能解决你的问题,请参考以下文章

一款开源的 Web 富文本编辑器

Draft.js —— 基于 React 的富文本编辑框架(Facebook 出品)

初探富文本之编辑器引擎

Draft.js一个用React实现的富文本编辑器

iOS富文本实现(-):私密阅读效果

IOS - WebView富文本开发