鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 富文本編輯器react-draft-wysiwyg 怎么添加漢字字體比如宋體、黑

富文本編輯器react-draft-wysiwyg 怎么添加漢字字體比如宋體、黑體、楷體等？

我用antd+dva做一個(gè)后臺(tái)項(xiàng)目，使用到富文本編輯器react-draft-wysiwyg，但默認(rèn)可供選擇的字體全是英文字體，請問怎么添加常用漢字字體？圖片描述

試過在組件中這么寫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

回答
編輯回答
命于你

找到解決方法如下：
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

2018年7月10日 01:49