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

更新日期: 2018-12-15阅读量: 2821标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

一文看懂React Hooks

React Hooks是从React 16.8版本推出的新特性,目的是解决React的状态共享以及组件生命周期管理混乱的问题。React Hooks的出现标志着,React不会再存在无状态组件的情况,React将只有类组件和函数组件的概念

react-router v4 按需加载的配置方法

在react项目开发中,当访问默认页面时会一次性请求所有的js资源,这会大大影响页面的加载速度和用户体验。所以添加按需加载功能是必要的,以下是配置按需加载的方法

函数式的React

React 是现在最流行的 JavaScript 库之一。使用 React 可以非常轻松地创建 Web 用户交互界面。 它的成功有很多因素,但也许其中一个因素是清晰有效的编程方法。在 React 的世界中,UI 是由一个一个组件所组成的。

必须要会的 50 个React 面试题

如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性

为什么 React 源码不用 TypeScript 来写?

Facebook 是一家技术很厉害的公司,能够超前做一些外界没有的东西,但等外界把这个东西做出来了, Facebook 就发现自己迁移不过去了,被自己过去超前做的技术锁定了,因为迁移成本太高

React使用propTypes进行类型检查

注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。随着你的应用的开发,你会使用类型检查的方法来捕获很多bug。对于一些应用,你可以使用js扩展就像Flow或者TypeScript去对整个应用进行类型检查

Context - React跨组件访问数据的利器

Context提供了一种跨组件访问数据的方法。它无需在组件树间逐层传递属性,也可以方便的访问其他组件的数。在经典的React应用中,数据是父组件通过props向子组件传递的

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

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

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

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

react hook超实用的用法和技巧分析

react hook发布也已经有几个月了,相信有部分人已经开始使用了,还有些人在犹豫要不要用,可能更多人安于现状,没有要用的打算,甚至还有很多公司的react版本是15或以下的,迫于升级的难度没有使用。以我个人的观点,要不要使用react hook呢?

点击更多...

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