vue-quill-editor加粗失效
时间: 2023-07-12 09:09:59 浏览: 137
如果你在使用 `vue-quill-editor` 编辑器时,发现加粗等功能失效,可能是因为缺少了 Quill 的样式文件。
解决方法是在你的 `index.html` 文件头部加入以下代码来引入 Quill 的样式文件:
```html
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
```
如果你已经正确引入了 Quill 的样式文件,但是加粗等功能仍然失效,可能是因为你的配置项不正确。可以参考以下代码进行配置:
```javascript
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
},
data() {
return {
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗,斜体,下划线,删除线
['blockquote', 'code-block'], // 引用,代码块
[{ 'header': 1 }, { 'header': 2 }], // 标题,键值对的形式;1、2表示字体大小
[{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
[{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
[{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
[{ 'direction': 'rtl' }], // 文本方向
[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
[{ 'color': [] }, { 'background': [] }], // 字体颜色,字体背景颜色
[{ 'font': [] }], // 字体
[{ 'align': [] }], // 对齐方式
['clean'], // 清除文本格式
['link', 'image', 'video'] // 链接、图片、视频
]
},
// 其他配置项
},
content: ''
}
}
}
```
其中,`toolbar` 数组中包含了所有可用的工具栏功能,包括加粗、斜体、下划线、删除线等。确保你的配置项中包含了这些功能即可正常使用加粗等功能。
阅读全文