react 富文本编辑器react-quill

闲暇之余不忘学习，提升自己，知识在于积累，更是一笔财富。

看完文章，感谢各位支持一下呗！

实现步骤

安装富文本编辑器：yarn add react-quill
导入富文本编辑器组件以及样式文件
渲染富文本编辑器组件
通过 Form 组件的 initialValues 为富文本编辑器设置初始值，否则会报错
调整富文本编辑器的样式

代码实现

pages/Publish/index.js

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

const Publish = () => {
  return (
    // ...
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 16 }}
// 注意：此处需要为富文本编辑表示的 content 文章内容设置默认值
      initialValues={{ content: '' }}
>
      <Form.Item
        label="内容"
        name="content"
        rules={[{ required: true, message: '请输入文章内容' }]}
>
        <ReactQuill
          className="publish-quill"
          theme="snow"
          placeholder="请输入文章内容"
/>
      </Form.Item>
    </Form>
)
}

pages/Publish/index.scss

.publish-quill {
.ql-editor {
min-height: 300px;
}
}

react 富文本编辑器react-quill相关推荐

react html编辑器,wangEditor富文本编辑器+react+antd的使用
搜索热词 1.github上发现富文本编辑器: 2.结合react+antd的具体使用: 案例使用场景:MyModal为弹窗,弹窗显示编辑名称及描述.描述使用wangeditor富文本编辑器实现. ...
2021 年 React 的 5 大富文本编辑器
5大富文本编辑器今天,富文本编辑器被用于许多应用中,包括简单的博客和复杂的内容管理系统.然而,选择一个并不容易,因为有很多具有不同功能的编辑器. 因此,在这篇文章中,我将评估5个React的富文本编 ...
quill——简单的富文本编辑器
先介绍一下一般网页如何实现 quill 富文本编辑器引入 quill.js 文件 <script src="https://cdn.quilljs.com/1.3.3/quill.j ...
前端Quill实现富文本编辑器
目录前言 Quill 介绍 Quill 简单实现效果前言网页上经常会需要用户输入一些文本或者代码块,所以需要富文本编辑器来支持.常见的富文本编辑器有Quill.Draft.js.TinyMCE ...
quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
wangeditor富文本编辑器使用过程中遇到的问题以及解决办法
背景我的项目之前用的富文本编辑器是quill,之前其实考虑用过wangeditor,但是当时wangeditor V3的英文支持不友好,而我们业务是面向海外的,所以综合考虑下来用了quill. 最近 ...
vue-quill-editor富文本编辑器使用步骤
首先放上效果图目录 1.安装 2.引入到项目中 3.在页面上写组件 4.配置option 5.给工具栏鼠标悬停加上中文释义 6.上传图片到七牛云 7.自定义控制图片大小 1.安装 npm insta ...
【重点突破】—— React实现富文本编辑器
前言:富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 一.安装插件 react-draft-wysiwyg: 文本编辑器插件 dra ...
React H5 使用div自定义简单富文本编辑器
最近项目中h5端要实现图文上传,而且还要支持用户用户输入的格式,例如换行啥的,那么使用输入控件保存输入内容,图片上传控件就不合适了,因为很难知道用户的输入样式. 如果使用一些现有的富文本编辑器,貌似又 ...

react 富文本编辑器react-quill

react 富文本编辑器react-quill相关推荐

最新文章

热门文章