图片上传位置第一次是对的第二次以后就不都不对了

图片上传第二次就会跑到最下面 about react-umeditor HOT 2 CLOSED

liuhong1happy commented on August 14, 2024

图片上传第二次就会跑到最下面

from react-umeditor.

Comments (2)

zlyi commented on August 14, 2024 1

这是由于点击菜单栏触发的：handleToolbarIconClick事件中this.closeAllOpenDialog(state.icon);，会触发：

this.refs.image.toggle(function (e, html) {
					editarea.focus();
					EditorSelection.restoreRange();
					if (html && html.length > 0) {
						if (EditorSelection.range) {
							if (EditorSelection.range.pasteHTML) {
								EditorSelection.range.pasteHTML('<p>' + html + '</p>');
							} else {
								var p = EditorDOM.createNodeByTag('p', html);
								EditorSelection.range.deleteContents();
								EditorSelection.insertNode(p);
							}
							// EditorHistory.execCommand('inserthtml',false,html);
						} else {
							editarea.innerHTML += '<p>' + html + '</p>';
						}
					}
				});

其中EditorSelection.restoreRange();会清空this.range(光标所在位置),等真正确定上传插入图片后，this.range=null,自然是插入最后了。
目前的解决方案是：在事件执行时加入if (!e) { return }，非正常点击插入图片，直接返回，完整代码：

this.refs.image.toggle(function (e, html) {
if (!e) { return }
					editarea.focus();
					EditorSelection.restoreRange();
					if (html && html.length > 0) {
						if (EditorSelection.range) {
							if (EditorSelection.range.pasteHTML) {
								EditorSelection.range.pasteHTML('<p>' + html + '</p>');
							} else {
								var p = EditorDOM.createNodeByTag('p', html);
								EditorSelection.range.deleteContents();
								EditorSelection.insertNode(p);
							}
							// EditorHistory.execCommand('inserthtml',false,html);
						} else {
							editarea.innerHTML += '<p>' + html + '</p>';
						}
					}
				});