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

JavaScript015

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

又来了

https://www.draft-js-plugins.com/plugin/image

draft.js：不要使用redux来管理editorState

draft.js：让光标显示在最后面

draft.js：内容清空之后，光标的位置会错乱

draft.js：如何改变 draft.js 编辑框的高度

draft.js：getPlainText 对换行符的修改 (填坑篇)

draft.js：onChange改装，判断文字内容是否修改

draft.js--富文本编辑器框架的实践（一）

draft.js--富文本编辑器框架的实践（二）

原 1.Draftjs 学习笔记

原 2.Draftjs 学习笔记-Rich Styling

原 3.Draftjs 学习笔记-Entities

原 4.Draftjs 学习笔记-Decorators

原 5.Draftjs 学习笔记-自定义控件（多媒体）

原 6.Draftjs 学习笔记-聊聊自定义样式

原 7.Draftjs 学习笔记-StateToHtml

Draftjs中文翻译1 - 概观

Draftjs中文翻译2 - API Basics API基础

Draftjs中文翻译3 - Rich Styling丰富的造型

Draftjs中文翻译4- 实体

Draftjs中文翻译5 - v0.10 API迁移

Draft.js文档

使用 Draft.js 来构建一个现代化的编辑器

draft.js在知乎的实践

基于Draft.js自定义富文本编辑器

基于Draftjs实现的Electron富文本聊天输入框

基于Draftjs实现的Electron富文本聊天输入框(一) —— 群@功能

基于Draftjs实现的Electron富文本聊天输入框(二) —— 图文输入

基于Draftjs实现的Electron富文本聊天输入框(三) —— Emoji

基于Draftjs实现的Electron富文本聊天输入框(四) —— 自定义快捷键

基于Draftjs实现的Electron富文本聊天输入框(五) —— 问题总结与解决

完美解决问题！

还有下一个问题：光标位置错乱 待解决！！！

jsp使用富文本编辑器可以参考如下:

对于一些刚入门的程序员来说，在一些实际的开发中可能会用到编辑器，那么如何在JSP页面中嵌入并使用编辑器（本文以百度的UEditor编辑器为例），以下是具体的操作流程：

第一步

首先要到UEditor官网下载不同版本的编辑器，用户可以根据自身的需求进行下载，本文操作所需要的是JSP版本，UEditor下载如图所示：

UEditor编辑器下载地址：http://ueditor.baidu.com/website/download.html

下载完成后进行解压缩到任意文件夹，包中的内容如下图：

另附上几个编辑器的下载地址：

1.KindEditor：http://kindeditor.net/down.php

2.xhEditor：http://xheditor.com/download.html

3.TQEditor：http://www.e512.net/tqeditor/download.htm

第二步

在Eclipse中新建Dynamic Wen Project，并在WebContent下新建文件夹，命名为UEditor，把刚解压的文件复制到该文件夹，结构如图所示：

需要注意的是，要把编辑器所需的jar也导入到WEB-INF下的lib中：

第三步

经过以上配置，基本上已经把相应的环境配好了，接下来就是要写一个jsp页面进行展示，为了演示需要，在这里把index.jsp作为演示页面。

打开index.jsp页面，导入对应的js和css样式，代码如下：

[html] view plain copy

<%@ page language="java" contentType="text/htmlcharset=utf-8"

pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title>百度UEditor编辑器</title>

<script type="text/javascript" src="UEditor/ueditor.config.js"></script>

<script type="text/javascript" src="UEditor/ueditor.all.js"></script>

<link rel="stylesheet" href="UEditor/themes/default/css/ueditor.css">

<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

<script type="text/javascript" charset="utf-8"

src="UEditor/lang/zh-cn/zh-cn.js"></script>

<style type="text/css">

div {

width: 100%

}

</style>

</head>

<body>

<textarea id="container" name="container"

style="width: 800pxheight: 400pxmargin: 0 auto"></textarea>

<script type="text/javascript">

UE.getEditor("container")

</script>

</body>

</html>

以上代码写好以后，部署项目，运行tomcat，打开浏览器在地址栏中输入：http://localhost:8080/UEditor/，可以看到编辑器的效果：

注意：在压缩的包中，有index.html页面，里面有具体的配置信息，本文不做详细介绍。