a ueditor component for react
使用 react 框架对 ueditor 进行封装和扩展
# 使用 npm 安装
npm install ifanrx-react-ueditor --save
# 使用 yarn 安装
yarn add ifanrx-react-ueditor
import ReactUeditor from 'ifanrx-react-ueditor'
<ReactUeditor
ueditorPath={`${window.YOUR_PATH}/ueditor`}"
/>
extendControls 已不推荐使用,请直接使用 plugins,指定插件。
插件分为两种,一种是内置的插件,一种是自定义的插件。现支持内置插件如下:
内置插件,直接传入插件的名称即可。自定义插件则是传入一个 Function,类型定义(使用 typescript 只为了说明类型)为:
interface IPlugin {
(ueditor: UEditor): IPluginConfig
}
interface IPluginConfig {
cssRules: String
menuText: String
onIconClick?: () => void
render: (visible: Boolean, closeModal: () => void) => React.ReactElement<any>
title?: String
}
UEditor 为 UEditor 实例。详细内容,请参考官方文档
内置插件
<ReactUeditor
...
plugins={[
'insertCode',
'uploadImage',
'uploadVideo',
'uploadAudio',
'insertLink',
]}
...
/>
自定义插件
const uploadImagePlugin = ueditor => {
return {
menuText: '图片上传',
cssRules: 'background-position: -726px -77px;',
render: (visible, closeModal) => {
const handleSelectImage = (url) => {
ueditor.focus()
ueditor.execCommand('inserthtml', `<img src="${url}" />`)
closeModal()
}
return <Modal visible={visible} onSelectImage={handleSelectImage} />
}
}
}
<ReactUeditor
...
plugins={[uploadImagePlugin]}
...
/>
更多功能请移步到 react-ueditor 的 wiki 页面
kailunyao |
larry011 |
如果你希望为这个项目贡献代码,需要了解以下情况:
在根目录下执行 yarn start
会启动开发服务器,此时会在浏览器中展示 ReactUeditor 的真实效果,在 ReactUeditor/ 下的修改都会进行热更新
example.js, index.html, dist/ 都只是为了展示 ReactUeditor 的真实效果,主要代码在 ReactUeditor/ 中
需要修改 ueditor 源码时,直接修改 ueditor 目录下的文件,修改完执行:cd ueditor
和 yarn grunt
命令,此时会重新生成 ueditor 构建成功的文件到 vendor/ueditor