请问如何在vue-quill-editor中添加中文字体

[zhongzhaoxi]

我在vue文件里面加了如下代码： const Font = Quill.import('attributors/style/font') Font.whitelist = ['Arial', 'serif', 'sans-serif', '宋体', '黑体', 'Microsoft YaHei', 'monospace', 'cursive'] Quill.register('formats/font',Font); 字体选项里面还是没有出现我设置的字体选项，求解答

[surmon-china]

https://quilljs.com/playground/#custom-fonts

[surmon-china]

const Font = Quill.import('formats/font');
// We do not add Aref Ruqaa since it is the default
Font.whitelist =['Arial', 'serif', 'sans-serif', '宋体', '黑体', 'Microsoft YaHei', 'monospace', 'cursive'];
Quill.register(Font, true);

[zhongzhaoxi]

感谢您的回答

[areyouse7en]

试了半天，发现还是要写css的啊。。。

js的步骤如上

//注册
import {
  Quill
} from 'vue-quill-editor'
const Font = Quill.import('formats/font');
Font.whitelist = ['Arial', '宋体', '黑体', '微软雅黑'];
Quill.register(Font, true);
//设置
const globalOption = {
    modules:{
        toolbar:{
            container:[
                [{
                    'font': ['Arial', '宋体', '黑体', '微软雅黑']
                }]
            ]
        }
    }
}

//使用
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor, globalOption)

然后全局添加字体样式

.quill-editor {
  /*工具栏内用*/
  .ql-font {
    span[data-value="Arial"]::before {
      content: "Arial" !important;
      font-family: "Arial";
    }
    span[data-value="宋体"]::before {
      content: "宋体" !important;
      font-family: "宋体";
    }
    span[data-value="黑体"]::before {
      content: "黑体" !important;
      font-family: "黑体";
    }
    span[data-value="微软雅黑"]::before {
      content: "微软雅黑" !important;
      font-family: "微软雅黑";
    }
  }
 /*编辑器内容用*/
  .ql-font-Arial {
    font-family: "Arial";
  }
  .ql-font-宋体 {
    font-family: "宋体";
  }
  .ql-font-黑体 {
    font-family: "黑体";
  }
  .ql-font-微软雅黑 {
    font-family: "微软雅黑";
  }
}

终于实现了

[surmon-china]

@areyouse7en 给你加标签啦

[PolanZ]

vue局部页面引入

import { Quill, quillEditor } from 'vue-quill-editor' 
const Font = Quill.import('formats/font')
Font.whitelist = ['Arial', 'serif', 'sans-serif', '宋体', '黑体', '微软雅黑']
Quill.register(Font, true)

调用

<quill-editor v-model="content"
         ref="myEditor"
         :options="editorOption"
         @ready="onEditorReady($event)">
</quill-editor>

export default {
  components: { quillEditor },
  data() {
     return {
         editorOption: {
             toolbar: [
                  [{
                     'font': ['Arial', 'serif', 'sans-serif', '宋体', '黑体', '微软雅黑']
                  }]
              ]
         }
    }
  }
}

但是在toolbar还是没有看到字体，这样设置有没有什么问题，请教

全局CSS设置为了渲染，所以这里忽略先

[xing00]

@PolanZ 你好，你的问题解决了吗，我也是局部引入，添加全局css，也没有出现字体

[areyouse7en]

你们是不是postcss的modules设为true了？

[PolanZ]

@areyouse7en 都没有字体的选项出现，我是全局设置了css的，没有用sass之类的

[areyouse7en]

@PolanZ 全局use呢？ 按我上面写的那样。我实现了的呀。

[PolanZ]

@areyouse7en 我是组件里引入，是不想全局注册呢

[lorenking]

出现了也没用，字体的样式都是一个ql-XXX的class，用副文本一般都有导出和预览的需求，每次导出字体样式都没了，编辑器会自己处理掉。感觉这个副文本编辑器有点搞笑，小问题不断。

[th-come]

没出来样式 其实是因为 操作栏 那里默认的css 错了 它默认的操作栏选择器是 ql-toolbar 不是ql-editor 这样写 应该会出来 .ql-toolbar { /工具栏内用/ .ql-font { span[data-value="Arial"]::before { content: "Arial" !important; font-family: "Arial"; } span[data-value="宋体"]::before { content: "宋体" !important; font-family: "宋体"; } span[data-value="黑体"]::before { content: "黑体" !important; font-family: "黑体"; } span[data-value="微软雅黑"]::before { content: "微软雅黑" !important; font-family: "微软雅黑"; } } } .ql-editor{ /编辑器内容用/ .ql-font-Arial { font-family: "Arial"; } .ql-font-宋体 { font-family: "宋体"; } .ql-font-黑体 { font-family: "黑体"; } .ql-font-微软雅黑 { font-family: "微软雅黑"; } } @PolanZ

[clarissahu]

出现了也没用，字体的样式都是一个ql-XXX的class，用副文本一般都有导出和预览的需求，每次导出字体样式都没了，编辑器会自己处理掉。感觉这个副文本编辑器有点搞笑，小问题不断。

因为你们都是引入的Quill.import('formats/font') 用这种方式 Quill.import('attributors/style/font') 就会变成style="font-family: STFangsong;"的形式了

[BH-NOTHING]

建了个QQ群（770265969），能否进来大家一起讨论下vue-quill-editor

[GitHubJiKe]

按照这个答案实现了自定义字体的加载，保存富文本的时候，文字的类名确实也发生了变化，但是当对保存过的内容再次就行编辑，也就是将content从新注入到editor的时候，其他样式都还在，但是自定义字体的样式消失了，开调试看了一下，标签上的字体class消失了，谁遇到过此问题？如何解决？

[ruijielou]

单组件注册按照下边这样写是没有问题的

import { Quill, quillEditor } from 'vue-quill-editor' 
const Font = Quill.import('formats/font')
Font.whitelist = ['Arial', 'serif', 'sans-serif', '宋体']
Quill.register(Font, true)

需要添加相对应的css,因为编辑框内的字体下拉框里显示是用伪类来实现的，所以需要添加css来实现字体列表的显示和字体样式的设置

.quill-editor {
  /*工具栏内用*/
  .ql-font {
    span[data-value="Arial"]::before {
      content: "Arial" !important;
      font-family: "Arial";
    }
    span[data-value="宋体"]::before {
      content: "宋体" !important;
      font-family: "宋体";
    }
  }
 /*编辑器内容用*/
  .ql-font-Arial {
    font-family: "Arial";
  }
  .ql-font-宋体 {
    font-family: "宋体";
  }
}

your component something......

[PolanZ]

您的邮件我已收到，会尽快回复。亲