Braft Editor是基于draft-js开发的编辑器,而draft-js内部并不是直接使用HTML作为组件状态的,它自己实现了一个EditorState类型,本质上是一个JS对象;在传统富文本编辑器中的一段段的HTML内容对应到EditorState就是一个个的block块;这一点可以通过查看editorState.toRAW()进行验证。
使用EditorState代替HTML字符串的好处在于一套EditorState可以多端使用,编辑器产出的内容不再局限于只在web平台展示,(当然各个平台也需要自行实现对应的EditorState to View的转换功能),同时也和React的组件状态更加适配。
然而,上述实现方式,最大的问题在于无法将外部的HTML完美的转换为EditorState,因为其支持的样式、标签、标签属性等等极为有限,没办法将HTML中的所有特性转换为EditorState中的状态,导致在使用第三方或历史HTML字符串来初始化编辑器内容的时候,以及粘贴外部HTML内容的时候,只有被编辑器支持的少量样式和标签属性才能被保留,大部分内容将会被过滤或者忽略掉。
基于上面的缺点,如果各位的项目强依赖于原始HTML标签和属性等,则不建议使用本编辑器。
表格扩展模块已发布测试版本,请升级braft-editor和braft-utils到最新版本,并安装最新版本的braft-extensions,使用方式请查看[表格扩展模块]
交流反馈请加QQ群:725634541
allowInsertLinkText
属性,允许直接插入链接时输入链接文字,默认false
node_modules/braft-editor/dist/output.css
)# 使用yarn安装
yarn add braft-editor
# 使用npm安装
npm install braft-editor --save
编辑器支持value和onChange属性,这类似于React中原生的input组件。通常情况下,可以用典型的受控组件的形式来使用本编辑器:
import React from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
export default class EditorDemo extends React.Component {
state = {
editorState: null
}
async componentDidMount () {
// 假设此处从服务端获取html格式的编辑器内容
const htmlContent = await fetchEditorContent()
// 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorState数据
this.setState({
editorState: BraftEditor.createEditorState(htmlContent)
})
}
submitContent = async () => {
// 在编辑器获得焦点时按下ctrl+s会执行此方法
// 编辑器内容提交到服务端之前,可直接调用editorState.toHTML()来获取HTML格式的内容
const htmlContent = this.state.editorState.toHTML()
const result = await saveEditorContent(htmlContent)
}
handleEditorChange = (editorState) => {
this.setState({ editorState })
}
render () {
const { editorState } = this.state
return (
<div className="my-component">
<BraftEditor
value={editorState}
onChange={this.handleEditorChange}
onSave={this.submitContent}
/>
</div>
)
}
}
当然本编辑器也支持defaultValue属性,因此你也可以将本编辑器作为一个非受控组件来使用。
如果你想感谢本编辑器为你的项目节省了时间,或者单纯地喜欢这个编辑器,可以扫码赞赏几块钱来请我喝杯啤酒喔!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。