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

我用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

阅读 4.1k
1 个回答

找到解决方法如下:
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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题