Skip to content

Commit 63a17df

Browse files
author
xiejiayun
committed
support link inserter
1 parent 64430ac commit 63a17df

File tree

6 files changed

+433
-4
lines changed

6 files changed

+433
-4
lines changed

‎example/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ class App extends React.Component {
7373
ueditorPath='../vendor/ueditor'
7474
config={{zIndex: 1001}}
7575
value={this.editorResult}
76-
plugins={['uploadImage', 'insertCode', 'uploadVideo', 'uploadAudio']}
76+
plugins={['uploadImage', 'insertCode', 'uploadVideo', 'uploadAudio', 'insertLink']}
7777
uploadImage={this.uploadImage}
7878
uploadVideo={this.uploadVideo}
7979
uploadAudio={this.uploadAudio}

‎lib/Link.js‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = void 0;
7+
8+
var _Button = _interopRequireDefault(require("./Button"));
9+
10+
var _Input = _interopRequireDefault(require("./Input"));
11+
12+
var _Label = _interopRequireDefault(require("./Label"));
13+
14+
var _Select = _interopRequireDefault(require("./Select"));
15+
16+
var _rcDialog = _interopRequireDefault(require("rc-dialog"));
17+
18+
var _react = _interopRequireDefault(require("react"));
19+
20+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21+
22+
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
23+
24+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
25+
26+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
27+
28+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
29+
30+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
31+
32+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
33+
34+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
35+
36+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
37+
38+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
39+
40+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
41+
42+
var inputStyle = {
43+
width: '300px'
44+
};
45+
var spanStyle = {
46+
fontSize: '14px',
47+
color: 'rgba(0, 0, 0, 0.65)',
48+
display: 'inline-block',
49+
width: '80px'
50+
};
51+
var formItmeStyle = {
52+
marginBottom: '5px'
53+
};
54+
55+
var Link =
56+
/*#__PURE__*/
57+
function (_React$Component) {
58+
_inherits(Link, _React$Component);
59+
60+
function Link() {
61+
var _getPrototypeOf2;
62+
63+
var _temp, _this;
64+
65+
_classCallCheck(this, Link);
66+
67+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
68+
args[_key] = arguments[_key];
69+
}
70+
71+
return _possibleConstructorReturn(_this, (_temp = _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Link)).call.apply(_getPrototypeOf2, [this].concat(args))), _this.state = {
72+
text: '',
73+
link: '',
74+
title: '',
75+
newTab: false,
76+
showTips: false
77+
}, _this.closeModal = function () {
78+
_this.setState({
79+
text: '',
80+
link: '',
81+
title: '',
82+
newTab: false,
83+
showTips: false
84+
});
85+
86+
_this.props.closeModal();
87+
}, _this.hasProtocol = function (link) {
88+
if (link.match(/^http:|https:/) || link.match(/^\/\//)) {
89+
return true;
90+
}
91+
92+
return false;
93+
}, _this.insert = function () {
94+
var _this$state = _this.state,
95+
text = _this$state.text,
96+
link = _this$state.link,
97+
title = _this$state.title,
98+
newTab = _this$state.newTab;
99+
100+
if (link) {
101+
var html = '';
102+
103+
if (!_this.hasProtocol(link)) {
104+
link = 'http://' + link;
105+
}
106+
107+
html += "<a href=\"".concat(link, "\" target=").concat(newTab ? '_blank' : '_self', " title=\"").concat(title, "\">").concat(text || link, "</a>");
108+
109+
_this.props.insert(html);
110+
}
111+
112+
_this.closeModal();
113+
}, _this.changeConfig = function (e, type) {
114+
var value = e.target.value;
115+
var boolType = ['newTab'];
116+
117+
if (boolType.indexOf(type) !== -1) {
118+
value = !!value;
119+
}
120+
121+
if (type == 'link') {
122+
if (!_this.hasProtocol(value)) {
123+
_this.setState({
124+
showTips: true
125+
});
126+
} else {
127+
_this.setState({
128+
showTips: false
129+
});
130+
}
131+
}
132+
133+
if (type == 'newTab') {
134+
return _this.setState({
135+
newTab: !_this.state.newTab
136+
});
137+
}
138+
139+
_this.setState(_defineProperty({}, type, value));
140+
}, _temp));
141+
}
142+
143+
_createClass(Link, [{
144+
key: "render",
145+
value: function render() {
146+
var _this2 = this;
147+
148+
var _this$state2 = this.state,
149+
text = _this$state2.text,
150+
link = _this$state2.link,
151+
title = _this$state2.title,
152+
newTab = _this$state2.newTab,
153+
showTips = _this$state2.showTips;
154+
var visible = this.props.visible;
155+
return _react.default.createElement(_rcDialog.default, {
156+
title: "\u8D85\u94FE\u63A5",
157+
onClose: this.closeModal,
158+
visible: visible,
159+
footer: [_react.default.createElement(_Button.default, {
160+
key: "close",
161+
onClick: this.closeModal
162+
}, "\u53D6\u6D88"), _react.default.createElement(_Button.default, {
163+
key: "insert",
164+
onClick: this.insert
165+
}, "\u63D2\u5165")],
166+
animation: "zome",
167+
maskAnimation: "fade"
168+
}, _react.default.createElement("form", null, _react.default.createElement("div", {
169+
style: formItmeStyle
170+
}, _react.default.createElement("span", {
171+
style: spanStyle
172+
}, "\u6587\u672C\u5185\u5BB9\uFF1A"), _react.default.createElement(_Input.default, {
173+
type: "text",
174+
style: inputStyle,
175+
value: text,
176+
onChange: function onChange(e) {
177+
return _this2.changeConfig(e, 'text');
178+
}
179+
})), _react.default.createElement("div", {
180+
style: formItmeStyle
181+
}, _react.default.createElement("span", {
182+
style: spanStyle
183+
}, "\u94FE\u63A5\u5730\u5740\uFF1A"), _react.default.createElement(_Input.default, {
184+
type: "text",
185+
style: inputStyle,
186+
value: link,
187+
onChange: function onChange(e) {
188+
return _this2.changeConfig(e, 'link');
189+
}
190+
})), _react.default.createElement("div", {
191+
style: formItmeStyle
192+
}, _react.default.createElement("span", {
193+
style: spanStyle
194+
}, "\u6807\u9898\uFF1A"), _react.default.createElement(_Input.default, {
195+
type: "text",
196+
style: inputStyle,
197+
value: title,
198+
onChange: function onChange(e) {
199+
return _this2.changeConfig(e, 'title');
200+
}
201+
})), _react.default.createElement("div", {
202+
style: formItmeStyle
203+
}, _react.default.createElement("span", {
204+
style: {
205+
color: 'rgba(0, 0, 0, 0.65)',
206+
fontSize: '14px'
207+
}
208+
}, "\u662F\u5426\u5728\u65B0\u7A97\u53E3\u6253\u5F00\uFF1A"), _react.default.createElement("input", {
209+
type: "checkbox",
210+
checked: newTab,
211+
onChange: function onChange(e) {
212+
return _this2.changeConfig(e, 'newTab');
213+
}
214+
})), showTips && _react.default.createElement("p", {
215+
style: {
216+
fontSize: '14px',
217+
color: 'red'
218+
}
219+
}, "\u60A8\u8F93\u5165\u7684\u8D85\u94FE\u63A5\u4E2D\u4E0D\u5305\u542Bhttp\u7B49\u534F\u8BAE\u540D\u79F0\uFF0C\u9ED8\u8BA4\u5C06\u4E3A\u60A8\u6DFB\u52A0http://\u524D\u7F00")));
220+
}
221+
}]);
222+
223+
return Link;
224+
}(_react.default.Component);
225+
226+
var _default = Link;
227+
exports.default = _default;

‎lib/ReactUeditor.js‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
1111

1212
var _UploadModal = _interopRequireDefault(require("./UploadModal"));
1313

14+
var _Link = _interopRequireDefault(require("./Link"));
15+
1416
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1517

1618
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -48,6 +50,7 @@ function (_React$Component) {
4850
_this.state = {
4951
videoModalVisible: false,
5052
audioModalVisible: false,
53+
linkModalVisible: false,
5154
videoSource: '',
5255
audioSource: ''
5356
};
@@ -121,6 +124,22 @@ function (_React$Component) {
121124
});
122125
};
123126

127+
_this.registerLink = function () {
128+
window.UE.registerUI('insertLink', function (editor, uiName) {
129+
var btn = new window.UE.ui.Button({
130+
name: uiName,
131+
title: '超链接',
132+
cssRules: 'background-position: -504px 0px;',
133+
onclick: function onclick() {
134+
editor._react_ref.setState({
135+
linkModalVisible: true
136+
});
137+
}
138+
});
139+
return btn;
140+
});
141+
};
142+
124143
_this.uploadImage = function (e) {
125144
var uploadImage = _this.props.uploadImage;
126145

@@ -163,6 +182,12 @@ function (_React$Component) {
163182
}
164183
};
165184

185+
_this.insertLink = function (html) {
186+
if (_this.ueditor) {
187+
_this.ueditor.execCommand('inserthtml', html, true);
188+
}
189+
};
190+
166191
_this.closeModal = function (type) {
167192
switch (type) {
168193
case 'video':
@@ -177,6 +202,13 @@ function (_React$Component) {
177202
audioModalVisible: false
178203
});
179204

205+
break;
206+
207+
case 'link':
208+
_this.setState({
209+
linkModalVisible: false
210+
});
211+
180212
break;
181213
}
182214
};
@@ -197,6 +229,7 @@ function (_React$Component) {
197229
if (plugins.indexOf('insertCode') !== -1) _this.registerSimpleInsertCode();
198230
if (plugins.indexOf('uploadVideo') !== -1) _this.registerUploadVideo();
199231
if (plugins.indexOf('uploadAudio') !== -1) _this.registerUploadAudio();
232+
if (plugins.indexOf('insertLink') !== -1) _this.registerLink();
200233
}
201234

202235
getRef && getRef(_this.ueditor);
@@ -307,7 +340,8 @@ function (_React$Component) {
307340

308341
var _this$state = this.state,
309342
videoModalVisible = _this$state.videoModalVisible,
310-
audioModalVisible = _this$state.audioModalVisible;
343+
audioModalVisible = _this$state.audioModalVisible,
344+
linkModalVisible = _this$state.linkModalVisible;
311345
var _this$props2 = this.props,
312346
uploadVideo = _this$props2.uploadVideo,
313347
uploadAudio = _this$props2.uploadAudio,
@@ -345,6 +379,12 @@ function (_React$Component) {
345379
insert: this.insert,
346380
upload: uploadAudio,
347381
progress: progress
382+
}), _react.default.createElement(_Link.default, {
383+
visible: linkModalVisible,
384+
closeModal: function closeModal() {
385+
_this4.closeModal('link');
386+
},
387+
insert: this.insertLink
348388
}));
349389
}
350390
}]);

0 commit comments

Comments
 (0)