Vue项目中的富文本插件表格、字号相关问题

最新推荐文章于 2024-07-04 18:33:16 发布

超级秋刀鱼

最新推荐文章于 2024-07-04 18:33:16 发布

阅读量1.2k

点赞数

文章标签： css vue.js 前端

本文链接：https://blog.csdn.net/RussellKen/article/details/125634933

版权

本文介绍了在Vue项目中使用vue-quill-editor和WangEditor遇到的字号自定义及表格问题。对于vue-quill-editor，通过创建CSS文件覆盖默认样式实现字号以'XXpx'显示，并在回显时引入自定义CSS。而自定义表格功能因无法找到插入方法，推荐使用WangEditor。在WangEditor的使用中，包括下载、引入、实例化及回显内容的设置。然而，回显时遇到表格边框不生效的问题，解决方法是在全局样式中为table添加/deep/选择器的边框。

摘要由CSDN通过智能技术生成

vue-quill-editor字号自定义

在近日开发项目过程中需要用到富文本，不过样式和工具栏需要按照需求来自定义，我首先想到的是用vue-quill-editor，不过vue-quill-editor的字号是以large、small这类来定义的，按照需求是要改成以 ‘XXpx’ 更直观的显示，所以就需要去覆盖插件样式。

1、首先创建一个css文件

// 自定义字号样式

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
  font-size: 14px;
}

.ql-size-14px {
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
  font-size: 16px;
}

.ql-size-16px {
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[dat