本文将介绍如何在Vue项目中使用quill-editor富文本编辑器，并实现为其工具栏按钮添加title属性的功能，以增强用户体验。
在使用Quill-editor组件时，默认的工具栏按钮都是英文标识，并且缺乏标题提示，这给非英语环境下的用户带来了不便。为了解决这个问题，可以自定义实现对quill-editor中的工具栏添加中文title提示。
首先，在项目中创建一个名为`quill-title.js`的新文件：
```javascript
const titleConfig = {
ql-bold: 加粗,
ql-color: 颜色,
ql-font: 字体,
ql-code: 插入代码,
ql-italic: 斜体,
ql-link: 添加链接,
ql-background: 背景颜色,
ql-size: 字体大小,
ql-strike: 删除线
};
```
接下来，编写一个名为`addQuillTitle`的函数来遍历工具栏中的所有按钮和下拉菜单，并添加对应的title属性：
```javascript
export function addQuillTitle() {
const oToolBar = document.querySelector(.ql-toolbar);
const aButton = oToolBar.querySelectorAll(button);
const aSelect = oToolBar.querySelectorAll(select);
aButton.forEach(function (item) {
if (item.className === ql-script) {
item.value === sub ? item.title = 下标 : item.title = 上标;
} else if (item.className === ql-indent) {
item.value === +1 ? item.title = 向右缩进 : item.title = 向左缩进;
} else {
item.title = titleConfig[item.classList[0]];
}
});
aSelect.forEach(function (item) {
item.parentNode.title = titleConfig[item.classList[0]];
});
}
```
在Vue组件中，需要引入`quill-editor`和刚才创建的`addQuillTitle`函数。并在`mounted`生命周期钩子中调用该函数以确保富文本编辑器加载完成后执行：
```html
```
通过这种方式，当鼠标悬停在quill-editor工具栏的各个按钮上时，将会显示对应的中文title提示，极大地提高了用户体验。
此外，如果想要自定义vue-quill-editor的toolbar选项，可以创建一个数组配置然后传递给`quillEditor`组件的`toolbar`属性。例如：
```javascript
const toolbarOptions = [
[bold, italic, underline],
[{ header: [1, 2, 3, false] }],
[{ list: ordered }, { list: bullet }]
];
export default {
data() {
return {
content:
freddy
,
toolbarOptions,
};
}
};
```
然后在模板中使用这个配置：
```html
```
这样，你就可以完全控制工具栏的布局和功能，并且可以通过`titleConfig`为每个自定义按钮添加中文title提示。
5星
