vue-quill-editor 高度问题

最新推荐文章于 2023-12-20 14:14:09 发布

小兔子的博客

最新推荐文章于 2023-12-20 14:14:09 发布

阅读量1k

点赞数

分类专栏： vue错误文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_52484354/article/details/127553758

版权

vue错误专栏收录该内容

2 篇文章

订阅专栏


<style lang="scss">
.vue-quill-editor {
  .quill-editor{
    line-height: normal;
    .ql-container.ql-snow{
        line-height: normal !important;
        height: 550px !important;
        font-size:14px;
    }
    .ql-snow {
        .ql-tooltip[data-mode=link]::before {
            content: "请输入链接地址:";
        }
        .ql-tooltip.ql-editing a.ql-action::after {
            border-right: 0px;
            content: '保存';
            padding-right: 0px;
        }
        .ql-tooltip[data-mode=video]::before {
            content: "请输入视频地址:";
        }
        .ql-picker.ql-size {
            .ql-picker-label[data-value="12px"]::before,
            .ql-picker-item[data-value="12px"]::before {
                content: '12px';
            }
            .ql-picker-label[data-value="14px"]::before,
            .ql-picker-item[data-value="14px"]::before {
                content: '14px';
            }
            .ql-picker-label[data-value="16px"]::before,
            .ql-picker-item[data-value="16px"]::before {
                content: '16px';
            }
            .ql-picker-label[data-value="18px"]::before,
            .ql-picker-item[data-value="18px"]::before {
                content: '18px';
            }
            .ql-picker-label[data-value="20px"]::before,
            .ql-picker-item[data-value="20px"]::before {
                content: '20px';
            }
            .ql-picker-label[data-value="24px"]::before,
            .ql-picker-item[data-value="24px"]::before {
                content: '24px';
            }
            .ql-picker-label[data-value="28px"]::before,
            .ql-picker-item[data-value="28px"]::before {
                content: '28px';
            }
            .ql-picker-label[data-value="32px"]::before,
            .ql-picker-item[data-value="32px"]::before {
                content: '32px';
            }
            .ql-picker-label[data-value="36px"]::before,
            .ql-picker-item[data-value="36px"]::before {
                content: '36px';
            }
        }
        .ql-picker.ql-header {
            .ql-picker-label::before,
            .ql-picker-item::before {
                content: '文本';
            }
            .ql-picker-label[data-value="1"]::before,
            .ql-picker-item[data-value="1"]::before {
                content: '标题1';
            }
            .ql-picker-label[data-value="2"]::before,
            .ql-picker-item[data-value="2"]::before {
                content: '标题2';
            }
            .ql-picker-label[data-value="3"]::before,
            .ql-picker-item[data-value="3"]::before {
                content: '标题3';
            }
            .ql-picker-label[data-value="4"]::before,
            .ql-picker-item[data-value="4"]::before {
                content: '标题4';
            }
            .ql-picker-label[data-value="5"]::before,
            .ql-picker-item[data-value="5"]::before {
                content: '标题5';
            }
            .ql-picker-label[data-value="6"]::before,
            .ql-picker-item[data-value="6"]::before {
                content: '标题6';
            }
        }
        .ql-picker.ql-font{
            .ql-picker-label[data-value="SimSun"]::before,
            .ql-picker-item[data-value="SimSun"]::before {
                content: "宋体";
                font-family: "SimSun" !important;
            }
            .ql-picker-label[data-value="SimHei"]::before,
            .ql-picker-item[data-value="SimHei"]::before {
                content: "黑体";
                font-family: "SimHei";
            }
            .ql-picker-label[data-value="Microsoft-YaHei"]::before,
            .ql-picker-item[data-value="Microsoft-YaHei"]::before {
                content: "微软雅黑";
                font-family: "Microsoft YaHei";
            }
            .ql-picker-label[data-value="KaiTi"]::before,
            .ql-picker-item[data-value="KaiTi"]::before {
                content: "楷体";
                font-family: "KaiTi" !important;
            }
            .ql-picker-label[data-value="FangSong"]::before,
            .ql-picker-item[data-value="FangSong"]::before {
                content: "仿宋";
                font-family: "FangSong";
            }
        }
    }
    .ql-align-center{
      text-align: center;
    }
    .ql-align-right{
      text-align: right;
    }
    .ql-align-left{
      text-align: left;
    }
  }
  }
</style>