vue 使用vue-quill-editor修改工具条加粗的svg文件

### 修改 Vue 项目中的 `vue-quill-editor` 加粗按钮的 SVG 图标 为了在 Vue 项目中自定义 `vue-quill-editor` 的工具栏并修改加粗按钮的 SVG 图标，可以按照以下方法操作： #### 安装依赖库 确保已经安装了 `vue-quill-editor` 库。如果尚未安装，则可以通过 npm 或 yarn 进行安装[^2]。 ```bash npm install vue-quill-editor --save # 或者使用yarn yarn add vue-quill-editor ``` #### 自定义工具栏配置 创建一个包含自定义图标的组件文件夹结构如下所示，并编写相应的代码逻辑来替换默认图标。对于加粗功能，默认情况下 Quill 使用的是 `<b>` 标签表示加粗效果，因此需要找到对应的命令名称来进行定制化处理。 假设要更改加粗按钮为新的 SVG 图形，可以在引入编辑器之前先覆盖其内部样式以及行为。具体做法是在项目的入口处（如 main.js 文件），通过 JavaScript 动态注入 CSS 和 HTML 来改变特定按钮的表现形式。 ```javascript // 导入必要的模块 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' // 创建一个新的 Quill 主题实例 const SnowTheme = require('quill/themes/snow') SnowTheme.prototype.initialize = function () { this.quill.root.setAttribute('data-theme', this.theme) const toolbarElement = document.querySelector('.ql-bold') if (toolbarElement) { // 移除旧的内容 while (toolbarElement.firstChild) { toolbarElement.removeChild(toolbarElement.lastChild); } // 插入新的svg图标作为子节点 let svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16"><path d="M7.5 8a.5.5 0 0 1-.5-.5v-4A1.5 1.5 0 0 0 5 .5H2.5A1.5 1.5 0 0 0 1 2.5V9c0 .85.66 1.5 1.5 1.5h2A1.5 1.5 0 0 0 6 9v-4.5A.5.5 0 0 1 6.5 4h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-4zm-1 0a.5.5 0 0 1 .5-.5v-4a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-4z"/></svg>'; toolbarElement.innerHTML += svgIcon; } } export default new SnowTheme() ``` 这段脚本首先获取到了 `.ql-bold` 类名下的 DOM 节点，接着清除了原有的内容再插入一段代表新样式的 SVG 字符串。注意这里的路径数据可以根据实际需求调整成不同的图形。 最后一步就是将这个主题应用到你的 Quill 编辑器上，在初始化时指定 theme 属性为你刚刚创建的主题对象即可完成整个过程。