Browse Source

feat: add default props of richeditor

node 5 years ago
parent
commit
6e96a5c6e1
4 changed files with 62 additions and 2 deletions
  1. 54
    0
      README.md
  2. 5
    1
      lib/index.js
  3. 1
    1
      lib/index.js.map
  4. 2
    0
      src/index.js

+ 54
- 0
README.md View File

@@ -8,4 +8,58 @@
8 8
 
9 9
 ```
10 10
 $ npm install git+https://git.links123.net/node/editor.git --save
11
+```
12
+
13
+## 使用
14
+
15
+```js
16
+import React from 'react'
17
+import { RichEditor } from 'editor';
18
+
19
+export default class RichEditor extends React.Component {
20
+
21
+    state = {
22
+        // 创建一个空的editorState作为初始值
23
+        editorState: EditorState.createFrom('')
24
+    }
25
+
26
+    async componentDidMount () {
27
+        // 假设此处从服务端获取html格式的编辑器内容
28
+        // const htmlContent = await fetchEditorContent()
29
+        const htmlContent = '<h1>ss</h1>'
30
+        // 使用EditorState.createFrom将html字符串转换为编辑器需要的editorState数据
31
+        this.setState({
32
+            editorState: EditorState.createFrom(htmlContent)
33
+        })
34
+    }
35
+
36
+    submitContent = async () => {
37
+        // 在编辑器获得焦点时按下ctrl+s会执行此方法
38
+        // 编辑器内容提交到服务端之前,可直接调用editorState.toHTML()来获取HTML格式的内容
39
+        const htmlContent = this.state.editorState.toHTML()
40
+        console.log('htmlContent: ', htmlContent)
41
+        // const result = await saveEditorContent(htmlContent)
42
+    }
43
+
44
+    handleEditorChange = (editorState) => {
45
+        this.setState({ editorState })
46
+    }
47
+
48
+    render () {
49
+
50
+        const { editorState } = this.state
51
+        return (
52
+            <div>
53
+                <BraftEditor
54
+                    value={editorState}
55
+                    onChange={this.handleEditorChange}
56
+                    onSave={this.submitContent}
57
+                />
58
+            </div>
59
+        )
60
+
61
+    }
62
+
63
+}
64
+
11 65
 ```

+ 5
- 1
lib/index.js View File

@@ -1,7 +1,7 @@
1 1
 'use strict';
2 2
 
3 3
 Object.defineProperty(exports, "__esModule", {
4
-    value: true
4
+  value: true
5 5
 });
6 6
 exports.MarkdownEditor = exports.RichEditor = undefined;
7 7
 
@@ -9,6 +9,8 @@ var _fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
9 9
 
10 10
 var _freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
11 11
 
12
+var _braftEditor = require('braft-editor');
13
+
12 14
 var _RichEditor = require('./RichEditor');
13 15
 
14 16
 var _RichEditor2 = _interopRequireDefault(_RichEditor);
@@ -31,6 +33,8 @@ _fontawesomeSvgCore.library.add(_freeSolidSvgIcons.faListUl);
31 33
 _fontawesomeSvgCore.library.add(_freeSolidSvgIcons.faListOl);
32 34
 _fontawesomeSvgCore.library.add(_freeSolidSvgIcons.faTasks);
33 35
 
36
+_RichEditor2.default.EditorState = _braftEditor.EditorState;
37
+
34 38
 exports.RichEditor = _RichEditor2.default;
35 39
 exports.MarkdownEditor = _MarkdownEditor2.default;
36 40
 //# sourceMappingURL=index.js.map

+ 1
- 1
lib/index.js.map View File

@@ -1 +1 @@
1
-{"version":3,"sources":["../src/index.js"],"names":["library","add","faBold","faHeading","faItalic","faStrikethrough","faLink","faQuoteRight","faCode","faImage","faListUl","faListOl","faTasks","RichEditor","MarkdownEditor"],"mappings":";;;;;;;AAAA;;AACA;;AAaC;;;;AACA;;;;;;AAGDA,4BAAQC,GAAR,CAAYC,yBAAZ;AACAF,4BAAQC,GAAR,CAAYE,4BAAZ;AACAH,4BAAQC,GAAR,CAAYG,2BAAZ;AACAJ,4BAAQC,GAAR,CAAYI,kCAAZ;AACAL,4BAAQC,GAAR,CAAYK,yBAAZ;AACAN,4BAAQC,GAAR,CAAYM,+BAAZ;AACAP,4BAAQC,GAAR,CAAYO,yBAAZ;AACAR,4BAAQC,GAAR,CAAYQ,0BAAZ;AACAT,4BAAQC,GAAR,CAAYS,2BAAZ;AACAV,4BAAQC,GAAR,CAAYU,2BAAZ;AACAX,4BAAQC,GAAR,CAAYW,0BAAZ;;QAIEC,U,GAAAA,oB;QACAC,c,GAAAA,wB","file":"index.js","sourcesContent":["import { library } from '@fortawesome/fontawesome-svg-core'\nimport { \n    faBold, \n    faHeading,\n    faItalic,\n    faStrikethrough,\n    faLink,\n    faQuoteRight,\n    faCode,\n    faImage,\n    faListUl,\n    faListOl,\n    faTasks,\n } from '@fortawesome/free-solid-svg-icons'\n import RichEditor from './RichEditor';\n import MarkdownEditor from './MarkdownEditor';\n\n\nlibrary.add(faBold)\nlibrary.add(faHeading)\nlibrary.add(faItalic)\nlibrary.add(faStrikethrough)\nlibrary.add(faLink)\nlibrary.add(faQuoteRight)\nlibrary.add(faCode)\nlibrary.add(faImage)\nlibrary.add(faListUl)\nlibrary.add(faListOl)\nlibrary.add(faTasks)\n\n\nexport { \n  RichEditor,\n  MarkdownEditor,\n }\n"]}
1
+{"version":3,"sources":["../src/index.js"],"names":["library","add","faBold","faHeading","faItalic","faStrikethrough","faLink","faQuoteRight","faCode","faImage","faListUl","faListOl","faTasks","RichEditor","EditorState","MarkdownEditor"],"mappings":";;;;;;;AAAA;;AACA;;AAaA;;AACC;;;;AACA;;;;;;AAGDA,4BAAQC,GAAR,CAAYC,yBAAZ;AACAF,4BAAQC,GAAR,CAAYE,4BAAZ;AACAH,4BAAQC,GAAR,CAAYG,2BAAZ;AACAJ,4BAAQC,GAAR,CAAYI,kCAAZ;AACAL,4BAAQC,GAAR,CAAYK,yBAAZ;AACAN,4BAAQC,GAAR,CAAYM,+BAAZ;AACAP,4BAAQC,GAAR,CAAYO,yBAAZ;AACAR,4BAAQC,GAAR,CAAYQ,0BAAZ;AACAT,4BAAQC,GAAR,CAAYS,2BAAZ;AACAV,4BAAQC,GAAR,CAAYU,2BAAZ;AACAX,4BAAQC,GAAR,CAAYW,0BAAZ;;AAEAC,qBAAWC,WAAX,GAAyBA,wBAAzB;;QAGED,U,GAAAA,oB;QACAE,c,GAAAA,wB","file":"index.js","sourcesContent":["import { library } from '@fortawesome/fontawesome-svg-core'\nimport { \n    faBold, \n    faHeading,\n    faItalic,\n    faStrikethrough,\n    faLink,\n    faQuoteRight,\n    faCode,\n    faImage,\n    faListUl,\n    faListOl,\n    faTasks,\n } from '@fortawesome/free-solid-svg-icons'\nimport { EditorState } from 'braft-editor'\n import RichEditor from './RichEditor';\n import MarkdownEditor from './MarkdownEditor';\n\n\nlibrary.add(faBold)\nlibrary.add(faHeading)\nlibrary.add(faItalic)\nlibrary.add(faStrikethrough)\nlibrary.add(faLink)\nlibrary.add(faQuoteRight)\nlibrary.add(faCode)\nlibrary.add(faImage)\nlibrary.add(faListUl)\nlibrary.add(faListOl)\nlibrary.add(faTasks)\n\nRichEditor.EditorState = EditorState;\n\nexport { \n  RichEditor,\n  MarkdownEditor,\n }\n"]}

+ 2
- 0
src/index.js View File

@@ -12,6 +12,7 @@ import {
12 12
     faListOl,
13 13
     faTasks,
14 14
  } from '@fortawesome/free-solid-svg-icons'
15
+import { EditorState } from 'braft-editor'
15 16
  import RichEditor from './RichEditor';
16 17
  import MarkdownEditor from './MarkdownEditor';
17 18
 
@@ -28,6 +29,7 @@ library.add(faListUl)
28 29
 library.add(faListOl)
29 30
 library.add(faTasks)
30 31
 
32
+RichEditor.EditorState = EditorState;
31 33
 
32 34
 export { 
33 35
   RichEditor,