React中富文本编辑器的技术选型调研

时间: 2018-12-15阅读: 1858标签: react

前言

富文本编辑器是项目中不可或缺的部分,目前市面上可以选择的富文本编辑器种类繁多,如何在项目中选择一款集轻量,美观,稳定,坑少,满足需求的富文本编辑器变成了团队中一个重要的问题。

现在项目中使用的是 WangEditor,为了寻找到更好的替代品,我针对 Ant Design 官方推荐的两款的富文本编辑器做了调研。Ant Design 称它们为“社区精选组件”,在心理层面上觉得应该会比较稳定,尤其是结合 Ant Design 使用。

我对这两款富文本编辑器都进行了使用,并结合目前的项目需求进行了比较。下面是我的使用体验。


react-quill

第一款富文本编辑器叫作 react-quill,是国外一个社区维护的,贡献者有二三十人。quill 在英文中是鹅毛笔的意思,听起来还是很有美感的。点击这里查看 demo

基本使用

下面是 react-quill 的最基本的用法,非常简单。

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { text: '' }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(value) {
    this.setState({ text: value })
  }

  render() {
    return (
      <ReactQuill value={this.state.text} onChange={this.handleChange} />
    )
  }
}

自定义工具

核心就是配置modules和 formats。modules是配置工具栏上的内容,即决定工具栏上有什么;formats是决定哪些工具栏选项可以启用,即决定工具栏的哪些可以生效。实例代码如下:

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    }
  }

  modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
  };

  formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ];

  render() {
    return (
      <div className="text-editor">
        <ReactQuill modules={this.modules} formats={this.formats} />
      </div>
    );
  }
}

这里还有更高级的用法,我们可以在工具栏上加入自己设计的JXS元素,但是目前的项目需求用不到,这里就不展开了。

优势

  1. 简洁美观大方。
  2. 对于用户从各种地方粘贴过来的文字兼容得很好,不管你之前带有什么奇奇怪怪的格式,统统转化成了带有<p></p>标签的的文本。
  3. 跟 Ant Design 和 React 的融入度非常高,可以很方便的放在<Form></Form>作为一个受控组件。传入的 value 就是 html 字符串,不需要做任何格式转换。

劣势

  1. 图片格式是转成了base64,这跟目前项目中图片上传方式不兼容。虽然这个问题有解决方法,React-Quill中的图片上传及显示
  2. 不支持 Excel 格式的数据。因为目前项目中使用的 WangEditor 支持表格数据,所以如果老数据中存在表格,那么替换后的表格数据显示将成为一个问题。


braft-editor

这是由中国人开发的个人项目,点这里查看 demo

基本使用

实例代码如下,需要注意的一点是,接收的 value 不再是 html 字符串了,而是editorState格式。 可以通过editorState.toHTML()得到 HTML 字符串。

import React from 'react';
import 'braft-editor/dist/index.css';
import BraftEditor from 'braft-editor';

class Braft extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: BraftEditor.createEditorState(null) };
  }
  handleChange = editorState => {
    this.setState({ editorStste });
  };
  render() {
    return (
      <BraftEditor value={this.state.editorStste} onChange={this.handleChange}/>
    );
  }
}

自定义工具栏

通过配置通过配置属性controls来自定义工具栏,也可以自定义工具栏图标的文字和样式。示例如下:

const controls = [
    'undo', 'redo', 'separator',
    {
        key: 'bold', // 使用key来指定控件类型
        title: '加粗选中文字哦', // 自定义控件title
        text: '点我加粗', // 使用自定义文案来代替默认图标(B),此处也可传入jsx
    },
    'italic', 'underline', 'strike-through'
]

优势

  1. 有“全屏”功能,可以全屏编辑内容,还是很炫酷的。
  2. 作者是中国人,文档清晰易读。

劣势

  1. 图片格式转成了base64,跟目前项目中图片上传方式不兼容。
  2. 不支持 Excel 格式的数据。


总结

这两款编辑器的稳定性和对异常文本的处理能力都强于 WangEditor,但是存在的问题是都对于表格数据不支持,所以对于老数据的显示存在风险。

来源:https://segmentfault.com/a/1190000017355480


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1595

关闭

Vue和React有什么区别与优劣?我到底应该选择哪谁?

前端开发框架从最开始的jquery时代,到后来backbone,angular1,再到现在vue和react两分天下,也才用了不到十年的光景。

解决vscode 开发react 导入绝对路径 无法跳转的问题

相对路径可正常跳转,但是在webpack配置alias使用绝对路径后无法跳转.解决办法:需要添加一个jsconfig文件,如下:

React事件处理函数必须使用bind(this)的原因

学习React的过程中发现调用函数的时候必须使用bind(this),之后直接在class中声明函数即可正常使用,但是为什么呢,博主进行了一番查阅,总结如下。

在react jsx中,为什么使用箭头函数和bind容易出现问题

因为()=>this.deleteUser(user.id)每执行一次就会生成一个新的函数,当然bind也是这样干的,所以在PureComponent的shallowCompare中认为onDeleteClick的值已经被修改,所以触发了重新渲染。看吧,使用箭头函数和bind会造成性能浪费,作为一个节约的程序员应该避免如此。

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

使用React严格模式避免过时的代码和副作用

严格模式是用于突出显示应用程序中潜在问题的工具,它不会呈现任何可见的UI。它只用于激活对其后代的额外检查和警告。严格模式不会影响生产环境。

React setState 这样用,开发直呼内行!

众所周知, React 是通过管理状态来实现对组件的管理,而setState是用于改变状态的最基本的一个方法,虽然基础,但是其实并不容易掌握,本文将结合部分源码对这个方法做一个相对深入的解析。

React事件绑定几种方法测试

es6写法的类方法默认没有绑定this,不手动绑定this值为undefined。因此讨论以下几种绑定方式。构造函数constructor中用bind绑定、在调用的时候使用bind绑定this、在调用的时候使用箭头函数绑定this、使用属性初始化器语法绑定this

深入解析React中的元素、组件、实例和节点

eact 中的元素、组件、实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念。现在,我就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字、刨根问底的同学的好奇心。

新手学习 react 迷惑的点

网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!