vue-quill-editor
vue-quill-editor copied to clipboard
surmon-china
请问如何在vue-quill-editor中添加中文字体
我在vue文件里面加了如下代码： const Font = Quill.import('attributors/style/font') Font.whitelist = ['Arial', 'serif', 'sans-serif', '宋体', '黑体', 'Microsoft YaHei', 'monospace', 'cursive'] Quill.register('formats/font',Font); 字体选项里面还是没有出现我设置的字体选项，求解答
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);
试了半天，发现还是要写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: "微软雅黑";
}
}
终于实现了
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设置为了渲染，所以这里忽略先
出现了也没用，字体的样式都是一个ql-XXX的class，用副文本一般都有导出和预览的需求，每次导出字体样式都没了，编辑器会自己处理掉。感觉这个副文本编辑器有点搞笑，小问题不断。
没出来样式 其实是因为 操作栏 那里默认的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
出现了也没用，字体的样式都是一个ql-XXX的class，用副文本一般都有导出和预览的需求，每次导出字体样式都没了，编辑器会自己处理掉。感觉这个副文本编辑器有点搞笑，小问题不断。
因为你们都是引入的Quill.import('formats/font') 用这种方式 Quill.import('attributors/style/font') 就会变成style="font-family: STFangsong;"的形式了
按照这个答案实现了自定义字体的加载，保存富文本的时候，文字的类名确实也发生了变化，但是当对保存过的内容再次就行编辑，也就是将content从新注入到editor的时候，其他样式都还在，但是自定义字体的样式消失了，开调试看了一下，标签上的字体class消失了，谁遇到过此问题？如何解决？
单组件注册按照下边这样写是没有问题的
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......
