58

GitHub - margox/braft-editor: 美观易用的React富文本编辑器，基于draft-js开发

 5 years ago
source link: https://github.com/margox/braft-editor
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

README.md

Braft Editor

一个基于draft-js的Web富文本编辑器，适用于React框架，兼容主流现代浏览器。

使用文档 在线演示

注意，项目当前版本为2.x，如果你使用的是1.x.x版本，请参阅旧版本文档

使用前请了解

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 Extensions

表格扩展模块已发布测试版本，请升级braft-editor和braft-utils到最新版本，并安装最新版本的braft-extensions，使用方式请查看[表格扩展模块]

交流反馈请加QQ群：725634541

特性

  • 完善的文本内容编辑功能
  • 诸多开放的编辑接口，良好的可扩展性
  • 允许插入图片、音视频等多媒体内容
  • 允许自定义多媒体内容的上传接口
  • 允许设置图片的左右浮动（即文字绕排功能）
  • 允许设置编辑器可用的颜色列表、字号以及字体
  • 允许自定义需要展示的控制按钮和展示顺序
  • 允许增加额外的自定义按钮
  • 多语言支持（目前已支持简体中文、繁体中文、英文、波兰语、日语、韩语、土耳其语）
  • ...更多特性开发中

鸣谢

近期更新记录

  • 2019-08-06 v2.3.8
    • 修复a标签href中带有javascript语句导致警告的问题
    • 合并PR#560，#593，#588，#582
  • 2019-06-20 v2.3.7
    • 修复问题#542、#541、#467
    • 修复问题#512并新增imageResizable属性，允许关闭图片的拖动调整尺寸功能
  • 2019-06-18 v2.3.6
    • 支持不选择文字的情况下直接插入链接
    • 新增allowInsertLinkText属性，允许直接插入链接时输入链接文字，默认false
  • 2019-06-14 v2.3.5
    • 完善index.d.ts
  • 2019-06-11 v2.3.4
    • 支持部分更多自定义html属性的保留(需要升级braft-convert至v2.3.0)
    • 加入韩语(kr)、日语(jpn)、土耳其语(tr)
    • 加入更多hooks支持
  • 2019-05-28 v2.3.2
    • 修复传入RAW字符串无法正常解析为问题
  • 2019-05-20 v2.3.1
    • 修复v2.3.0的致命bug
  • 2019-05-20 v2.3.0
    • 支持嵌套列表以及部分内部细节优化，感谢SyMind的贡献:PR#486,PR#485
    • 优化在SSR中使用的问题
  • 2019-04-29 v2.2.10
    • 图片支持拖动调整大小，感谢ArthasDragon的贡献！
    • 优化使用纯数字初始化编辑器内容异常的问题，感谢WzFFzW的贡献！
    • 新增fixPlaceholder属性(Boolean)，用于修复部分情况下placeholder文本显示异常的问题，默认false
    • 优化forceRender
  • 2019-03-06 v2.2.9
    • 修改index.d.ts
  • 2019-02-22 v2.2.7
    • 新增用于美化输出HTML的样板CSS文件(node_modules/braft-editor/dist/output.css)
  • 2019-02-22 v2.2.6
    • 优化blockRenerMap属性，支持传入一个返回blockRenerMap对象的函数
    • 优化上下标样式的设置
    • 优化编辑器内文本缩进和文本对齐同事存在时的显示效果
  • 2019-01-11 v2.2.4
    • 新增editorId属性，作用与id属性完全一样，用于解决在Ant Design Form组件中id属性会被覆盖导致无法正常使用扩展模块的问题
  • 2019-01-11 v2.2.2
    • 优化音视频和嵌入式媒体的播放交互，改为在模态框中播放
  • 2019-01-06 v2.2.1
  • 2018-12-29 v2.2.0
    • 新增d.ts文件，在TypeScript项目中使用更友好，感谢幅川大佬的贡献！
    • 修复弹窗组件中的输入框无法使用的问题
    • 其他优化和问题修复：Issue#336,Issue#331,Issue#328

查看历史更新记录

安装

# 使用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属性，因此你也可以将本编辑器作为一个非受控组件来使用。

更多介绍请查看详细文档

Buy me a beer

如果你想感谢本编辑器为你的项目节省了时间，或者单纯地喜欢这个编辑器，可以扫码赞赏几块钱来请我喝杯啤酒喔！

68747470733a2f2f62726166742e6d6172676f782e636e2f696d616765732f7172636f64652d616c697061792e706e67   68747470733a2f2f62726166742e6d6172676f782e636e2f696d616765732f7172636f64652d7765636861742e706e67

    支付宝           微信


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK