首页 > 其他分享 >富文本编辑器 react-quill的使用介绍

富文本编辑器 react-quill的使用介绍

时间:2023-02-28 19:58:31浏览次数:45  
标签:文本编辑 工具栏 自定义 react 使用 quill

在日常开发中,我们经常会有使用富文本输入的需求, react-quill是相对比较好用且免费的富文本编辑器,有着主流的黑白清新风,美观,支持hignlight.js,同样支持行内编辑模式,并可自定义下面就是使用的介绍。

1. react-quill的安装

引入的代码是npm install react-quill --save

 react-quill支持主题,例如此处的主题就是theme="snow",这也是标准主题

2.富文本编辑器工具栏的设置
react-quill API 提供了一种使用格式名称数组配置默认工具栏图标的简单方法

 

 我们可以加入这些工具栏就可以拥有富文本的各种功能

 

 同时我们还可以自定义工具栏

 

 

这样我们就可以自定义一个加粗的工具栏了。

 

标签:文本编辑,工具栏,自定义,react,使用,quill
From: https://www.cnblogs.com/AllenPan/p/17165733.html

相关文章

  • react-native学习记录1(都是坑,各种版本问题,让人望而却步)
    1.环境搭建https://zhuanlan.zhihu.com/p/528196912?utm_id=02.创建项目npxreact-nativeinitsomeProject--version0.66.0npxreact-nativerun-android生命周期,路由,......
  • 阿里前端二面常考react面试题(必备)
    说说React组件开发中关于作用域的常见问题。在EMAScript5语法规范中,关于作用域的常见问题如下。(1)在map等方法的回调函数中,要绑定作用域this(通过bind方法)。(2)父组件传递......
  • 升级到React-Router-v6
    前言近期完成了公司新项目的开发,相关的技术栈都用到了最新版本,reactrouter也使用了v6的版本,所以借这个机会自己再梳理下reactrouterv5与v6的区别,以及v6一些新......
  • 滴滴前端二面必会react面试题指南
    在React中如何处理事件为了解决跨浏览器的兼容性问题,SyntheticEvent实例将被传递给你的事件处理函数,SyntheticEvent是React跨浏览器的浏览器原生事件包装器,它还拥有......
  • 美团前端经典react面试题整理
    react强制刷新component.forceUpdate()一个不常用的生命周期方法,它的作用就是强制刷新官网解释如下默认情况下,当组件的state或props发生变化时,组件将重新渲染。......
  • #yyds干货盘点 react笔记之引入FontAwesome
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • React课堂笔记
    一、概要 React是用于构建用户界面的MVVM框架。React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之一。官网:h......
  • React学习笔记(二)—— JSX、组件与生命周期
    一、JSX1.1、什么是JSX?JSX=JavaScriptXML,这是React官方发明的一种JS语法(糖)概念:JSX是JavaScriptXML(HTML)的缩写,表示在JS代码中书写HTML结构设想如下变量声明:......
  • 简述react、redux、react-redux、redux-saga、dva之间的关系
    【react】定位:React是一个用于构建用户界面的JavaScript库。特点:它采用声明范式来描述应用,建立虚拟dom,支持JSX语法,通过react构建组件,能够很好的去复用代码;缺点......
  • React中重用代码的技术
    1.RenderProp具有renderprop的组件接受一个返回React元素的函数,并在组件内部通过调用此函数来实现自己的渲染逻辑,具体来说renderprop是一个用于告知组件需要渲......