js文本框插入表情支持解析代码



220 877 293



特效描述:js文本框 插入表情 支持解析代码,js文本框点击选择插入表情,支持代码解析输出。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/easyEditor.css" />

2. 引入JS

<script src="js/easyEditor.js"></script>

3. HTML代码

		<h1 style="text-align: center;">easyEditor</h1>
		<div id="easyEditor"></div>
		<div id="nav" class="clearfloat">
			<div id="emoji">
				<img id="emoji_btn" class="emoji_btn" src="emoji/1.gif" alt="" title="插入表情" />
				<ul id="emoji_list">
					<li><img src="emoji/1.gif" alt="" /></li>
					<li><img src="emoji/2.gif" alt="" /></li>
					<li><img src="emoji/3.gif" alt="" /></li>
					<li><img src="emoji/4.gif" alt="" /></li>
					<li><img src="emoji/5.gif" alt="" /></li>
					<li><img src="emoji/6.gif" alt="" /></li>
					<li><img src="emoji/7.gif" alt="" /></li>
					<li><img src="emoji/8.gif" alt="" /></li>
					<li><img src="emoji/9.gif" alt="" /></li>
					<li><img src="emoji/10.gif" alt="" /></li>
					<li><img src="emoji/11.gif" alt="" /></li>
					<li><img src="emoji/12.gif" alt="" /></li>
					<li><img src="emoji/13.gif" alt="" /></li>
					<li><img src="emoji/14.gif" alt="" /></li>
					<li><img src="emoji/15.gif" alt="" /></li>
					<li><img src="emoji/16.gif" alt="" /></li>
					<li><img src="emoji/17.gif" alt="" /></li>
					<li><img src="emoji/18.gif" alt="" /></li>
					<li><img src="emoji/19.gif" alt="" /></li>
					<li><img src="emoji/20.gif" alt="" /></li>
					<li><img src="emoji/21.gif" alt="" /></li>
					<li><img src="emoji/22.gif" alt="" /></li>
					<li><img src="emoji/23.gif" alt="" /></li>
					<li><img src="emoji/24.gif" alt="" /></li>
					<li><img src="emoji/25.gif" alt="" /></li>
					<li><img src="emoji/26.gif" alt="" /></li>
					<li><img src="emoji/27.gif" alt="" /></li>
				</ul>
			</div>
			<div id="at">
				<button id="atBtn">@某某</button>
			</div>
			<div id="getHtml">
				<button id="getHtmlBtn">获取内容Html</button>
			</div>
			<div id="getText">
				<button id="getTextBtn">获取内容Text</button>
			</div>
		</div>
		<div id="show"></div>
		<script>
			var editor = new EasyEditor('easyEditor');
			//表情			
			var emojiBtn = document.getElementById('emoji_btn');
			var emojiBox = document.getElementById('emoji_list');
			var emojiList = emojiBox.getElementsByTagName('img');
			//辦定事件添加表情
			for(var i = 0; i < emojiList.length; i++) {
				addEvent(emojiList[i], 'click', function() {
					var src = this.getAttribute('src');
					editor.insertEmoji({
						src : src,
						remark : '笑脸'
					}); //添加表情
					emojiBox.style.display = 'none';
				});
			}
			//At人
			var atBtn = document.getElementById('atBtn');
			addEvent(atBtn, 'click', function() {
				//添加At人
				editor.insertBlock({
					text : '@某某',
					color : '#f00'
				}); 
			});
			var showBox = document.getElementById('show');
			//获取HTML
			var htmlBtn = document.getElementById('getHtmlBtn');
			addEvent(htmlBtn, 'click', function() {
				showBox.innerHTML = htmlEncode(editor.getContent(false));
			});
			//獲取text
			var textBtn = document.getElementById('getTextBtn');
			addEvent(textBtn, 'click', function() {
				showBox.innerHTML = htmlEncode(editor.getContent(true));
			});
			//表情面板顯示
			addEvent(emojiBtn, 'click', function() {
				emojiBox.style.display = 'flex';
			});
			//表情面板消失
			maskClick(emojiBox, function() {
				emojiBox.style.display = 'none';
			});
			function maskClick(el, func) {
				var str = str == undefined ? 'maskClick' : str;
				addEvent(document, 'mouseup', function(event) {
					var event = event || window.event;
					var target = event.target;
					if(!isParent(target, el)) {
						func && func();
					}
				});
			}
			function isParent(obj, parentObj) {
				while(obj != undefined && obj != null && obj.tagName != 'HTML' && obj.tagName.toUpperCase() != 'BODY') {
					if(obj == parentObj) {
						return true;
					}
					obj = obj.parentNode;
				}
				return false;
			}
			//事件辦定
			function addEvent(element, type, callback) {
				if(element.addEventListener) {
					element.addEventListener(type, callback, false);
				} else if(element.attachEvent) {
					element.attachEvent('on' + type, callback)
				}
			}
			//正则转换
			function htmlEncode(strHTML){
				var strTem = "";
				if(strHTML.length == 0) return "";
				strTem = strHTML.replace(/&/g, "&gt;");
				strTem = strTem.replace(/</g, "&lt;");
				strTem = strTem.replace(/>/g, "&gt;");
				strTem = strTem.replace(/ /g, "&nbsp;");
				strTem = strTem.replace(/\'/g, "&#39;");
				strTem = strTem.replace(/\"/g, "&quot;");
				strTem = strTem.replace(/\n/g, "");
				return strTem;
			}
		</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到