文章目录
前言逻辑ueditor示例总结前言
富文本编辑器是后台常用的一款编辑器插件，尤其常用于商品，文章等资料的添加和修改，今天讲下如何在编辑器里自定义标签实现前端的特殊功能，比如在文章页面插入商品，如下图：
逻辑
逻辑大概是这样的，后台编辑文章的时候定义一个自定义的’商品标签’，标签里包含商品信息:图片，名称，价格，前端拿到文章富文本后，对’商品标签’进行特殊处理，并加上样式进行显示。本文只对后台操作进行解释，前端不作解释。
ueditor示例
由于我们后台使用的是ueditor，这里以ueditor为例，我们通过修改超链接标签来实现’商品标签’，修改前打开超链接标签，是这样的
我们要修改成下图
接下来是修改的方法，首先找到超链接弹框页面，位置在：
ueditor\utf8-php\dialogs\link\link.html
把下边的代码替换源文件，在这样做之前你最好备份一份link.html。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" src="../internal.js"></script><style type="text/css">* {margin: 0;padding: 0;color: #838383;}table {font-size: 12px;margin: 10px;line-height: 30px}.txt {width: 300px;height: 21px;line-height: 21px;border: 1px solid #d7d7d7;}</style></head><body><table><tr><td><label for="href"> 商品id</label></td><td><input class="txt" id="href" type="text"/></td></tr><tr><td><label for="text"> 商品名称</label></td><td><input class="txt" id="text" type="text" disabled="true"/></td></tr><tr><td><label for="title"> 商品信息</label></td><td><input class="txt" id="title" type="text"/></td></tr><tr><td colspan="2"><label for="target"><var id="lang_input_target"></var></label><input id="target" type="checkbox"/></td></tr><tr><td colspan="2" id="msg"></td></tr></table><script type="text/javascript">var range = editor.selection.getRange(),link = range.collapsed ? editor.queryCommandValue("link") : editor.selection.getStart(),url,text = $G('text'),rangeLink = domUtils.findParentByTagName(range.getCommonAncestor(), 'a', true),orgText;link = domUtils.findParentByTagName(link, "a", true);if (link) {url = utils.html(link.getAttribute('_href') || link.getAttribute('href', 2));if (rangeLink === link && !link.getElementsByTagName('img').length) {text.removeAttribute('disabled');orgText = text.value = link[browser.ie ? 'innerText' : 'textContent'];} else {text.setAttribute('disabled', 'true');text.value = lang.validLink;}} else {if (range.collapsed) {text.removeAttribute('disabled');text.value = '';} else {text.setAttribute('disabled', 'true');text.value = lang.validLink;}}$G("title").value = url ? link.title : "";$G("href").value = url ? url : '';$G("target").checked = url && link.target == "_blank" ? true : false;$focus($G("href"));function handleDialogOk() {var href = $G('href').value.replace(/^\s+|\s+$/g, '');if (href) {if (!hrefStartWith(href, ["http", "/", "ftp://", '#'])) {//href = "http://" + href;}var obj = {'href': href,'target': $G("target").checked ? "_blank" : '_self','title': $G("title").value.replace(/^\s+|\s+$/g, ''),'_href': href};//修改链接内容的情况太特殊了，所以先做到这里了//todo:情况多的时候，做到command里if (orgText && text.value != orgText) {link[browser.ie ? 'innerText' : 'textContent'] = obj.textValue = text.value;range.selectNode(link).select()}if (range.collapsed) {obj.textValue = text.value;}editor.execCommand('link', utils.clearEmptyAttrs(obj));dialog.close();}}dialog.onok = handleDialogOk;$G('href').onkeydown = $G('title').onkeydown = function (evt) {evt = evt || window.event;if (evt.keyCode == 13) {handleDialogOk();return false;}};$G('href').onblur = function () {if (!hrefStartWith(this.value, ["http", "/", "ftp://", '#'])) {//$G("msg").innerHTML = "<span style='color: red'>" + lang.httpPrompt + "</span>";} else {$G("msg").innerHTML = "";}createRequest('/admin/goodapi/oneedigoo?id='+$G('href').value.replace(/^\s+|\s+$/g, ''),getgoodinfo);};function hrefStartWith(href, arr) {href = href.replace(/^\s+|\s+$/g, '');for (var i = 0, ai; ai = arr[i++];) {if (href.indexOf(ai) == 0) {return true;}}return false;}function getgoodinfo(){if(http_request.readyState == 4){if(http_request.status==200){//console.log(typeof(http_request.responseText));var res = eval("("+http_request.responseText+")");console.log(res);if(http_request.responseText.code==2){alert("该ID商品不存在");document.getElementById('title').value='';}else{document.getElementById('text').value="商品链接:" + res.data.goods_name;//这里我是以 商品ID，商品名称，商品图标地址，商品价格 以‘,’英文逗号链接成的字符串，可以根据你的业务需要修改，document.getElementById('title').value=res.data.goods_id+','+res.data.goods_name+','+res.data.goods_img+','+res.data.shop_price;}}else{alert("您请求的页面发生错误");}}}var http_request = false;//生成ajaxfunction createRequest(url, func) {//Mozilla 等其他浏览器if (window.XMLHttpRequest) {http_request = new XMLHttpRequest();if (http_request.overrideMimeType) {http_request.overrideMimeType("text/xml");}}else if(windows.ActiveXObject){try {http_request = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {http_request = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {}}}if (!http_request) {alert("浏览器不支持访问");return false;}http_request.onreadystatechange = func;//发出http请求http_request.open("GET", url, true);http_request.send(null);}</script></body></html>
这里我们修改了页面内容为我们想要展现的内容，并且在商品ID输入后，定义了失去焦点的事件，来请求后台接口拿到商品信息，并展现在页面上，最后点击确定后，在富文本编辑器里显示添加到商品，在富文本里显示是这样的。
商品信息放在了a标签的title属性上，打开HTML查看源代码，会看到如下代码
<p><a href="216548" target="_self" title="216548,测试镜架,/public/brand/0516/df3957c269d4dd9d186941f8b68c37c5.png,1.00">商品链接:测试镜架</a><br/></p>
总结
本文以ueditor为例讲述了如何自定义标签，通过修改a标签来实现，如果你也要使用a标签来进行外链跳转，那么你可能需要自己新增个标签来实现了。
