React项目中使用轻量富文本编辑器

React项目中使用轻量富文本编辑器

安装

npm install react-quill

创建编辑器组件

// src/MyQuillEditor.js
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 引入样式

const MyQuillEditor = () => {
  const [value, setValue] = useState('');

  return (
    <div>
      <h2>My Quill Editor</h2>
      <ReactQuill value={value} onChange={setValue} />
    </div>
  );
};

export default MyQuillEditor;

在App.js中使用

// src/App.js
import React from 'react';
import MyQuillEditor from './MyQuillEditor';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Quill Editor</h1>
      </header>
      <main>
        <MyQuillEditor />
      </main>
    </div>
  );
};

export default App;

以上就完成最简单的富文本配置与使用

如果需要自定义功能可以了解更大参数

基本配置参数

• theme: 设置编辑器的主题，可以是'snow'（默认）或'bubble'。
• modules: 配置编辑器的模块，如工具栏、剪贴板、历史记录等。
• placeholder: 设置编辑器的占位符文本。
• readOnly: 设置编辑器是否只读。
• bounds: 设置编辑器的边界，默认是document.body。
• formats: 定义允许的格式。

参数配置实例：

// src/MyQuillEditor.js
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 引入样式

const MyQuillEditor = () => {
  const [value, setValue] = useState('');

  const modules = {
    toolbar: [
      [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'align': [] }],
      ['link', 'image'],
      ['clean']
    ],
    clipboard: {
      // toggle to add extra line breaks when pasting HTML:
      matchVisual: false,
    },
    history: {
      delay: 2000,
      maxStack: 500,
      userOnly: true
    }
  };

  const formats = [
    'header', 'font', 'size',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'color', 'background', 'align'
  ];

  return (
    <div>
      <h2>My Quill Editor</h2>
      <ReactQuill
        value={value}
        onChange={setValue}
        modules={modules}
        formats={formats}
        placeholder="Compose an epic..."
        theme="snow"
      />
    </div>
  );
};

export default MyQuillEditor;

配置参数详细说明

• theme: 设置编辑器的主题。

  theme="snow"
  

• modules: 配置编辑器的模块。

  jsx复制代码const modules = {
    toolbar: [
      [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'align': [] }],
      ['link', 'image'],
      ['clean']  // 清除格式按钮
    ],
    clipboard: {
      matchVisual: false,
    },
    history: {
      delay: 2000,
      maxStack: 500,
      userOnly: true
    }
  };
  

• formats: 定义允许的格式。

  const formats = [
    'header', 'font', 'size',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'color', 'background', 'align'
  ];
  

• placeholder: 设置编辑器的占位符文本。

  placeholder="Compose an epic..."
  

• readOnly: 设置编辑器是否只读。

  readOnly={false}
  

• bounds: 设置编辑器的边界。

  bounds={'.app'}
  

完整的示例组件

结合以上配置参数，下面是一个完整的Quill编辑器组件示例：

// src/MyQuillEditor.js
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 引入样式

const MyQuillEditor = () => {
  const [value, setValue] = useState('');

  const modules = {
    toolbar: [
      [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'align': [] }],
      ['link', 'image'],
      ['clean']  // 清除格式按钮
    ],
    clipboard: {
      matchVisual: false,
    },
    history: {
      delay: 2000,
      maxStack: 500,
      userOnly: true
    }
  };

  const formats = [
    'header', 'font', 'size',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'color', 'background', 'align'
  ];

  return (
    <div>
      <h2>My Quill Editor</h2>
      <ReactQuill
        value={value}
        onChange={setValue}
        modules={modules}
        formats={formats}
        placeholder="Compose an epic..."
        theme="snow"
        bounds={'.app'}
        readOnly={false}
      />
    </div>
  );
};

export default MyQuillEditor;

如果需要学习更多

官网地址：https://quilljs.com/

gitHub：https://github.com/slab/quill