react项目封装富文本编辑器_react 富文本_情非得已小猿猿的博客

相关文章推荐
粗眉毛的沙滩裤 · 合肥六小荣城分校举行庆六一第十四届校园文化艺 ...· 1 周前 ·
行走的苹果 · 《逃出大英博物馆》，怎么就出圈了？ | ...· 4 月前 ·
爱喝酒的篮球 · cad快速看图会员多少钱一年-百度经验· 8 月前 ·
才高八斗的松球 · 八目筝吹与胜者为王那些事_哔哩哔哩_bili ...· 9 月前 ·
旅行中的包子 · 阿凡达 2：水之道 - 知乎· 1 年前 ·
// react-quill 富文本依赖样式
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// quill-emoji 表情依赖样式
import quillEmoji from 'quill-emoji';
import "quill-emoji/dist/quill-emoji.css";
const { EmojiBlot, ShortNameEmoji, ToolbarEmoji, TextAreaEmoji } = quillEmoji;
Quill.register({
    'formats/emoji': EmojiBlot,
    'modules/emoji-shortname': ShortNameEmoji,
    'modules/emoji-toolbar': ToolbarEmoji,
    'modules/emoji-textarea': TextAreaEmoji,
    // 'modules/ImageExtend': ImageExtend, //拖拽图片扩展组件
}, true);
3、创建class组件
 
 value 富文本回显的内容
onChange 通过函数传给父组件的值 
// 父子组件通信参数
interface Props {
    value: string  // 回显的传入的value
    onChange: (value: string) => void // 通过参数传给父组件的值
class ReactQuillWrap extends Component<Props, any>{
    reactQuillRef: any = null;
    // 自定义工具栏
    modules: any = {
        toolbar: {
            container: []
    constructor(props: any) {
        super(props);
        this.state = {}
    render() {
        return (
            <ReactQuill
                value={this.props.value}
                modules={this.modules}
                ref={(el) => { this.reactQuillRef = el }}
                onChange={this.props.onChange.bind(this)}
export default ReactQuillWrap;
4、配置自定义的工具栏
 
    modules: any = {
        toolbar: {
            container: [
                [{ 'size': ['small', false, 'large', 'huge'] }], //字体设置
                // [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //标题字号，不能设置单个字大小
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
                ['link', 'image'], // a链接和图片的显示
                [{ 'align': [] }],
                    'background': ['rgb(  0,   0,   0)', 'rgb(230,   0,   0)', 'rgb(255, 153,   0)',
                        'rgb(255, 255,   0)', 'rgb(  0, 138,   0)', 'rgb(  0, 102, 204)',
                        'rgb(153,  51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)',
                        'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)',
                        'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)',
                        'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)',
                        'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)',
                        'rgb(136, 136, 136)', 'rgb(161,   0,   0)', 'rgb(178, 107,   0)',
                        'rgb(178, 178,   0)', 'rgb(  0,  97,   0)', 'rgb(  0,  71, 178)',
                        'rgb(107,  36, 178)', 'rgb( 68,  68,  68)', 'rgb( 92,   0,   0)',
                        'rgb(102,  61,   0)', 'rgb(102, 102,   0)', 'rgb(  0,  55,   0)',
                        'rgb(  0,  41, 102)', 'rgb( 61,  20,  10)']
                }],
                    'color': ['rgb(  0,   0,   0)', 'rgb(230,   0,   0)', 'rgb(255, 153,   0)',
                        'rgb(255, 255,   0)', 'rgb(  0, 138,   0)', 'rgb(  0, 102, 204)',
                        'rgb(153,  51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)',
                        'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)',
                        'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)',
                        'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)',
                        'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)',
                        'rgb(136, 136, 136)', 'rgb(161,   0,   0)', 'rgb(178, 107,   0)',
                        'rgb(178, 178,   0)', 'rgb(  0,  97,   0)', 'rgb(  0,  71, 178)',
                        'rgb(107,  36, 178)', 'rgb( 68,  68,  68)', 'rgb( 92,   0,   0)',
                        'rgb(102,  61,   0)', 'rgb(102, 102,   0)', 'rgb(  0,  55,   0)',
                        'rgb(  0,  41, 102)', 'rgb( 61,  20,  10)']
                }],
                ['clean'], //清空
                ['emoji'], //emoji表情，设置了才能显示
                ['video2'], //我自定义的视频图标，和插件提供的不一样，所以设置为video2
            handlers: {
                'image': this.imageHandler.bind(this), //点击图片标志会调用的方法
        // ImageDrop: true,
        'emoji-toolbar': true,  // 是否展示出来
        "emoji-textarea": false, // emoji是否展示在文本框
        "emoji-shortname": true,
5、上传图片方法
 
    imageHandler() {
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();
        input.onchange = () => {
            const file = input.files ? input.files[0] : '';
            const fd = new FormData();
            fd.append('file', file);
            // const hide = message.loading('上传中...', 0);
            uploadSubmit(getSellerId(), fd).then((res: any) => {
                console.log('res===', res)
                if (res?.code === '0') {
                    let quill = this.reactQuillRef.getEditor(); // 获取到编辑器本身
                    const cursorPosition = quill.getSelection().index; // 获取当前光标位置
                    quill.insertEmbed(cursorPosition, "image", res.url); // 插入图片 
                    quill.setSelection(cursorPosition + 1); // 光标位置加1
                    // hide();
            });
二、父组件使用
 
1、引入封装的组件
 
import ReactQillWrap from 'components/reactQuill';
2、render渲染
 
 content 富文本内容回显值
setFieldsValue 设置表单值
handleChange 接收子组件的富文本内容 
// 数据回显
componentDidMount() {
    const currentItem = this.props.current;
    if (currentItem) {
        this.form.current?.setFieldsValue({
            name: currentItem.name,
            content: currentItem.content
// 接收子组件的值
handleChange(value: string) {
    this.setState({ content: value })
// 表单嵌套
<Form.Item label="公司内容" name="content" initialValue="" rules={[{ required: true }]}>
    <ReactQillWrap value={this.state.content} onChange={this.handleChange.bind(this)} />
</Form.Item>
                    一、富文本组件封装1、安装依赖yarn add react-quill 富文本依赖yarn add quill-emoji 表情依赖2、引入依赖// react-quill 富文本依赖样式import ReactQuill, { Quill } from 'react-quill';import 'react-quill/dist/quill.snow.css';// quill-emoji 表情依赖样式import quillEmoji from 'quill-emoji';
				react-editor 终于回归了！！
已经过去 4 年多了……现在 react-editor 又回来了，带有完全 TS 和 REACT-HOOKS 集成的富文本编辑器，带有 TS 和 React-hooks Polyfill 解决方法，通过 CSS 方法使用 React < 16.8 Placeholder：focus()、insertHTML(s) ), insertText(s) Auto saveRange, restoreRange, moveToEnd 使用 value/onChange, defaultValue/onChange In-web-image, File handleDrop processHTML, processText wip 1.x Legacy: https://github.com/fritx/react- editor/tree/1.x 2.0-alpha Demo: https://fritx.github.io/react-editor npm i -S react-editor import { Editor } from 'react
				##react中quill的使用
近期使用由于项目需要一款富文本编辑框，本来打算试着使用drift.js写一款富文本编辑器。但由于时间比较紧急最后选择引用第三方插件，在众多富文本插件中初步选择了Quill和CKEditor5，最后选择了简单便捷的Quill。下面是目录：
配置toolbar
toolbar进一步自定义字体
toolbar自定义上传图片
引入插件：
通过npm inst...
				支持拖拽  复制  截图  excel  ----------------------------------------------------------------------------------------------------------------------------------------------复制代码
 * Created by zhanglei on 2017/5/23.
import React, { Component, PropTypes } from 'react';
import { Icon,Modal,message } from 'antd';
import ContentEditable from 'react-contenteditable'
import './edit.less'
export default class Editor extends Component {
    static propTypes = {
        className: PropTypes.string,
        value:PropTypes.string,
        editColor:PropTypes.string,
    constructor(props){
        super(props);
        ['inputTextChange','onchangefile','onpaste','ondrop','onParseOrDrop'].map(item=>this[item]=this[item].bind(this));
        this.state={
            value:null,
            tableData:[],
            linkModel:false,
            visible:false,
            isColor:false,
            myDisabled:false,
            isEdit:true,
            isFace:false,
            isBackground:false,
            linkValue:null,
            editStatus:[
                {label:'加粗',value:'bold',icon:'zitijiacu'},
                {label:'斜体',value:'italic',icon:'zitixieti'},
                {label:'下划线',value:'underline',icon:'xiahuaxian'},
                {label:'链接',value:'createLink',icon:'lianjie'}
            fontSizeData:[
                {title:'大号',value:'h1',icon:'H1'},
                {title:'中号',value:'h2',icon:'h2'},
                {title:'正常',value:'h3',icon:'h3-copy-copy'},
                {title:'小号',value:'h4',icon:'h4'}
            isSent:true,
            colorData:[
                'red','orange','yellow','#01FF01','#98F5FF','#8686FF','rgb(216, 154, 255)', '#fff',
                '#DE1607','#E49402','#E2E205','#04DE04','rgb(71, 237, 255)','#6363F9','rgb(204, 123, 255)', 'rgb(206, 205, 205)',
                '#C10303','#D08702','#C5C503','#07C307','rgb(0, 221, 245)','#4C4CFB','rgb(184, 70, 255)', 'rgb(183, 183, 183)',
                '#960505','#AB7005','#ABAB03','#02A902','rgb(6, 171, 189)','#3333FF','rgb(167, 25, 255)', 'rgb(148, 148, 148)',
                '#710303','#989805','#989805','#059C05','rgb(9, 138, 152)','blue','#A020F0', 'rgb(76, 75, 75)',
                '#5D0404',' #757504','#757504','green','rgb(2, 99, 109)','blue','#A020F0', '#000','rgb(56, 2, 2)'
    componentDidMount(){
        document.addEventListener('click',this.documentClick);
    componentWillReceiveProps(nextProps){
        if('value' in nextProps&&this;.state.editValue !== nextProps.value){
            this.setState({editValue:nextProps.value})
    //全局取消隐藏颜色框
    documentClick=(e)=>{
        const {isColor,isBackground} = this.state;
        if(isColor||isBackground){
            let en = e.srcElement||e.target;
            const name = '.color-content';
            while(en){
                if(en.className&&en;.className === name.replace('.','')){
                    return;
                en = en[removed];
            this.setState({isColor:false,isBackground:false});
    //卸载颜色框
    componentWillUnmount(){
        document.removeEventListener('click',this.documentClick)
     * <粘贴功能>
     * @param onParseOrDrop 通用方法
				富文本编辑器常用于网络上各种形式的内容展示，从简单的静态博客到复杂的内容管理系统。它应用于多种应用程序，如博客、文章、列表以及更强大的界面 —— 电商网站商品详情和博客上的。然而，从这么多功能各异的编辑器中挑选出一个合适的并不容易。
我测评了 5 款 React 富文本编辑器，比较了他们编辑器的核心功能， 希望我的测评可以帮你找到最合适你应用场景的编辑器。如果你完全不会前端，也不用担心，可以使用卡拉云，仅需简单拖拽即可生成「富文本」编辑器
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {EditorState, convertToRaw, ContentState} from 'draft-js'
import {Editor} from 'react-draft-wysiwyg'
import draftToHtml from '
				quill功能拓展及扩展属性quill自定义字号quill自定义字体源代码展示自定义行高图片删除
最近一直在使用若依的vue分离版本后台管理，由于项目中需要富文本模块较多及需要自定义添加属性，导致现有的quill富文本不满足需求。经百度对比多个富文本优缺点，最后还是因为quill扩展性强，决定采用了quill，于是便有了下面这篇记录。
quill自定义字号
自定义字号功能是最先增加的，由于经验不足也踩了不少坑，刚开始网上文章都是让去修改源码来增加字号，自己也照着改了下，刚开始确实没问题，但是随着时间推移，部
				import React,{Component} from 'react';
import ReactQuill,{ Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Button ,Modal,message} from 'antd';
import MYURL  from '...
				富文本编辑器是一种能够让用户在编辑文本时进行格式化的工具。要编写一个完整的富文本编辑器，需要考虑以下几个方面：
1. 用户界面：编辑器需要有一个易于使用和直观的用户界面，包括菜单、工具栏和编辑区。
2. 文本编辑：编辑器需要能够支持常见的文本编辑功能，如插入文本、删除文本、复制和粘贴文本等。同时，编辑器也需要能够支持撤销和重做功能，以便用户在编辑过程中能够轻松地撤销和恢复之前的操作。
3. 文本格式：编辑器需要支持各种文本格式，如加粗、倾斜、下划线、字体、字号等。同时，编辑器还应该支持多种颜色、对齐方式、列表、表格等格式。
4. 图片和多媒体：编辑器需要支持插入图片和其他多媒体元素，例如音频和视频。
5. 导出文本：编辑器需要能够将编辑的文本导出为各种格式，如HTML、Markdown、PDF等，以方便用户在不同的场合下使用。
要实现一个完整的富文本编辑器需要一定的编程技术和知识，可以使用各种编程语言和框架，如JavaScript、React、Angular、Vue.js等。同时，也可以使用现成的编辑器组件库，如Quill、TinyMCE、CKEditor等，这些组件库已经实现了上述功能，可以方便地嵌入到自己的应用程序中。