javascript - 如何在 react-quill 工具栏中实现自定义代码块按钮

Question

我正在尝试实现一个自定义代码块按钮以插入react-quill，但我不确定如何继续。我知道我需要为代码块实现一个处理程序（我将其命名为code-block），然后添加一个类名为 `ql-code-block 的按钮，但是如何使编辑器使用 html 和 css 显示特定代码块的样式?

import React, { useState } from 'react';

import { useQuill } from 'react-quilljs';

import 'quill/dist/quill.snow.css'; // Add css for snow theme

export default () => {
  const theme = 'snow';

  const modules = {
    toolbar: {
      container: '#toolbar',
      handlers: {
        'code-block': function () {
          console.log('Code-block'); <---- How to implement the handler here
        },
      },
    },
    clipboard: {
      matchVisual: false,
    },
    
  };

  const placeholder = 'Compose an epic...';

  const formats = ['size', 'bold', 'script'];


  const { quill, quillRef } = useQuill({
    theme,
    modules,
    formats,
    placeholder,
  });

  const [content, setContent] = useState('');


  React.useEffect(() => {
    if (quill) {
      quill.on('text-change', () => {
        setContent(quill.root.innerHTML);
      });
    }
  }, [quill]);

  const submitHandler = (e) => {};

  return (
    <div style={{ width: 500, height: 300 }}>
      <div ref={quillRef} />
      <div id='toolbar'>
        <select className='ql-size'>
          <option value='small' />
          <option selected />
          <option value='large' />
          <option value='huge' />
        </select>
        <button className='ql-bold' />
        <button className='ql-code-block' />
        <button className='ql-script' value='sub' />
        <button className='ql-script' value='super' />
      </div>
      <div id='editor' />

      <form onSubmit={submitHandler}>
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
};

标签： javascriptreactjsrich-text-editor