vue-quill-editor中文化

最新推荐文章于 2024-07-12 15:45:55 发布

tanxia456

最新推荐文章于 2024-07-12 15:45:55 发布

阅读量1.3k

点赞数

分类专栏： vue的使用文章标签： vue-quill-editor 中文

本文链接：https://blog.csdn.net/tanxia456/article/details/88659949

版权

本文将指导如何在vue-quill-editor中进行汉化操作，包括引入字体族和定制样式，确保编辑器显示为中文。

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

1.引入字体族并注册

<script>
  const Font = Quill.import('formats/font')
  Font.whitelist = ['serif', 'monospace', 'Arial', '宋体', '黑体', '微软雅黑']
  Quill.register(Font, true)
</script>

2.修改对应的样式

<style>
  .editor {
    line-height: normal !important;
    height: 800px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }

  .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=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-valu