ReactQuill富文本编辑器汉化及工具栏增加title

2024-01-19 14:32:26 浏览数 (2)

React-Quill 是一个基于 React 的富文本编辑器组件，它可以轻松地将富文本编辑器集成到 React 应用中。可以通过 GitHub 了解他的详细功能。

React-Quill 具有许多强大的功能，包括：

  • 跨平台支持： React-Quill 可以跨平台使用，包括 Windows、Mac 和 Linux。
  • 所见即所得编辑： React-Quill 使用所见即所得编辑器，可以看到您正在编辑的内容的最终外观。
  • 丰富的工具栏： React-Quill 提供了一个丰富的工具栏，其中包含各种文本格式化选项，例如粗体、斜体、下划线、列表和链接。
  • 可扩展性： React-Quill 是可扩展的，您可以轻松地添加自己的自定义工具栏按钮或模块。
  • 易于使用： React-Quill 易于使用，即使您是 React 新手，也可以轻松地将其集成到您的应用中。

但 React-Quill 是基于 Quill 的 React 组件，不支持国际化，所以很多地方需要汉化。

我基于 React-Quill 组件封装了一个文本编辑器，并增加了中文汉化和工具栏 title 属性

中文汉化

Quill 默认使用英文界面，为了方便中文用户使用，我将其汉化成了中文。汉化过程相对简单，只需要修改对应的 css 伪类。

可以参考我下面的代码，这里的 .ql-snow 对应的是 theme 主题：

代码语言：javascript复制
.ql-snow {
  .ql-header {
    &.ql-picker {
      .ql-picker-label,
      .ql-picker-item {
        &::before {
          content: '正文';
        }
        &[data-value='1']::before {
          content: '标题1';
        }
        &[data-value='2']::before {
          content: '标题2';
        }
        &[data-value='3']::before {
          content: '标题3';
        }
        &[data-value='4']::before {
          content: '标题4';
        }
        &[data-value='5']::before {
          content: '标题5';
        }
        &[data-value='6']::before {
          content: '标题6';
        }
      }
    }
  }
  .ql-tooltip {
    &::before {
      content: '访问链接';
    }
    > .ql-action::after {
      content: '编辑';
    }
    > .ql-remove::before {
      content: '移除';
    }
    &.ql-editing {
      &[data-mode='link']::before {
        content: '链接';
      }
      .ql-action::after {
        content: '保存';
      }
    }
  }
}

工具栏 title 属性

我还在工具栏中添加了一个 title 属性，这样当用户将鼠标悬停在工具栏按钮上时，就会显示该按钮的描述，这可以帮助用户更好地理解每个按钮的功能。

使用方法

您可以通过以下步骤使用我二次开发的 React-Quill 文本编辑器：

1、安装 react-quill ：

代码语言：javascript复制
npm install react-quill

2、在您的 React 应用中导入：

代码语言：javascript复制
import ReactQuill from 'react-quill';

3、在您的 React 应用中使用，参考我下面的方法给工具栏添加 title：

代码语言：javascript复制
...
import { titleConfig } from './config';
...
const RichTextEditor: React.FC<ReactQuillProps> = ({ ...props }) => {
  // 给工具栏添加属性
  const addTitle = () => {
    // 获取工具栏的容器元素
    const toolbar = document.querySelector('.ql-toolbar');
    if (toolbar) {
      // 遍历配置对象的键值对
      for (let key in titleConfig) {
        if (titleConfig.hasOwnProperty(key)) {
          // 获取对应的按钮元素
          const button: HTMLButtonElement | null = toolbar.querySelector(key);
          // 判断是否存在
          if (button) {
            // 给按钮元素添加 title 属性，值为配置对象的值
            button.title = titleConfig[key];
          }
        }
      }
    }
  };
  useEffect(() => {
    setTimeout(() => addTitle(), 100);
  }, []);
  return (
    <ReactQuill {...props} />
  );
};

export default RichTextEditor;

标题的 titleConfig：

代码语言：javascript复制
// 定义中文 title 的配置对象
export const titleConfig: Record<string, string> = {
  '.ql-bold': '加粗',
  '.ql-color': '颜色',
  '.ql-font': '字体',
  '.ql-code': '插入代码',
  '.ql-italic': '斜体',
  '.ql-link': '添加链接',
  '.ql-background': '背景颜色',
  '.ql-size': '字号',
  '.ql-strike': '删除线',
  '.ql-script[value="super"]': '上标',
  '.ql-script[value="sub"]': '下标',
  '.ql-underline': '下划线',
  '.ql-blockquote': '引用',
  '.ql-header': '标题',
  '.ql-code-block': '代码块',
  '.ql-list[value="ordered"]': '有序列表',
  '.ql-list[value="bullet"]': '无序列表',
  '.ql-indent[value=" 1"]': '增加缩进',
  '.ql-indent[value="-1"]': '减少缩进',
  '.ql-direction': '文本方向',
  '.ql-formula': '插入公式',
  '.ql-image': '插入图片',
  '.ql-video': '插入视频',
  '.ql-clean': '清除字体样式',
};

总结

我二次开发的 React-Quill 文本编辑器具有中文汉化和工具栏 title 属性，这使得它更加适合中国用户使用。如果您正在寻找一个功能强大且易于使用的富文本编辑器组件，又要给中国用户使用，可以参考我这篇文章进行修改。

未经允许不得转载：Web前端开发资源网 » ReactQuill富文本编辑器汉化及工具栏增加title

title 编辑器 对象 富文本编辑器 配置

0 人点赞