quill编辑器使用

最新推荐文章于 2024-09-13 22:01:48 发布

Baymax627

最新推荐文章于 2024-09-13 22:01:48 发布

阅读量2.6k

点赞数 1

分类专栏：前端 react 文章标签： javascript react quill 编辑器

本文链接：https://blog.csdn.net/jl381169437/article/details/112477110

版权

本文介绍了Quill编辑器的使用，包括处理Toolbar中文显示、React自定义组件插入、解决Tooltip遮挡问题、添加Handler及链接校验等细节。并提供了相关代码示例。

摘要由CSDN通过智能技术生成

官方git： https://github.com/quilljs/quill/
官方文档：https://quilljs.com/
中文文档：https://kang-bing-kui.gitbook.io/quill/

编辑器是个正经编辑器，就是文档太不正经了

基本的一些使用文档还是可以的，基础用例代码如下

import React, { useEffect } from 'react';
import Quill, { QuillOptionsStatic } from 'quill';
import 'quill/dist/quill.snow.css';
import { TranslatorWrapper } from './translator';

const QuillEditor = () => {
  useEffect(() => {
    const toolbarOptions = [
      [{ header: [false, 1, 2, 3, 4, 5, 6] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ align: '' }, { align: 'center' }, { align: 'right' }],
      ['link'],
      ['image'],
    ];
    const options: QuillOptionsStatic = {
      // boundsDOM元素或者一个DOM元素的css选择器，其中编辑器的UI元素（例如：tooltips）应该被包含其中。目前，只考虑左右边界 
      // 这个属性很管用，特别是在一些布局中，不设置边界的话，ql-tooltip会溢出编辑器，导致被遮挡，并且有些时候，布局已经确定，z-index都不能这解决遮挡问题
      bounds: document.getElementById('quill_editor') as HTMLElement,
      debug: 'false',
      modules: {
        imageUpload: true,
        toolbar: toolbarOptions,
      },
      placeholder: '',
      theme: 'snow',
    };
    const editor = new Quill('#quill_editor', options);
    setQuillEditor(editor);
  }, []);

  return (
    <TranslatorWrapper>
      <div id="quill_editor"></div>
    </TranslatorWrapper>
  );
};

export default QuillEditor;

基本样例展示:

最低0.47元/天解锁文章