vue Quill富文本工具栏自定义行高
import Quill from 'quill' let Parchment = Quill.import('parchment');// 设置行高为style 设置为class回显富文本时会失效// class lineHeightAttributorextends Parchment.Attributor.Attribute {}// Attribute // c...
·
import Quill from 'quill' let Parchment = Quill.import('parchment');
// 设置行高为style 设置为class回显富文本时会失效 // class lineHeightAttributor
extends Parchment.Attributor.Attribute {} // Attribute // class
lineHeightAttributor extends Parchment.Attributor.Class {} // Class
class lineHeightAttributor extends Parchment.Attributor.Style {} // tyle
let lineHeight = new lineHeightAttributor('lineHeight',
'line-height', {
scope: Parchment.Scope.INLINE,
whitelist: ['1', '1.1','1.2','1.3','1.4','1.5','1.6','1.7','1.8','1.9','2','2.1','2.2','2.3','2.4','2.5','2.6','2.7','2.8','2.9','3']
}); Quill.register({ "formats/lineHeight": lineHeight }, true);
export default lineHeight;
// html 要配置class
// <select class="ql-lineHeight">
// <option
// v-for="(item, index) in lineHeight"
// :key="index"
// :value="item"
// :selected="index === 0"
// >{{ item }}</option
// >
// </select>
// scss也要追加值进去不然不能回显内容
// 如:
// .ql-picker.ql-lineHeight .ql-picker-label[data-value='1']::before,
// .ql-picker.ql-lineHeight .ql-picker-item[data-value='1']::before {
// content: "1.0";
// }
// vue中在这里加载
// import lineHeight from './lineHeight';
// mounted() {
// Quill.register("formats/lineHeight", lineHeight, true);
// }
希望能帮到你!
更多推荐
已为社区贡献1条内容
所有评论(0)