RichEditor

安装依赖

本富文本组件基于 draft-js、draft-convert 封装，需要先安装以下依赖

1. "draft-convert": "^2.1.8"
2. "draft-js": "^0.11.7"

基本用法

function App() {
  const [value, setValue] = useState(`<p><a href="23" data-title="1">1</a></p>`)

  return (
    <div style = {{height: '300px'}}>
      <RichEditor
        placeholder="请输入文本内容"
        value={value}
        maxLength={30}
        onChange={(val) => {
          console.log('%c val =========>', 'color:#722ed1;', val)
          setValue(val)
        }}>
      </RichEditor>
    </div>
  )
}

自定义可用的tool

通过 systemToolConfig.uploadImage 属性返回promise，在resolve中返回图片链接，视频音频同理

function App() {
  const [value, setValue] = useState('')
  const systemTool = [
    'BOLD',
    'IMAGE',
  ]
  return (
    <RichEditor
      placeholder="请输入文本内容"
      systemTool={systemTool}
      value={value}
      editStyle={{ color: '#666' }}
      onChange={(val) => {
        setValue(val)
      }}>
    </RichEditor>
  )
}

自定义上传方法

通过 systemToolConfig.uploadImage 属性返回promise，在resolve中返回图片链接，视频音频同理

function App() {
  const [value, setValue] = useState('')
  const src = "https://yzf.qq.com/xv-outside/web/static/upload_file/584/images/2206301133522975783_9efa05a8813a2a0fa738459d8f29bd85.png"
  const systemToolConfig = {
    // todo 只能用rgb;而且","后面要加一个空格，draft-js的限制
    uploadImage: (file, mediaType) => {
      return new Promise((resolve, reject) => {
        resolve(src)
      })
    },
    uploadAudio: (file, mediaType) => {
      return new Promise((resolve, reject) => {
        resolve(src)
      })
    },
    uploadVideo: (file, mediaType) => {
      return new Promise((resolve, reject) => {
        resolve(src)
      })
    }
  }
  return (
    <RichEditor
      placeholder="请输入文本内容"
      systemToolConfig={systemToolConfig}
      value={value}
      editStyle={{ color: '#666' }}
      onChange={(val) => {
        setValue(val)
      }}>
    </RichEditor>
  )
}

自定义颜色选择

通过 systemToolConfig.colorList 属性设置可选颜色列表，只能用rgb;而且rgb中,后面要加一个空格

function App() {
  const [value, setValue] = useState('')
  const src = "https://yzf.qq.com/xv-outside/web/static/upload_file/584/images/2206301133522975783_9efa05a8813a2a0fa738459d8f29bd85.png"
  const systemToolConfig = {
    // todo 只能用rgb;而且","后面要加一个空格，draft-js的限制
    colorList: [
      'rgb(176, 211, 253)',
      'rgb(219, 179, 110)',
      'rgb(107, 178, 107)',
      'rgb(130, 160, 204)',
    ],
  }
  return (
    <RichEditor
      placeholder="请输入文本内容"
      systemToolConfig={systemToolConfig}
      value={value}
      editStyle={{ color: '#666' }}
      onChange={(val) => {
        setValue(val)
      }}>
    </RichEditor>
  )
}

自定义颜色选择

通过 systemToolConfig.fontSizeList 属性设置字体设置列表，设置value以及label

function App() {
  const [value, setValue] = useState('')
  const src = "https://yzf.qq.com/xv-outside/web/static/upload_file/584/images/2206301133522975783_9efa05a8813a2a0fa738459d8f29bd85.png"
  const systemToolConfig = {
    fontSizeList: [
      {
        value: '16px',
        label: '中',
      },
      {
        value: '20px',
        label: '大',
      }
    ],
  }
  return (
    <RichEditor
      placeholder="请输入文本内容"
      systemToolConfig={systemToolConfig}
      value={value}
      editStyle={{ color: '#666' }}
      onChange={(val) => {
        setValue(val)
      }}>
    </RichEditor>
  )
}

自定义插件 customPlugins

API

属性	说明	类型	默认值
value	当前值	string	--
onChange	值变化时触发	Function	--
placeholder	占位符	string	请输入
systemTool	默认可用的工具	systemToolItem[]	--
systemToolConfig	默认工具的配置	systemToolConfig	--
maxLength	最大字符数	number	--
editStyle	输入框样式	CSSProperties	--
customPlugins	外部插件配置	customPlugin[]	--

systemToolItem

属性	说明	类型	默认值
systemToolItem	默认工具可选值	'BOLD', 'ITALIC', 'LINK', 'IMAGE', 'FONT_SIZE', 'FONT_COLOR', 'TEXT_ALIGN'	--

systemToolConfig

属性	说明	类型	默认值
uploadImage	上传图片的方法，在promise中resolve图片链接	(file: Blob, mediaType?: string) => Promise<any>	--
uploadVideo	上传视频的方法，在promise中resolve图片链接	(file: Blob, mediaType?: string) => Promise<any>	--
uploadAudio	上传音频的方法，在promise中resolve图片链接	(file: Blob, mediaType?: string) => Promise<any>	--
colorList	自定义可选的颜色列表，需要以rgb的形式使用 列如 ['rgb(176, 211, 253)', 'rgb(219, 179, 110)']	string[]	--
fontSizeList	自定义可选的字号， 例子： [{ value: '16px', label: '中' }],	fontSize[]	--

customPlugin

属性	说明	类型	默认值
toolbar	自定义的工具展示	toolbar	--
editorPlugin	编辑的插件	SinglePlugin	--

SinglePlugin

draft实例与html的转换 entityToHTML等的说明

属性	说明	类型	默认值
command	命令	string	--
atomicBlockType	自定义的block类型	string	--
Component	自定义展示在输入框的内容	React.Component	--
entityToHTML	entityToHTML	entityToHTML	--
styleToHTML	styleToHTML	styleToHTML	--
blockToHTML	blockToHTML	blockToHTML	--
htmlToEntity	htmlToEntity	htmlToEntity	--
htmlToBlock	htmlToBlock	htmlToBlock	--
htmlToStyle	htmlToStyle	htmlToStyle	--