Merge pull request #23 from ifanrx/more-extension

Add more extensions

.babelrc

@@ -1,6 +1,6 @@
 {
-  "presets": ["@babel/env", "@babel/preset-react"],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": [
-    ["transform-class-properties"]
+    ["@babel/proposal-class-properties"]
   ]
 }

CHANGELOG.md

@@ -1,3 +1,13 @@
+### v2.1.0 (2019-01-07)
+- [A] extendControls 模态框支持配置 zIndex 和垂直居中方式（top 和 middle）
+
+### v2.0.0 (2019-01-04)
+- [A] 允许对复制进来的图片进行操作
+- [A] 允许通过 extendControls 属性在工具栏添加自定义功能（以弹出模态框的方式）
+- [F] 修复存在多实例时，工具栏样式不更新
+- [F] 修复少数情况下，ueditor 自身的报错
+- [C] 完善文档和补充更多示例
+
 ### v1.7.0（2018-12-03）
 - [A] 暴露 ueditor 加载完成事件 onReady
 

README.md

@@ -30,7 +30,9 @@ import ReactUeditor from 'react-ueditor'
 Property             | Description                                  | Type   | Must
 :------------------- | :------------------------------------------- | :----- | :------
 config               | 在实例化时传入配置参数                           | obj   | no
+extendControls       | 扩展工具栏（目前仅支持弹出模态框方式）             | array | no
 getRef               | 获取 ueditor 实例                             | func  | no
+handlePasteImage     | 用于处理复制进来的图片                           | func  | no
 multipleImagesUpload | 支持多文件上传，默认为 false                     | bool  | no
 onChange             | 编辑器内容改变事件                               | func  | no
 onReady              | ueditor 加载完成事件                            | func  | no
@@ -47,6 +49,7 @@ plugins 现支持：
 - 视频上传 uploadVideo
 - 音频上传 uploadAudio
 - 插入代码 insertCode
+- 插入链接 insertLink
 
 #### 配置
 ueditor 主要通过ueditor.config.js 文件来配置，在存在多个编辑器示例而配置有所差异的场景下，可将部分参数传入到 config 属性中，具体配置可参考 (ueditor 配置说明)[http://fex.baidu.com/ueditor/#start-config]

example/AsyncExample.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import ReactUeditor from '../src'
+
+class AsyncExample extends React.Component {
+  constructor() {
+    super()
+    this.editorResult = ''
+    this.state = {
+      content: '',
+    }
+    this.timer = null
+  }
+
+  componentDidMount() {
+    this.timer = setTimeout(() => {
+      this.setState({
+        content: '我是异步加载回来的数据',
+      })
+    }, 2000)
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer)
+  }
+
+  updateEditorContent = content => {
+    // 通过 editroResult 获取编辑器最新内容，而不是对 content 进行 setState（因为 ueditor 不是一个受控组件）
+    this.editorResult = content
+  }
+
+  render() {
+    let {content} = this.state
+    return (
+      <div>
+        <ReactUeditor
+          debug
+          getRef={this.getUeditor}
+          ueditorPath='../vendor/ueditor'
+          value={content}
+          onChange={this.updateEditorContent}
+        />
+      </div>
+    )
+  }
+}
+
+export default AsyncExample

example/EditorRefExample.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import ReactUeditor from '../src'
+
+class EditorRefExample extends React.Component {
+  constructor() {
+    super()
+    this.ueditorRef = null
+    this.state = {
+      content: '',
+    }
+  }
+
+  getUeditor = ref => {
+    this.ueditorRef = ref
+  }
+
+  getUeditorContent = ref => {
+    this.setState({
+      content: this.ueditorRef.getContent(),
+    })
+  }
+
+  handleReady = () => {
+    this.ueditorRef.setHeight(200)
+  }
+
+  render() {
+    let {content} = this.state
+
+    return (
+      <div>
+        <ReactUeditor
+          debug
+          ueditorPath='../vendor/ueditor'
+          getRef={this.getUeditor}
+          onChange={this.updateEditorContent}
+          onReady={this.handleReady}
+        />
+        <button onClick={this.getUeditorContent}>获取内容</button>
+        <p>{content}</p>
+      </div>
+    )
+  }
+}
+
+export default EditorRefExample

example/ExtendControlsExample.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import ReactUeditor from '../src'
+
+const testIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABd0lEQVQ4T82SMUsDQ' +
+  'RCFZ+64IlaxsEgpEQULGxsrLUTQLv4CsZCA3XnJ7AWJnKAkuyuk0CYKFpYimFKwsktlIVYKoo2WpotwYUcuEDkTNUnnFgszb+bj7c4' +
+  'gdB2t9SoAzBhjMC5ZlsUAcJfP5y/j+W9FkSClzADAHCKOMvNblEPEFDO/A0BdCFH7ExCJSqk0ACwS0XEUa62zrVbrulAoPHU77nHwP' +
+  'wBSyilmnvd9/yRyVC6XNxzHufE872HQJ+w7jnPkum77EyuVSioMw00iKvYFlEqlCdu2M0R0EC+WUnq2bV/kcrmXfmM8TCaTW9lsNow' +
+  'XVqtVp9FoKCGE+ytAKbXAzCuWZV11W41iY8wyANSEEPWO/jVGZkat9T0ATP/UHMvdEtFsD0BKuY6Ip32aO/IaEZ21tzS6giAYSSQSz' +
+  '4g4NgiAmV+bzWY6CIKPNkAptQsAO4M0x2qKRLTXAUQ7Pj4k4JGIJtsAKeU2Ii4NAQiNMSe+759/AhPYnxETEdJoAAAAAElFTkSuQmCC'
+
+class App extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      inputValue: '',
+    }
+  }
+
+  getUeditor = ref => {
+    this.ueditorRef = ref
+  }
+
+  handleInputChange = e => {
+    this.setState({
+      inputValue: e.target.value,
+    })
+  }
+
+  render() {
+    return (
+      <ReactUeditor
+        debug
+        ueditorPath='../vendor/ueditor'
+        getRef={this.getUeditor}
+        extendControls={[
+          {
+            name: 'test',
+            menuText: 'test',
+            title: '测试模态框',
+            // 图标定义，遵循 ueditor 的格式
+            cssRules: 'background: url(' + testIcon + ') !important; background-size: 20px 20px !important;',
+            zIndex: 1,
+            alignStyle: 'middle',
+            component: <input onChange={this.handleInputChange} />,
+            onConfirm: () => {
+              this.ueditorRef.execCommand('inserthtml', this.state.inputValue, true)
+            },
+          },
+        ]}
+      />
+    )
+  }
+}
+
+export default App

example/MediaExample.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import ReactUeditor from '../src'
+
+class MediaExample extends React.Component {
+  constructor() {
+    super()
+    this.state = {
+      progress: -1,
+    }
+  }
+
+  updateEditorContent = content => {
+    this.editorResult = content
+  }
+
+  uploadImage = e => {
+    return new Promise(function(resolve, reject) {
+      resolve(window.URL.createObjectURL(e.target.files[0]))
+    })
+  }
+
+  uploadVideo = e => {
+    let _this = this
+    return new Promise(function(resolve, reject) {
+      let i = 0
+      let instance = setInterval(() => {
+        if (i !== 100) {
+          _this.setState({progress: ++i})
+        }
+      }, 50)
+      setTimeout(() => {
+        resolve('https://cloud-minapp-1131.cloud.ifanrusercontent.com/1eBb1SeNlayvGEKT.mp4')
+        _this.setState({progress: -1})
+        clearInterval(instance)
+      }, 5100)
+    })
+  }
+
+  uploadAudio = e => {
+    return new Promise(function(resolve, reject) {
+      resolve('https://cloud-minapp-1131.cloud.ifanrusercontent.com/1eEUtZNsjiOiHbWW.mp3')
+    })
+  }
+
+  render() {
+    let {progress} = this.state
+
+    return (
+      <ReactUeditor
+        debug
+        ueditorPath='../vendor/ueditor'
+        plugins={['uploadImage', 'insertCode', 'uploadVideo', 'uploadAudio', 'insertLink']}
+        uploadImage={this.uploadImage}
+        uploadVideo={this.uploadVideo}
+        uploadAudio={this.uploadAudio}
+        onChange={this.updateEditorContent}
+        progress={progress}
+        multipleImagesUpload={false}
+      />
+    )
+  }
+}
+
+export default MediaExample

example/PasteImageExample.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import ReactUeditor from '../src'
+
+class PasteImageExample extends React.Component {
+  handlePasteImage = src => {
+    return new Promise(function(resolve) {
+      setTimeout(() => {
+        resolve('https://s3.ifanr.com/wp-content/uploads/2019/01/WechatIMG974.jpeg!720')
+      }, 1000)
+    })
+  }
+
+  updateEditorContent = newContent => {
+    console.log('newContent', newContent)
+  }
+
+  render() {
+    return (
+      <ReactUeditor
+        ueditorPath='../vendor/ueditor'
+        handlePasteImage={this.handlePasteImage}
+        onChange={this.updateEditorContent}
+      />
+    )
+  }
+}
+
+export default PasteImageExample