@wangeditor-next/editor-for-react 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -0
- package/dist/components/Editor.d.ts +19 -0
- package/dist/components/Toolbar.d.ts +15 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +175 -0
- package/package.json +96 -0
package/README.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# wangEditor for React
|
|
2
|
+
|
|
3
|
+
<!-- Badge -->
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
[English documentation](./README-en.md)
|
|
8
|
+
|
|
9
|
+
## 介绍
|
|
10
|
+
基于[wangEditor](https://www.wangeditor.com/) 封装的React组件。
|
|
11
|
+
|
|
12
|
+
## 安装
|
|
13
|
+
|
|
14
|
+
1. 安装组件包
|
|
15
|
+
|
|
16
|
+
```shell
|
|
17
|
+
yarn add @wangeditor-next/editor-for-react
|
|
18
|
+
# 或者npm install @wangeditor-next/editor-for-react --save
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
2. 安装核心包
|
|
23
|
+
|
|
24
|
+
```shell
|
|
25
|
+
yarn add @wangeditor-next/editor
|
|
26
|
+
|
|
27
|
+
# 或者 npm install @wangeditor-next/editor --save
|
|
28
|
+
```
|
|
29
|
+
3. 导入组件
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import { Editor, Toolbar } from '@wangeditor-next/editor-for-react'
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## 使用
|
|
36
|
+
|
|
37
|
+
详情参考[wangEditor react使用文档](https://www.wangeditor.com/v5/for-frame.html#react)。
|
|
38
|
+
|
|
39
|
+
### 在Next.js下使用
|
|
40
|
+
```js
|
|
41
|
+
import dynamic from 'next/dynamic'
|
|
42
|
+
const WangEditor = dynamic(
|
|
43
|
+
// 引入对应的组件 设置的组件参考上面的wangEditor react使用文档
|
|
44
|
+
() => import('../components/myEditor'),
|
|
45
|
+
{ssr: false}
|
|
46
|
+
)
|
|
47
|
+
|
|
48
|
+
export default function Home() {
|
|
49
|
+
return <WangEditor />
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
使用案例可以参考[wangeditorV5-nextjs-demo](https://github.com/hahaaha/wangeditorV5-nextjs-demo)
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description editor react component
|
|
3
|
+
* @author wangfupeng
|
|
4
|
+
*/
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { SlateDescendant, IEditorConfig, IDomEditor } from '@wangeditor-next/editor';
|
|
7
|
+
interface IProps {
|
|
8
|
+
defaultContent?: SlateDescendant[];
|
|
9
|
+
onCreated?: (editor: IDomEditor) => void;
|
|
10
|
+
defaultHtml?: string;
|
|
11
|
+
value?: string;
|
|
12
|
+
onChange: (editor: IDomEditor) => void;
|
|
13
|
+
defaultConfig: Partial<IEditorConfig>;
|
|
14
|
+
mode?: string;
|
|
15
|
+
style?: React.CSSProperties;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
declare function EditorComponent(props: Partial<IProps>): React.JSX.Element;
|
|
19
|
+
export default EditorComponent;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description toolbar react component
|
|
3
|
+
* @author wangfupeng
|
|
4
|
+
*/
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import * as wangEditor from '@wangeditor-next/editor';
|
|
7
|
+
interface IProps {
|
|
8
|
+
editor: wangEditor.IDomEditor | null;
|
|
9
|
+
defaultConfig?: Partial<wangEditor.IToolbarConfig>;
|
|
10
|
+
mode?: string;
|
|
11
|
+
style?: object;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
declare function ToolbarComponent(props: IProps): React.JSX.Element;
|
|
15
|
+
export default ToolbarComponent;
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@wangeditor-next/editor')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react', '@wangeditor-next/editor'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.WangEditorForReact = {}, global.React, global.wangEditor));
|
|
5
|
+
})(this, (function (exports, React, wangEditor) { 'use strict';
|
|
6
|
+
|
|
7
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
+
|
|
9
|
+
function _interopNamespace(e) {
|
|
10
|
+
if (e && e.__esModule) return e;
|
|
11
|
+
var n = Object.create(null);
|
|
12
|
+
if (e) {
|
|
13
|
+
Object.keys(e).forEach(function (k) {
|
|
14
|
+
if (k !== 'default') {
|
|
15
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () { return e[k]; }
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
n["default"] = e;
|
|
24
|
+
return Object.freeze(n);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
28
|
+
var wangEditor__namespace = /*#__PURE__*/_interopNamespace(wangEditor);
|
|
29
|
+
|
|
30
|
+
/******************************************************************************
|
|
31
|
+
Copyright (c) Microsoft Corporation.
|
|
32
|
+
|
|
33
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
34
|
+
purpose with or without fee is hereby granted.
|
|
35
|
+
|
|
36
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
37
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
38
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
39
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
40
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
41
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
42
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
43
|
+
***************************************************************************** */
|
|
44
|
+
|
|
45
|
+
var __assign = function() {
|
|
46
|
+
__assign = Object.assign || function __assign(t) {
|
|
47
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
48
|
+
s = arguments[i];
|
|
49
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
50
|
+
}
|
|
51
|
+
return t;
|
|
52
|
+
};
|
|
53
|
+
return __assign.apply(this, arguments);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
function __read(o, n) {
|
|
57
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
58
|
+
if (!m) return o;
|
|
59
|
+
var i = m.call(o), r, ar = [], e;
|
|
60
|
+
try {
|
|
61
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
62
|
+
}
|
|
63
|
+
catch (error) { e = { error: error }; }
|
|
64
|
+
finally {
|
|
65
|
+
try {
|
|
66
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
67
|
+
}
|
|
68
|
+
finally { if (e) throw e.error; }
|
|
69
|
+
}
|
|
70
|
+
return ar;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
74
|
+
var e = new Error(message);
|
|
75
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* @description editor react component
|
|
80
|
+
* @author wangfupeng
|
|
81
|
+
*/
|
|
82
|
+
function EditorComponent(props) {
|
|
83
|
+
var _a = props.defaultContent, defaultContent = _a === void 0 ? [] : _a, onCreated = props.onCreated, _b = props.defaultHtml, defaultHtml = _b === void 0 ? '' : _b, _c = props.value, value = _c === void 0 ? '' : _c, onChange = props.onChange, _d = props.defaultConfig, defaultConfig = _d === void 0 ? {} : _d, _e = props.mode, mode = _e === void 0 ? 'default' : _e, _f = props.style, style = _f === void 0 ? {} : _f, className = props.className;
|
|
84
|
+
var ref = React.useRef(null);
|
|
85
|
+
var _g = __read(React.useState(null), 2), editor = _g[0], setEditor = _g[1];
|
|
86
|
+
var _h = __read(React.useState(''), 2), curValue = _h[0], setCurValue = _h[1];
|
|
87
|
+
var handleCreated = function (editor) {
|
|
88
|
+
// 组件属性 onCreated
|
|
89
|
+
if (onCreated)
|
|
90
|
+
onCreated(editor);
|
|
91
|
+
// 编辑器 配置 onCreated
|
|
92
|
+
var onCreatedFromConfig = defaultConfig.onCreated;
|
|
93
|
+
if (onCreatedFromConfig)
|
|
94
|
+
onCreatedFromConfig(editor);
|
|
95
|
+
};
|
|
96
|
+
var handleChanged = function (editor) {
|
|
97
|
+
setCurValue(editor.getHtml()); // 记录当前 html 值
|
|
98
|
+
// 组件属性 onChange
|
|
99
|
+
if (onChange)
|
|
100
|
+
onChange(editor);
|
|
101
|
+
// 编辑器 配置 onChange
|
|
102
|
+
var onChangeFromConfig = defaultConfig.onChange;
|
|
103
|
+
if (onChangeFromConfig)
|
|
104
|
+
onChangeFromConfig(editor);
|
|
105
|
+
};
|
|
106
|
+
var handleDestroyed = function (editor) {
|
|
107
|
+
var onDestroyed = defaultConfig.onDestroyed;
|
|
108
|
+
setEditor(null);
|
|
109
|
+
if (onDestroyed) {
|
|
110
|
+
onDestroyed(editor);
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
// value 变化，重置 HTML
|
|
114
|
+
React.useEffect(function () {
|
|
115
|
+
if (editor == null)
|
|
116
|
+
return;
|
|
117
|
+
if (value === curValue)
|
|
118
|
+
return; // 如果和当前 html 值相等，则忽略
|
|
119
|
+
// ------ 重新设置 HTML ------
|
|
120
|
+
try {
|
|
121
|
+
editor.setHtml(value);
|
|
122
|
+
}
|
|
123
|
+
catch (error) {
|
|
124
|
+
console.error(error);
|
|
125
|
+
}
|
|
126
|
+
}, [value]);
|
|
127
|
+
React.useEffect(function () {
|
|
128
|
+
var _a;
|
|
129
|
+
if (ref.current == null)
|
|
130
|
+
return;
|
|
131
|
+
if (editor != null)
|
|
132
|
+
return;
|
|
133
|
+
// 防止重复渲染 当编辑器已经创建就不在创建了
|
|
134
|
+
if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-w-e-textarea'))
|
|
135
|
+
return;
|
|
136
|
+
var newEditor = wangEditor.createEditor({
|
|
137
|
+
selector: ref.current,
|
|
138
|
+
config: __assign(__assign({}, defaultConfig), { onCreated: handleCreated, onChange: handleChanged, onDestroyed: handleDestroyed }),
|
|
139
|
+
content: defaultContent,
|
|
140
|
+
html: defaultHtml || value,
|
|
141
|
+
mode: mode,
|
|
142
|
+
});
|
|
143
|
+
setEditor(newEditor);
|
|
144
|
+
}, [editor]);
|
|
145
|
+
return React__default["default"].createElement("div", { style: style, ref: ref, className: className });
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* @description toolbar react component
|
|
150
|
+
* @author wangfupeng
|
|
151
|
+
*/
|
|
152
|
+
function ToolbarComponent(props) {
|
|
153
|
+
var editor = props.editor, _a = props.defaultConfig, defaultConfig = _a === void 0 ? {} : _a, _b = props.mode, mode = _b === void 0 ? 'default' : _b, _c = props.style, style = _c === void 0 ? {} : _c, className = props.className;
|
|
154
|
+
var ref = React.useRef(null);
|
|
155
|
+
React.useEffect(function () {
|
|
156
|
+
if (ref.current == null)
|
|
157
|
+
return;
|
|
158
|
+
if (editor == null)
|
|
159
|
+
return;
|
|
160
|
+
wangEditor__namespace.createToolbar({
|
|
161
|
+
editor: editor,
|
|
162
|
+
selector: ref.current,
|
|
163
|
+
config: defaultConfig,
|
|
164
|
+
mode: mode,
|
|
165
|
+
});
|
|
166
|
+
}, [editor]);
|
|
167
|
+
return React__default["default"].createElement("div", { style: style, ref: ref, className: className });
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
exports.Editor = EditorComponent;
|
|
171
|
+
exports.Toolbar = ToolbarComponent;
|
|
172
|
+
|
|
173
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
174
|
+
|
|
175
|
+
}));
|
package/package.json
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@wangeditor-next/editor-for-react",
|
|
3
|
+
"version": "1.0.6",
|
|
4
|
+
"description": "wangEditor component for React",
|
|
5
|
+
"author": "hahaaha <390519764@qq.com>",
|
|
6
|
+
"contributors": [],
|
|
7
|
+
"homepage": "https://github.com/cycleccc/wangEditor-for-react#readme",
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"types": "dist/index.d.ts",
|
|
10
|
+
"main": "dist/index.js",
|
|
11
|
+
"module": "dist/index.esm.js",
|
|
12
|
+
"browser": {
|
|
13
|
+
"./dist/index.js": "./dist/index.js",
|
|
14
|
+
"./dist/index.esm.js": "./dist/index.esm.js"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"wangEditor",
|
|
18
|
+
"wangEditor-next",
|
|
19
|
+
"富文本编辑器",
|
|
20
|
+
"富文本",
|
|
21
|
+
"react"
|
|
22
|
+
],
|
|
23
|
+
"directories": {
|
|
24
|
+
"lib": "dist",
|
|
25
|
+
"test": "__tests__"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"dist"
|
|
29
|
+
],
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "git+https://github.com/cycleccc/wangEditor-for-react.git"
|
|
33
|
+
},
|
|
34
|
+
"scripts": {
|
|
35
|
+
"test": "jest",
|
|
36
|
+
"test-c": "jest --coverage",
|
|
37
|
+
"example": "cross-env NODE_ENV=development:example rollup -c rollup.example.config.js -w",
|
|
38
|
+
"dev": "cross-env NODE_ENV=development rollup -c rollup.config.js",
|
|
39
|
+
"dev-watch": "cross-env NODE_ENV=development rollup -c rollup.config.js -w",
|
|
40
|
+
"build": "cross-env NODE_ENV=production rollup -c rollup.config.js",
|
|
41
|
+
"dev-size-stats": "cross-env NODE_ENV=development:size_stats rollup -c rollup.config.js",
|
|
42
|
+
"size-stats": "cross-env NODE_ENV=production:size_stats rollup -c rollup.config.js",
|
|
43
|
+
"release": "release-it"
|
|
44
|
+
},
|
|
45
|
+
"bugs": {
|
|
46
|
+
"url": "https://github.com/cycleccc/wangEditor-for-react/issues"
|
|
47
|
+
},
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"@wangeditor-next/core": ">=1.2.2",
|
|
50
|
+
"@wangeditor-next/editor": ">=5.2.5",
|
|
51
|
+
"react": ">=17.0.2",
|
|
52
|
+
"react-dom": ">=17.0.2"
|
|
53
|
+
},
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"@babel/core": "^7.16.0",
|
|
56
|
+
"@babel/plugin-transform-runtime": "^7.16.0",
|
|
57
|
+
"@babel/preset-env": "^7.16.0",
|
|
58
|
+
"@babel/preset-react": "^7.16.0",
|
|
59
|
+
"@babel/preset-typescript": "^7.16.0",
|
|
60
|
+
"@rollup/plugin-babel": "^5.3.0",
|
|
61
|
+
"@rollup/plugin-commonjs": "^21.0.1",
|
|
62
|
+
"@rollup/plugin-json": "^4.1.0",
|
|
63
|
+
"@rollup/plugin-node-resolve": "^13.0.6",
|
|
64
|
+
"@rollup/plugin-replace": "^3.0.0",
|
|
65
|
+
"@testing-library/jest-dom": "^5.15.0",
|
|
66
|
+
"@testing-library/react": "^12.1.2",
|
|
67
|
+
"@types/jest": "^27.0.3",
|
|
68
|
+
"@types/react": "^17.0.13",
|
|
69
|
+
"@types/react-dom": "^17.0.8",
|
|
70
|
+
"@wangeditor-next/core": "^1.2.2",
|
|
71
|
+
"@wangeditor-next/editor": "^5.2.5",
|
|
72
|
+
"autoprefixer": "^10.4.0",
|
|
73
|
+
"babel-jest": "^27.3.1",
|
|
74
|
+
"cross-env": "^7.0.3",
|
|
75
|
+
"jest": "^27.3.1",
|
|
76
|
+
"lodash": "^4.17.21",
|
|
77
|
+
"postcss": "^8.3.11",
|
|
78
|
+
"react": "^17.0.2",
|
|
79
|
+
"react-dom": "^17.0.2",
|
|
80
|
+
"release-it": "^14.11.8",
|
|
81
|
+
"rollup": "^2.59.0",
|
|
82
|
+
"rollup-plugin-cleanup": "^3.2.1",
|
|
83
|
+
"rollup-plugin-copy": "^3.4.0",
|
|
84
|
+
"rollup-plugin-delete": "^2.0.0",
|
|
85
|
+
"rollup-plugin-generate-html-template": "^1.7.0",
|
|
86
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
87
|
+
"rollup-plugin-postcss": "^4.0.1",
|
|
88
|
+
"rollup-plugin-serve": "^1.1.0",
|
|
89
|
+
"rollup-plugin-terser": "^7.0.2",
|
|
90
|
+
"rollup-plugin-typescript2": "^0.31.0",
|
|
91
|
+
"rollup-plugin-visualizer": "^5.5.2",
|
|
92
|
+
"ts-jest": "^27.0.7",
|
|
93
|
+
"typescript": "^4.4.4"
|
|
94
|
+
},
|
|
95
|
+
"dependencies": {}
|
|
96
|
+
}
|