quill.js

Draft.js

braft-editor

富文本编辑器

安装

# 使用npm安装
npm install braft-editor --save

# 使用yarn安装
yarn add braft-editor

使用

import BraftEditor from 'braft-editor'
// 定义一段HTML字符串
const htmlString = `<p>Hello <b>World!</b></p>`
// 将HTML字符串转换为编辑器所需要的EditorState实例
const editorState = BraftEditor.createEditorState(htmlString)

//上面创建的变量editorState即可传给编辑器的value属性
render () {
    return (
        <BraftEditor value={editorState}/>
    )
}

实例属性

名称	说明
font-size	文字字号选择器
font-family	文字字体选择器
line-height	文字行高选择器
letter-spacing	文字字间距选择器
text-color	文字颜色选择器，包含文字背景颜色设置
bold	设置文字加粗
italic	设置文字斜体
underline	设置文字下划线
strike-through	设置文字删除线
superscript	设置文字为上标
subscript	设置文字为下标
remove-styles	清除文字样式
emoji	Emoji表情选择器
text-align	文字对齐方式工具，可通过textAligns属性来指定可以使用哪些对齐方式
text-indent	段落缩进工具，最多可缩进6级
link	链接插入工具
headings	段落类型（标题1-6、常规）
list-ul	无序列表
list-ol	有序列表
blockquote	引用段落
code	代码块
hr	水平线工具
media	多媒体插入工具
clear	内容清除工具
undo	撤销操作
redo	重做操作
separator	分割线，连续的多个separator将只显示为1个

braft-extension

https://github.com/margox/braft-extensions

braft-editor的拓展模块

比如文字高亮

import 'braft-editor/dist/index.css'
import 'braft-extensions/dist/code-highlighter.css'

import BraftEditor from 'braft-editor'
import CodeHighlighter from 'braft-extensions/dist/code-highlighter'

const options = {
  includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
  excludeEditors: ['editor-id-2']  // 指定该模块对哪些BraftEditor无效
}

BraftEditor.use(CodeHighlighter(options))

braft-utils

https://github.com/margox/braft-utils

Braft-editor的工具包

包括把html解析成字符串、插入html等