在vue项目中vue-quill-editor编辑器的使用

在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']