富文本编辑器react-draft-wysiwyg 怎么添加汉字字体比如宋体、黑体、楷体等?

发布于 2022-09-07 16:07:30 字数 756 浏览 9 评论 0

我用antd+dva做一个后台项目,使用到富文本编辑器react-draft-wysiwyg,但默认可供选择的字体全是英文字体,请问怎么添加常用汉字字体?图片描述

试过在组件中这么写fontFamily没有效果...

import React from 'react'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import styles from './Editor.less'

const DraftEditor = (props) => {
return (<Editor

        localization={{ locale: 'zh' }} 
        toolbarClassName={styles.toolbar} 
        wrapperClassName={styles.wrapper} 
        editorClassName={styles.editor} 
        fontFamily={{'SimSun': '宋体', 'KaiTi': '楷体',}} 
        {...props} 
        />)

}

export default DraftEditor

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

泪之魂 2022-09-14 16:07:30

找到解决方法如下:
import React from 'react'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import styles from './Editor.less'

const DraftEditor = (props) => {
return (<Editor

        localization={{ locale: 'zh' }} 
        toolbarClassName={styles.toolbar} 
        wrapperClassName={styles.wrapper} 
        editorClassName={styles.editor} 
        toolbar={{
          fontFamily: { options: ['宋体', '黑体', '楷体', '微软雅黑','Arial',  'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana',]}
        }}
        {...props} 
        />)

}

export default DraftEditor

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文