wangeditor-for-react

项目来源：wangEditor

安装

npm install wangeditor-for-react react

使用

事件监听

import ReactWEditor from 'wangeditor-for-react';

<ReactWEditor
  defaultValue={'<h1>标题</h1>'}
  linkImgCallback={(src,alt,href) => {
    // 插入网络图片的回调事件
    console.log('图片 src ', src)
    console.log('图片文字说明',alt)
    console.log('跳转链接',href)
  }}
  onlineVideoCallback={(video) => {
    // 插入网络视频的回调事件
    console.log('插入视频内容', video)
  }}
  onChange={(html) => {
    console.log('onChange html:', html)
  }}
  onBlur={(html) => {
    console.log('onBlur html:', html)
  }}
  onFocus={(html) => {
    console.log('onFocus html:', html)
  }}
/>

自定义配置

import ReactWEditor from 'wangeditor-for-react';

<ReactWEditor
  placeholder="自定义 placeholder"
  config={{
    fontSizes: {
      'x-small': { name: '10px', value: '1' },
      small: { name: '12px', value: '2' },
      normal: { name: '16px', value: '3' },
      large: { name: '18px', value: '4' },
      'x-large': { name: '24px', value: '5' },
      'xx-large': { name: '32px', value: '6' },
      'xxx-large': { name: '48px', value: '7' },
    },
  }}
/>

配置

• 配置菜单
• 内容校验
• 粘贴过滤
• 上传图片
• 上传视频

使用 Ref

通过 Ref 获取所有 API

import React, { useRef } from 'react';
import ReactWEditor from 'wangeditor-for-react';

function App() {
  let editorRef = useRef(null)
  return (
    <ReactWEditor
      ref={editorRef}
      onBlur={(html) => {
        if (editorRef.current) {
          console.log('ref', editorRef.current.editor.txt.append('追加内容'))
        }
      }}
    />
  );
}

export default App;

常用 API

销毁编辑器

import React, { useRef } from 'react';
import ReactWEditor from 'wangeditor-for-react';

function App() {
  let editorRef = useRef(null)
  return (
    <>
    <ReactWEditor ref={editorRef} />
    <a href="#" onClick={() => editorRef.current.destroy()}>click</a>
    </>
  );
}

export default App;

多语言

首先需要安装语言包

npm i -S i18next

使用

import { extend } from 'wangeditor-for-react';
import i18next from 'i18next';

const ReactWEditorOfLang = extend({ i18next })

<ReactWEditorOfLang
  config={{
    lang: 'en',
  }}
/>

自定义语言

import { extend } from 'wangeditor-for-react';
import i18next from 'i18next';

const ReactWEditorOfLang = extend({ i18next })

<ReactWEditorOfLang
  config={{
    lang: 'japan',
  }}
  languages={{
    japan: {
      wangEditor: {
        请输入正文: '本文を入力してください',
      },
    }
  }}
/>

增加 hook

分为全局钩子 globalHook 和实例钩子 instanceHook。

globalHook 注册在构造函数上，即 new E() 中的 E。instanceHook 注册在实例后，editor.create() 执行前。

钩子支持分割符，例如 menus.extend 相当于 this.editor.menus.extend。

钩子有两种值，一种是数组，一种是函数。

<ReactWEditor
  instanceHook={{
    // 使用数组时，通常 key 代表的钩子是一个方法，此处 menus.extend 是个方法，那么数组就是其参数。
    'menus.extend': ['alertMenuKey', AlertMenu],
    // 使用方法是，通常 key 代表的钩子是一个对象，可以利用方法来绑定。方法的形参第一位是当前实例的 editor，后面依次是 key 分割代表的对象。
    'config.menus': function(editor, config, menus) {
      config.menus = menus.concat("alertMenuKey")
    }
  }}
/>

使用 globalHook 扩展菜单，AlertMenu 参考 Button 菜单。

import React from 'react';
import ReactWEditor from 'wangeditor-for-react';
import AlertMenu from './AlertMenu';

function App() {
  return (
    <ReactWEditor
      globalHook={{
         registerMenu: ['alertMenuKey', AlertMenu]
      }}
    />
  );
}

export default App;

使用 instanceHook 扩展菜单。

import React from 'react';
import ReactWEditor from 'wangeditor-for-react';
import AlertMenu from './AlertMenu';

function App() {
  return (
    <ReactWEditor
      instanceHook={{
        'menus.extend': ['alertMenuKey', AlertMenu],
        'config.menus': function(editor, config, menus) {
          config.menus = menus.concat("alertMenuKey")
        }
      }}
    />
  );
}

export default App;

TODO

• 支持 scroll-to-head
• 支持 菜单和编辑区域分离