braft-edit 富文本编辑器

最新推荐文章于 2024-08-18 10:11:14 发布

chestnut99

最新推荐文章于 2024-08-18 10:11:14 发布

阅读量2.2k

点赞数

分类专栏： react javascript TypeScript 文章标签：前端 js 编辑器

本文链接：https://blog.csdn.net/weixin_45954775/article/details/121395966

版权

本文介绍了如何使用Braft-Editor创建一个支持自定义插入文本功能的富文本编辑器。Braft-Editor自身不包含上传功能，但允许通过uploadFn进行定制。在实现过程中，可能会遇到光标定位问题，尤其是在表单中使用时。通过setFieldValue可以解决这个问题，保持光标位置正确。

摘要由CSDN通过智能技术生成

需求：一个自定义插入文本的富文本编辑器
优点：可以自定义control
注：编辑器自身不带有上传功能，具体的上传功能需要通过uploadFn指定。media.uploadFn
一些官方文档：
中文的：https://www.yuque.com/braft-editor/be/mrgy92
braft-util源码：https://github.com/margox/braft-utils （里面没有readme）
braft-edit：https://www.npmjs.com/package/braft-editor/v/2.2.5
代码

import BraftEditor from 'braft-editor'
import {
    ContentUtils } from 'braft-utils' // braft 的工具包  insertRText insertHTML 很好用
// 找不到模块“braft-utils”或其相应的类型声明。ts(2307)
//提示上面这句话  在react-app-env.d.ts 文件里加上 declare module 'braft-utils' 这句

editorState: BraftEditor.createEditorState(null),// 创建一个空的editorState作为初始值
    



 // 保存文字表单数据
  insertLinkFormFinish = (values: any) => {
   
    const {
    editorState, httpType } = this.state
    // 插入链接
      this.setState({
   
        editorState: ContentUtils.insertText(
          editorState,
          '<a href="'