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

JavaScript011

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

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

1.安装ruby

下载 rubyinstaller

双击 rubyinstaller-2.3.3.exe 安装

安装过程使用默认配置

添加ruby环境变量到Path

2.安装DevKit

点击下载 DevKit

双击附件中 DevKit-tdm-32-4.5.2-20110712-1620-sfx.exe 解压到 C:\DevKit\

然后执行以下命令

C:\>cd C:\DevKit

C:\DevKit>ruby dk.rb init

C:\DevKit>ruby dk.rb install123123

3.安装node.js

点击下载 node.js

双击 node-v6.10.3-x86.msi 安装

安装过程使用默认配置

这里会自动配置环境变量

安装成功后重启命令行,输入以下命令

node -v11

返回 v6.10.3 表示安全成功

4.搭建slate环境

点击下载slate

cd 到slate目录

注意:slate目录整个路径中请不要有中文,否则会报错。

修改Gemfile,添加下面一行

gem 'wdm', '>= 0.1.0'11

执行以下命令

gem install bundler

bundle install1212

5.启动slate

bundle exec middleman server11

6.预览md页面

打开浏览器输入 http://127.0.0.1:4567/ 可以看到一个slate示例页面

7.使用md生成静态页面

使用以下命令生成

bundle exec middleman build --clean11

8.以上已在Windows7上测试通过