js-实现富文本编辑器的插入链接功能

通过js和xcConfirm插件,实现富文本编辑器的插入链接功能,代码如下:
function insertLink() {
			//获取选区对象
			var selObj = window.getSelection();
			var selRange = selObj.getRangeAt(0);
			//获取所选内容的父级节点
			var selParent = selRange.commonAncestorContainer.parentNode;
			//获取所选内容的父级节点名称
			$selParentNodeName = $(selParent)[0].nodeName;
			//所选内容的link内容
			var selLink = "";
			//是否之前追加过link
			var isHaveALink = false;
			var selRangeText = selRange.toString();
			if($selParentNodeName == "A") {
				selRangeText = $(selParent).text();
				selLink = $(selParent).attr("href");
				isHaveALink = true;
			}
			if("" == selRange) {
				return;
			}
			//
			selRangeText = selRangeText.replaceAll("<", "<");
			selRangeText = selRangeText.replaceAll(">", ">");
			selRangeText = selRangeText.replaceAll("\"", """);
			selRangeText = selRangeText.replaceAll("'", "'");

			selLink = selLink.replaceAll("<", "<");
			selLink = selLink.replaceAll(">", ">");
			selLink = selLink.replaceAll("\"", """);
			selLink = selLink.replaceAll("'", "'");
			
			var txt = '<input type="text" value="' + selRangeText + '"/><input type="text" placeholder="请输入地址http://..." value="' + selLink + '" id="insertlinkhref"/>';
			var option = {
				title: "插入地址",
				btn: parseInt("0011", 2),
				onOk: function() {
					_$href = $("#insertlinkhref").val();
					if(isHaveALink) {
						$(selParent).attr("href", _$href);
					} else {
						var selectionContents = selRange.extractContents();
						var a = document.createElement("a");
						if(_$href == "") {
							alert("请输入链接地址");
							return;
						}
						a.href = _$href;
						a.appendChild(selectionContents);
						selRange.insertNode(a);
					}
				}
			}
			window.wxc.xcConfirm(txt, "custom", option);

		}

猜你喜欢

转载自blog.csdn.net/smj20170417/article/details/80691923