添加 Formdesign

README.md

@@ -6,108 +6,21 @@
 ![](https://img.shields.io/npm/v/ifanrx-react-ueditor.svg) ![](https://img.shields.io/npm/dw/ifanrx-react-ueditor.svg)
 
 
-### ✨ 特性
-
-- 支持更灵活的图片和音视频资源上传
-- 支持同个页面存在多个编辑器实例
-- 支持对复制进来的图片进行操作
-- 允许扩展工具栏，支持在扩展中使用已有的 react 组件
-
-
-
-### 📦 下载
-
-```
-# 使用 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，指定插件。
-
-插件分为两种，一种是内置的插件，一种是自定义的插件。现支持内置插件如下：
-
-1. insertCode  插入代码块
-2. uploadImage  上传图片
-3. uploadVideo  上传视频
-4. uploadAudio  上传音频
-5. insertLink  添加链接
-
-内置插件，直接传入插件的名称即可。自定义插件则是传入一个 Function，类型定义（使用 typescript 只为了说明类型）为：
-
-```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 实例。详细内容，请参考[官方文档](https://ueditor.baidu.com/doc/#UE.Editor)
-
-#### 插件使用示例
-
-1. 内置插件
-
-    ```javascript
-    <ReactUeditor
-      ...
-      plugins={[
-        'insertCode',
-        'uploadImage',
-        'uploadVideo',
-        'uploadAudio',
-        'insertLink',
-      ]}
-      ...
-    />
-    ```
-
-2. 自定义插件
-
-    ```javascript
-    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]}
-      ...
-    />
-    ```
+### formdesign 分支修改
+
+将[雷劈网 WEB表单设计器 - Formdesign](https://github.com/payonesmile/formdesign) 添加到此项目.
+因为Formdesign没有npm仓库,所以直接添加所需文件到项目.
+
+### 代办  ---  表单组件
+
+- [x] 两个组件合并
+- [ ] 图标集成
+- [ ] 测试保存及预览
+- [ ] 将react-ue修改成可引用组件
+- [ ] 上传组件到gitlab
+- [ ] 在项目中使用
+
+<br>
 
 更多功能请移步到 react-ueditor 的 [wiki 页面](https://github.com/ifanrx/react-ueditor/wiki)
 

example/AsyncExample.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactUeditor from '../src'
+import ReactUeditor from '../src/js'
 
 class AsyncExample extends React.Component {
   constructor() {

example/EditorRefExample.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactUeditor from '../src'
+import ReactUeditor from '../src/js'
 
 class EditorRefExample extends React.Component {
   constructor() {

example/ExtendControlsExample.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactUeditor from '../src'
+import ReactUeditor from '../src/js'
 
 const testIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABd0lEQVQ4T82SMUsDQ' +
   'RCFZ+64IlaxsEgpEQULGxsrLUTQLv4CsZCA3XnJ7AWJnKAkuyuk0CYKFpYimFKwsktlIVYKoo2WpotwYUcuEDkTNUnnFgszb+bj7c4' +

example/Formdesign.js

@@ -0,0 +1,93 @@
+import React, {Fragment} from 'react'
+import ReactUeditor from '../src/js'
+
+class Formdesign extends React.Component {
+  constructor() {
+    super()
+    this.ueditorRef = null
+    this.leipiFormDesign = null
+    this.state = {
+      content: '',
+    }
+  }
+
+  updateEditorContent = content => {
+    console.log('updateEditorContent', content)
+    this.content = content
+  }
+
+  getUeditor = ref => {
+    this.ueditorRef = ref
+  }
+
+  handleReady = () => {
+    const leipiEditor = this.ueditorRef
+    this.leipiFormDesign = {
+      exec: function(method) {
+        leipiEditor.execCommand(method)
+      },
+    }
+  }
+
+  ueClick = type => {
+    console.log('ueClick', type)
+    this.leipiFormDesign.exec(type)
+  }
+
+  outSave = json => {
+    console.log('outSave*****************', json)
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <p>
+          一栏布局：
+          <br />
+          <br />
+          <button type='button' onClick={() => this.ueClick('text')} className='btn btn-info'>
+            文本框
+          </button>
+          <button type='button' onClick={() => this.ueClick('textarea')} className='btn btn-info'>
+            多行文本
+          </button>
+          <button type='button' onClick={() => this.ueClick('select')} className='btn btn-info'>
+            下拉菜单
+          </button>
+          <button type='button' onClick={() => this.ueClick('radios')} className='btn btn-info'>
+            单选框
+          </button>
+          <button type='button' onClick={() => this.ueClick('checkboxs')} className='btn btn-info'>
+            复选框
+          </button>
+          <button type='button' onClick={() => this.ueClick('macros')} className='btn btn-info'>
+            宏控件
+          </button>
+          <button type='button' onClick={() => this.ueClick('progressbar')} className='btn btn-info'>
+            进度条
+          </button>
+          <button type='button' onClick={() => this.ueClick('qrcode')} className='btn btn-info'>
+            二维码
+          </button>
+          <button type='button' onClick={() => this.ueClick('listctrl')} className='btn btn-info'>
+            列表控件
+          </button>
+          <button type='button' onClick={() => this.ueClick('more')} className='btn btn-primary'>
+            一起参与...
+          </button>
+        </p>
+        <ReactUeditor
+          debug
+          ueditorPath='../vendor/ueditor'
+          plugins={['insertInput', 'insertTextarea', 'insertSelect', 'insertRadios', 'insertCheckboxs', 'insertListctrl', 'saveJson']}
+          outSave={this.outSave}
+          getRef={this.getUeditor}
+          onChange={this.updateEditorContent}
+          onReady={this.handleReady}
+        />
+      </Fragment>
+    )
+  }
+}
+
+export default Formdesign

example/MediaExample.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactUeditor from '../src'
+import ReactUeditor from '../src/js'
 
 class MediaExample extends React.Component {
   constructor() {

example/PasteImageExample.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactUeditor from '../src'
+import ReactUeditor from '../src/js'
 
 class PasteImageExample extends React.Component {
   pasteImageStart = imageAmount => {

example/PluginExample.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactUeditor from '../src'
+import ReactUeditor from '../src/js'
 
 const simpleInsertCodeIcon = 'data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB9klEQVRYR+2Wy' +
   '23CQBCGZxwUASdKgA7IIdIukhF0QCoI6YAS6CB0EDpIOgjCEbs3nApCB+EEKFI80ToYgR/7IEhIEb4hvPN/8/jHi3DmB8+sDxeA/1GBdosNi' +
@@ -58,19 +58,19 @@ const Modal = ({style, onSelectImage}) => {
 }
 
 // 新插件写法
-let uploadImagePlugin = function (ueditor) {
+let uploadImagePlugin = function(ueditor) {
   return {
     menuText: '图片上传',
     cssRules: 'background-position: -726px -77px;',
-    onIconClick: function () {console.log('imageUpload icon click')},
+    onIconClick: function() { console.log('imageUpload icon click') },
     render: (visible, closeModal) => {
-      const handleSelectImage = (url) => {
+      const handleSelectImage = url => {
         ueditor.focus()
         ueditor.execCommand('inserthtml', '<img src="' + url + '" />')
         closeModal()
       }
       return <Modal style={{display: visible ? 'flex' : 'none'}} onSelectImage={handleSelectImage} />
-    }
+    },
   }
 }
 
@@ -121,7 +121,7 @@ class MediaExample extends React.Component {
 
   render() {
     let {progress} = this.state
-    
+
     // 旧插件写法
     let extendControls = [{
       name: 'insertOthers',
@@ -130,7 +130,7 @@ class MediaExample extends React.Component {
       cssRules: 'background: url(' + simpleInsertCodeIcon + ') !important; background-size: 20px 20px !important;',
       component: <div>test</div>,
       onConfirm: () => {
-        this.ueditor && this.ueditor.execCommand('inserthtml', `<a>test</a>`, true)
+        this.ueditor && this.ueditor.execCommand('inserthtml', '<a>test</a>', true)
       },
     }]
 

example/SimpleExample.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactUeditor from '../src'
+import ReactUeditor from '../src/js'
 
 class SimpleExample extends React.Component {
   updateEditorContent = content => {

example/index.js

@@ -5,6 +5,7 @@ import PasteImageExample from './PasteImageExample'
 import MediaExample from './MediaExample'
 import SimpleExample from './SimpleExample'
 import PluginExample from './PluginExample'
+import Formdesign from './Formdesign'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {HashRouter as Router, Switch, Route, NavLink} from 'react-router-dom'
@@ -66,6 +67,9 @@ class App extends React.Component {
               <li style={style.navbarItem}>
                 <NavLink to='/plugin-example/' activeStyle={{color: 'red'}}>插件示例</NavLink>
               </li>
+              <li style={style.navbarItem}>
+                <NavLink to='/formdesign/' activeStyle={{color: 'red'}}>Formdesign</NavLink>
+              </li>
             </ul>
           </section>
           <section style={style.pageRight}>
@@ -77,6 +81,7 @@ class App extends React.Component {
               <Route path='/extend-controls-example/' component={ExtendControlsExample} />
               <Route path='/paste-image-example/' component={PasteImageExample} />
               <Route path='/plugin-example/' component={PluginExample} />
+              <Route path='/formdesign/' component={Formdesign} />
             </Switch>
           </section>
         </div>

example/webpack.config.js

@@ -27,8 +27,8 @@ module.exports = {
         },
       },
       {
-        test: /\.css$/,
-        use: [ 'style-loader', 'css-loader' ],
+        test: /\.(css|less)$/,
+        use: ['style-loader', 'css-loader', 'less-loader'],
       },
     ],
   },