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

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

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

0 人点赞