aldehyde 0.2.197 → 0.2.199

package/src/aldehyde/controls/html-editor/draft.tsx

@@ -1,161 +1,161 @@
-
-import * as React from 'react'
-import {Card} from "antd";
-import {VEControlProps} from "../../tmpl/interface";
-// 核心
-import { EditorState, ContentState } from 'draft-js'
-import { Editor } from 'react-draft-wysiwyg'
-import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
-// draft 转换为 html
-import draftToHtml from 'draftjs-to-html'
-// html 转换为 draft
-import htmlToDraft from 'html-to-draftjs'
-
-interface DraftProps extends VEControlProps {
-    getHtml?:any;
-}
-
-interface DraftState  {
-    editorState?:boolean;
-}
-
-export default class Draft extends React.PureComponent<DraftProps, DraftState>{
-
-   state={
-       editorState:EditorState.createEmpty(),
-   }
-
-    componentDidMount() {
-        // 如果从后台读取接口存储的有值，读取过来转换为富文本格式默认显示
-        if (this.props.value) {
-            this.toDraft(this.props.value)
-        }
-    }
-
-    onEditorStateChange = (editorState) => {
-        //this.toHtml(editorState)
-
-        this.setState({
-            editorState
-        })
-    }
-
-    editorChange = value => {
-        //console.log('html:',draftToHtml(value))
-        if (this.props.onChange) {
-            this.props.onChange(draftToHtml(value));
-        }
-    }
-
-    // // 转换为 html
-    // toHtml = value => {
-    //     let templateContent = draftToHtml(convertToRaw(value.getCurrentContent()))
-    //
-    //     if (this.props.getHtml) {
-    //         // 输出已经编辑好的html
-    //         this.props.getHtml(templateContent)
-    //     }
-    //
-    // }
-
-    // 转换为 Draft
-
-    toDraft = value => {
-        const blocksFromHtml = htmlToDraft(value);
-        const { contentBlocks, entityMap } = blocksFromHtml;
-        const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
-        const editorState = EditorState.createWithContent(contentState);
-        //console.log("editorState:",editorState)
-        this.setState({
-            editorState
-        })
-    }
-
-    // imgFileupOnChange = (files) => {
-    //     // 返回值 files 就是上传的文件，控件会默认 Promise 返回，否则无法抓到返回的已上传图片链接
-    //     return new Promise(
-    //         (resolve, rejects) => {
-    //             // 使用 form 表单的形式进行配置，具体参数根据接口来
-    //             let formData = new FormData()
-    //
-    //             formData.append('File', files)
-    //             formData.append('FileType', 'Thumbnail')
-    //             formData.append('IsLogin', true)
-    //             formData.append('Description', '')
-    //
-    //             new Ajax({
-    //                 // 这里是配置自己的图片上传链接
-    //                 url: `/api/file/upload`,
-    //                 method: 'post',
-    //                 headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    //                 data: formData
-    //
-    //             })
-    //                 .start()
-    //                 .then(res => (res = res.data))
-    //                 .then(res => {
-    //                     if (res.Status === 0) {
-    //
-    //                         // Message.success('上传成功!')
-    //                         resolve({ data: { link: res.Result } })
-    //                     } else {
-    //                         // Message.fail('上传失败!')
-    //
-    //                     }
-    //                 })
-    //         }
-    //     )
-    //
-    //
-    // }
-
-     changeValue = (value) => {
-
-    }
-
-
-    render(){
-        const {viewOrEdit,disabled} = this.props;
-
-        const {editorState}=this.state;
-        let entryControl = undefined;
-
-
-
-        const setToolbar = {
-            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'remove', 'history'],
-            colorPicker: {
-                // 图标可以自定义，如果使用默认就注释掉
-                // icon: 'https://-------',
-                className: undefined,
-                component: undefined,
-                popupClassName: undefined,
-                // 图片选项卡自定义
-                colors: ['rgb(97,189,109)', 'rgb(26,188,156)', 'rgb(84,172,210)', 'rgb(44,130,201)',
-                    'rgb(147,101,184)', 'rgb(71,85,119)', 'rgb(204,204,204)', 'rgb(65,168,95)', 'rgb(0,168,133)',
-                    'rgb(61,142,185)', 'rgb(41,105,176)', 'rgb(85,57,130)', 'rgb(40,50,78)', 'rgb(0,0,0)',
-                    'rgb(247,218,100)', 'rgb(251,160,38)', 'rgb(235,107,86)', 'rgb(226,80,65)', 'rgb(163,143,132)',
-                    'rgb(239,239,239)', 'rgb(255,255,255)', 'rgb(250,197,28)', 'rgb(243,121,52)', 'rgb(209,72,65)',
-                    'rgb(184,49,47)', 'rgb(124,112,107)', 'rgb(209,213,216)', 'rgb(0,0,0)'],
-            },
-        }
-
-        entryControl= <Card style={{width:'100%'}} bodyStyle={{padding:'2px',minHeight:'280px'}} size={'small'}>
-            <Editor
-                readOnly={disabled}
-                toolbarHidden={viewOrEdit=='view'? true: false}
-                editorState={editorState}
-                wrapperClassName="contract-template-add-wrapper"
-                editorClassName="contract-template-editor"
-                onEditorStateChange={this.onEditorStateChange}
-                onChange={this.editorChange}
-                toolbar={setToolbar}
-            />
-        </Card>
-
-
-
-        return entryControl;
-
-    }
-}
+
+import * as React from 'react'
+import {Card} from "antd";
+import {VEControlProps} from "../../tmpl/interface";
+// 核心
+import { EditorState, ContentState } from 'draft-js'
+import { Editor } from 'react-draft-wysiwyg'
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+// draft 转换为 html
+import draftToHtml from 'draftjs-to-html'
+// html 转换为 draft
+import htmlToDraft from 'html-to-draftjs'
+
+interface DraftProps extends VEControlProps {
+    getHtml?:any;
+}
+
+interface DraftState  {
+    editorState?:boolean;
+}
+
+export default class Draft extends React.PureComponent<DraftProps, DraftState>{
+
+   state={
+       editorState:EditorState.createEmpty(),
+   }
+
+    componentDidMount() {
+        // 如果从后台读取接口存储的有值，读取过来转换为富文本格式默认显示
+        if (this.props.value) {
+            this.toDraft(this.props.value)
+        }
+    }
+
+    onEditorStateChange = (editorState) => {
+        //this.toHtml(editorState)
+
+        this.setState({
+            editorState
+        })
+    }
+
+    editorChange = value => {
+        //console.log('html:',draftToHtml(value))
+        if (this.props.onChange) {
+            this.props.onChange(draftToHtml(value));
+        }
+    }
+
+    // // 转换为 html
+    // toHtml = value => {
+    //     let templateContent = draftToHtml(convertToRaw(value.getCurrentContent()))
+    //
+    //     if (this.props.getHtml) {
+    //         // 输出已经编辑好的html
+    //         this.props.getHtml(templateContent)
+    //     }
+    //
+    // }
+
+    // 转换为 Draft
+
+    toDraft = value => {
+        const blocksFromHtml = htmlToDraft(value);
+        const { contentBlocks, entityMap } = blocksFromHtml;
+        const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
+        const editorState = EditorState.createWithContent(contentState);
+        //console.log("editorState:",editorState)
+        this.setState({
+            editorState
+        })
+    }
+
+    // imgFileupOnChange = (files) => {
+    //     // 返回值 files 就是上传的文件，控件会默认 Promise 返回，否则无法抓到返回的已上传图片链接
+    //     return new Promise(
+    //         (resolve, rejects) => {
+    //             // 使用 form 表单的形式进行配置，具体参数根据接口来
+    //             let formData = new FormData()
+    //
+    //             formData.append('File', files)
+    //             formData.append('FileType', 'Thumbnail')
+    //             formData.append('IsLogin', true)
+    //             formData.append('Description', '')
+    //
+    //             new Ajax({
+    //                 // 这里是配置自己的图片上传链接
+    //                 url: `/api/file/upload`,
+    //                 method: 'post',
+    //                 headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    //                 data: formData
+    //
+    //             })
+    //                 .start()
+    //                 .then(res => (res = res.data))
+    //                 .then(res => {
+    //                     if (res.Status === 0) {
+    //
+    //                         // Message.success('上传成功!')
+    //                         resolve({ data: { link: res.Result } })
+    //                     } else {
+    //                         // Message.fail('上传失败!')
+    //
+    //                     }
+    //                 })
+    //         }
+    //     )
+    //
+    //
+    // }
+
+     changeValue = (value) => {
+
+    }
+
+
+    render(){
+        const {viewOrEdit,disabled} = this.props;
+
+        const {editorState}=this.state;
+        let entryControl = undefined;
+
+
+
+        const setToolbar = {
+            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'remove', 'history'],
+            colorPicker: {
+                // 图标可以自定义，如果使用默认就注释掉
+                // icon: 'https://-------',
+                className: undefined,
+                component: undefined,
+                popupClassName: undefined,
+                // 图片选项卡自定义
+                colors: ['rgb(97,189,109)', 'rgb(26,188,156)', 'rgb(84,172,210)', 'rgb(44,130,201)',
+                    'rgb(147,101,184)', 'rgb(71,85,119)', 'rgb(204,204,204)', 'rgb(65,168,95)', 'rgb(0,168,133)',
+                    'rgb(61,142,185)', 'rgb(41,105,176)', 'rgb(85,57,130)', 'rgb(40,50,78)', 'rgb(0,0,0)',
+                    'rgb(247,218,100)', 'rgb(251,160,38)', 'rgb(235,107,86)', 'rgb(226,80,65)', 'rgb(163,143,132)',
+                    'rgb(239,239,239)', 'rgb(255,255,255)', 'rgb(250,197,28)', 'rgb(243,121,52)', 'rgb(209,72,65)',
+                    'rgb(184,49,47)', 'rgb(124,112,107)', 'rgb(209,213,216)', 'rgb(0,0,0)'],
+            },
+        }
+
+        entryControl= <Card style={{width:'100%'}} bodyStyle={{padding:'2px',minHeight:'280px'}} size={'small'}>
+            <Editor
+                readOnly={disabled}
+                toolbarHidden={viewOrEdit=='view'? true: false}
+                editorState={editorState}
+                wrapperClassName="contract-template-add-wrapper"
+                editorClassName="contract-template-editor"
+                onEditorStateChange={this.onEditorStateChange}
+                onChange={this.editorChange}
+                toolbar={setToolbar}
+            />
+        </Card>
+
+
+
+        return entryControl;
+
+    }
+}

package/src/aldehyde/controls/html-editor/tinymce.js

@@ -1,55 +1,55 @@
-import React from "react";
-import {Input} from "antd";
-import {Editor} from '@tinymce/tinymce-react';
-
-export default class HtmlEidtor extends React.Component {
-    //let [value,setValue] = useState();
-    state = {
-        value: undefined
-    }
-    componentDidMount() {
-        let {initialValue} = this.props;
-        this.setState({
-            value: initialValue
-        })
-    }
-
-    onChange = (content, editor) => {
-        //console.log('Content was updated:', content);
-        this.setState({
-            value: content
-        })
-    }
-    onChange1 = (content, editor) => {
-        //console.log('Content was updated11:', content);
-        this.setState({
-            value: content
-        })
-    }
-
-
-    render() {
-        let {initialValue} = this.props;
-        return <div>
-            {/*<Input style={{width:'220px'}} />*/}
-            <Editor
-                apiKey={'8htijpc1mghlxkfrfqr8puoylwqnv8nkth2hqvq709awthlo'}
-                initialValue={initialValue}
-                init={{
-                    height: 200,
-                    menubar: false,
-                    plugins: [
-                        'advlist autolink lists link image charmap print preview anchor',
-                        'searchreplace visualblocks code fullscreen',
-                        'insertdatetime media table paste code help wordcount'
-                    ],
-                    toolbar:
-                        'undo redo | formatselect | bold italic backcolor | \
-                        alignleft aligncenter alignright alignjustify | \
-                        bullist numlist outdent indent | removeformat | help'
-                }}
-                onEditorChange={this.props.onChange}
-            />
-        </div>
-    }
+import React from "react";
+import {Input} from "antd";
+import {Editor} from '@tinymce/tinymce-react';
+
+export default class HtmlEidtor extends React.Component {
+    //let [value,setValue] = useState();
+    state = {
+        value: undefined
+    }
+    componentDidMount() {
+        let {initialValue} = this.props;
+        this.setState({
+            value: initialValue
+        })
+    }
+
+    onChange = (content, editor) => {
+        //console.log('Content was updated:', content);
+        this.setState({
+            value: content
+        })
+    }
+    onChange1 = (content, editor) => {
+        //console.log('Content was updated11:', content);
+        this.setState({
+            value: content
+        })
+    }
+
+
+    render() {
+        let {initialValue} = this.props;
+        return <div>
+            {/*<Input style={{width:'220px'}} />*/}
+            <Editor
+                apiKey={'8htijpc1mghlxkfrfqr8puoylwqnv8nkth2hqvq709awthlo'}
+                initialValue={initialValue}
+                init={{
+                    height: 200,
+                    menubar: false,
+                    plugins: [
+                        'advlist autolink lists link image charmap print preview anchor',
+                        'searchreplace visualblocks code fullscreen',
+                        'insertdatetime media table paste code help wordcount'
+                    ],
+                    toolbar:
+                        'undo redo | formatselect | bold italic backcolor | \
+                        alignleft aligncenter alignright alignjustify | \
+                        bullist numlist outdent indent | removeformat | help'
+                }}
+                onEditorChange={this.props.onChange}
+            />
+        </div>
+    }
 }