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 主题:
.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
:
npm install react-quill
2、在您的 React 应用中导入:
代码语言:javascript复制import ReactQuill from 'react-quill';
3、在您的 React 应用中使用,参考我下面的方法给工具栏添加 title
:
...
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