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富文本聊天输入框(五) —— 问题总结与解决
完美解决问题!
还有下一个问题:光标位置错乱 待解决!!!
开发中,一提到富文本输入框,很多人会想到使用第三方的框架,比如 YYText。我也和大多数人一样,不想重复造轮子,但是我发现很多第三方的功能实在是太多太全了,而我只需要其中的一种而已,于是乎打算自己弄一个玩玩儿。先来看一下效果图。
如何设计呢?富文本其实最主要思想是,把富文本和普通文本一一对应起来。比如富文本是 “undefined”,那么它的普通文本就是“标题”。那么如何把这种关系对应起来呢?
方案一:
1、用一个数组存放富文本的信息(富文本 NSRange ,普通文本中的 NSRange,富文本内容);
2、当用户输入的时候,更新数组中 NSRange 的值;
3、控制光标位置不在富文本范围以内;
4、控制选择范围的起点和终点不在富文本范围以内;
5、调整富文本显示的颜色;
6、获取富文本;
7、获取普通文本。
如何你去实现,2、3、4、5 、6 这几个方法都需要枚举整个数组,而且在更新 NSRange 的时候也比较麻烦,这样的效率是比较低的,因此我实现到 2/3 的时候放弃了,另谋他路,结果还真的被我找到了,那就是方案二。
方案二总结就是三个“一”。一个类,一个属性,一个方法。
一个类: NSMutableAttributedString。
一个属性:该类的 attribute 属性。
attribute 除了支持系统已定义的外,还支持用户自定义的。因此它便可以替代我方案一中数组的作用,并维护富文本的位置信息。
一个方法:- (void)enumerateAttributesInRange:(NSRange)enumerationRange options:(NSAttributedStringEnumerationOptions)opts usingBlock:(void (NS_NOESCAPE ^)(NSDictionary*attrs, NSRange range, BOOL *stop))block NS_AVAILABLE(10_6, 4_0)
这个方法很特殊,主要是看我红框框中的内容,意思是,你可以在枚举的时候随意更改该 Range 内的内容,增、删、改都不会影响它的枚举位置。
方案二:
1、使用 NSMutableAttributedString 来记录富文本信息;
2、使用 NSMutableAttributedString 获取相关富文本信息;
(今天就写到这儿,各位是否已经知道如何做了,明天我再把具体的实现方法贴出来)
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是一个可以高度定制化博众家之所长的富文本编辑器框架,其强大之处远不是本文所展现的这一点,你可以使用它来创建复杂且优雅的富文本编辑器,相对其他很多编辑器本身来说非常的灵活,文档也非常的详细,目前也正在不断地迭代当中,对富文本编辑器定制化需求比较高的可以尝试,希望能对你有所帮助!