在vue项目中编辑器的使用
1.npm install vue-quill-editor --save 安装
2.在需要编辑的组件引入文件,并注册和调用
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.snow.css";
配置编辑器配置项根据所需
应用例子:contractMade--->ContractMadePage.vue
3.依赖文件node_modules-->quill-->dist(这个文件夹下有几个文件需要配置)
8-20px文字大小
以8px为例
quill.bubble.css
(1).ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
font-size:8px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
content: '8px';
}
(2).ql-editor .ql-size-8px {
font-size: 8px ;
}
quill.core.css
(1).ql-editor .ql-size-8px {
font-size: 8px;
}
quill.snow.css
(1).ql-editor .ql-size-8px {
font-size: 8px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
content: '8px';
}
quill.core.js
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px']
quill.js
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px']