以下是 jQuery精简UBB代码编辑器js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery精简UBB代码编辑器</title>
<style>
.wrapper {
width: 720px;
min-height: 500px;
margin:70px auto
}
</style>
<link rel="stylesheet" type="text/css" href="css/editor.css"/>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
<script type="text/javascript" src="js/jquery.shortcuts.js"></script>
</head>
<body>
<div class="wrapper">
<form id="form" action="" method="post" class="think-form">
<table class="bd">
<tr>
<th><i class="must">*</i>内容</th>
<td colspan="2">
<div class="think-editor">
<div class="tool">
<a class="fullscreen fr" href="javascript:;">全屏</a>
<a class="bold" href="javascript:;" title="加粗">加粗</a>
<a class="link" href="javascript:;" title="链接">链接</a>
<a class="code" href="javascript:;" title="代码">代码</a>
<a class="tel" href="javascript:;" title="将电话号码生成图片">电话</a>
<a class="email" href="javascript:;" title="将电子邮件生成图片">电子邮件</a>
<a class="upload" href="javascript:;" title="图片"><input id="editor_img" type="file" name="editor_img" /></a>
</div>
<div class="enter">
<textarea name="content" autocomplete="off"></textarea>
</div>
</div>
<script type="text/javascript">
$(function() {
//翻页快捷键
$(document).keyup(function(event) {
if (event.keyCode == 37) {
$('.prev span').click();
} else if (event.keyCode == 39) {
$('.next span').click();
}
});
//阻止事件的冒泡
$(':text,textarea').keyup(function(event) {
event.stopPropagation();
});
//禁止退格触发浏览器返回上一页的功能
$('body').keydown(function(e) {
if (e.which == 8 && !$(e.target).is("input")) {
return false;
}
});
$('.think-editor .bold').click(function() {
$(this).closest('.think-editor').find('textarea').insertContent('[b]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/b]');
});
$('.think-editor .italic').click(function() {
$(this).closest('.think-editor').find('textarea').insertContent('[i]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/i]');
});
$('.think-editor .underline').click(function() {
$(this).closest('.think-editor').find('textarea').insertContent('[u]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/u]');
});
$('.think-editor .link').click(function() {
$(this).closest('.think-editor').find('textarea').insertContent('[url]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/url]');
});
$('.think-editor .code').click(function() {
$(this).closest('.think-editor').find('textarea').insertContent('[code]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/code]');
});
$('.think-editor .email').click(function() {
$(this).closest('.think-editor').find('textarea').insertContent('[email]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/email]');
});
$('.think-editor .tel').click(function() {
$(this).closest('.think-editor').find('textarea').insertContent('[phone]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/phone]');
});
$('.think-editor .fullscreen').click(function() {
var self = $(this).closest('.think-editor');
if (self.data('fullscreen')) { //取消全屏
self.removeAttr("style").find('textarea').removeAttr("style");
$('body').css("overflow", "auto");
self.data("fullscreen", 0);
} else {
$('body').css("overflow", "hidden");
self.css({
"position": "fixed",
"left": 0,
"top": 0,
"background-color": "#FFF",
"width": $(window).width() - 2,
"height": $(window).height() - 2,
"z-index": 999999
});
self.find('textarea').height($(window).height() - 36);
self.data("fullscreen", 1);
}
});
$(window).resize(function() {
var self = $('.think-editor');
if (self.data('fullscreen')) {
self.css({
"position": "fixed",
"left": 0,
"top": 0,
"background-color": "#FFF",
"width": $(window).width() - 2,
"height": $(window).height() - 2,
"z-index": 999999
});
self.find('textarea').height($(window).height() - 36);
}
});
$('#editor_img').uploadify({
'swf': 'uploadify/uploadify.swf', //http://www.thinkphp.cn/Public/common/uploadify-v3.1/uploadify.swf
'uploader': 'uploadify.php', //http://www.thinkphp.cn/public/editorUpload.html
'fileObjName': $('#editor_img').attr('name'),
'buttonClass': 'upload-image',
'fileTypeExts': '*.gif; *.jpg; *.png',
'width': 28,
'height': 28,
'onUploadSuccess': function(file, data, response) {
$('.think-editor textarea').insertContent('[img]' + data + '[/img]')
// data = $.parseJSON(data);
// data.status ? $('.think-editor textarea').insertContent('[img]' + data.pic + '[/img]') : "上传错误";
}
});
$('textarea').shortcuts();
});
</script>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
JS代码(common.js):
/** * toggleTips仿placeholder输入提示 * @param{
[object]}
einput元素 * @param{
[string]}
phc输入提示文字 */
function toggleTips(e,phc){
var element = $(e);
var placeholder = "<span class='placeholder-text'></span>";
var placeholderContent = phc;
//创建包裹目标input的元素,并插入提示文字element.wrap("<label></label>").after(placeholder);
element.next(".placeholder-text").text(placeholderContent);
//设置提示文字的css样式element.parent("label").css("position","relative");
element.next(".placeholder-text").css({
"position":"absolute","left":"5px","top":"0","cursor":"text","color":"#CCC"}
);
element.focus(function(){
var value = $(this).val();
if(!value){
$(this).next(".placeholder-text").hide();
}
}
).blur(function(){
var value = $(this).val();
if(!value){
$(this).next(".placeholder-text").show();
}
}
);
}
//删除上传的图片function delete_pic(e){
var $this = $(e);
$this.parent().remove();
}
//删除上传的附件function delete_attachment(e){
var $this = $(e);
$this.parent('span').remove();
}
CSS代码(base.css):
/** * 描 述：重置,布局及基础样式 * 涉及区域：公共,全局 */
html,body{font-size:14px;font-family:"Century Gothic","Microsoft yahei";color:#323232;background-color:#F9F9F9;}
body,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,form,input,textarea,button,pre,img{margin:0;padding:0;}
ul,ul li{list-style:none;}
img{border:0;}
a{color:#444;text-decoration:none;}
a:hover{color:#093;text-decoration:underline;}
input,textarea,select{font-size:100%;outline:0;resize:none;color:#323232;font-family:"微软雅黑";}
/* 布局 */
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cf{zoom:1;}
.cf:after{display:block;visibility:hidden;width:0;height:0;line-height:0;font-size:0;clear:both;content:".";}
.main{margin-left:auto;margin-right:auto;padding-top:70px;width:1000px;min-height:500px;height:auto!important;}
.wrapper{float:left;width:720px;}
/*本代码由js代码收集并编辑整理;尊重他人劳动成果;转载请保留js代码链接 - www.jsdaima.com*/
CSS代码(editor.css):
/* 发布表单 */
.think-form{padding:15px;font-size:16px;border:1px solid #D4D4D4;background-color:#FFF;}
/* 发布表单-头部用户信息栏 */
.think-form .hd{position:relative;margin:0 0 20px 12px;padding-left:60px;}
.think-form .hd-info{height:22px;line-height:25px;}
.think-form .hd-info .time{margin-left:20px;color:#C0C0C0;}
.think-form .hd-title{height:22px;line-height:35px;color:#C0C0C0;}
/* 发布表单-表单项 */
.think-form table.bd{width:100%;border-spacing:0 10px;}
.think-form th{padding-right:20px;width:77px;height:30px;line-height:30px;font-weight:normal;vertical-align:top;text-align:right;}
.think-form .must{margin-right:6px;font-style:normal;color:#00A651;vertical-align:-3px;}
.think-form .text{padding:3px;width:340px;height:24px;line-height:24px;border:1px solid #D4D4D4;}
.think-form select{padding:3px;height:28px;border:1px solid #CCCCCC;}
.think-form .add-remark{border:1px solid #CCCCCC;}
.think-form .add-remark textarea{padding:0;width:100%;height:80px;border:0 none;}
.think-form .verify{margin-right:5px;padding:3px;width:100px;height:24px;line-height:24px;font-size:16px;border:1px solid #CCCCCC;}
.think-form .verifyimg{margin-top:9px;}
.think-form .submit{padding:0 24px;height:30px;line-height:21px;font-size:16px;color:#FFFFFF;cursor:pointer;border:0 none;background-color:#348FD4;}
.think-form .submit:hover{background-color:#2F81BF;}
.think-form .init-color{color:#8E8E8E;}
.remind{margin-bottom:10px;padding:3px 0 3px 10px;line-height:1.8;color:#5D9018;background-color:#D8EAC0;}
.cols-in{width:348px;}
.pub-mr{margin-right:55px;}
.think-form .o_link{color:#007DDB;}
.think-form .o_link.ml{margin-left:30px;}
.think-form .Validform_checktip{height:20px;}
.mb25{margin-bottom:25px;}
.think-form .ali-link{margin-top:8px;}
.think-form .ali-link a{font-size:14px;color:#0094D8;}
/* 发布表单-上传 */
.think-form .uploadify-button{text-align:center;border:0 none;background-color:#71C73A;}
.think-form .uploadify-button .uploadify-button-text{color:#FFF;font-size:16px;vertical-align:middle;}
.think-form .uploadify-button-text b{vertical-align:middle;}
.think-form .uploadify-button-text i{display:inline-block;margin-right:5px;width:11px;height:11px;background:url(../images/icon_bg.png) no-repeat -75px -150px;}
.think-form .uploadify-button-text em{margin-left:5px;font-style:normal;vertical-align:middle;}
#attachment{display:block;margin-top:10px;}
#attachment a{margin-left:10px;vertical-align:middle;}
/* 上传图片队列 */
.queuen-wrap{position:relative;float:left;margin:10px 20px 0 0;}
.queuen-wrap a{position:absolute;right:-10px;top:-10px;width:21px;height:21px;font-size:0;line-height:10;background:url(../images/del.png) no-repeat;}
.queuen-wrap img{width:100px;height:100px;}
/* 发布表单-编辑器 */
.think-editor,.add-remark{border:1px solid #CCCCCC;}
.think-editor .tool{position:relative;padding:3px 12px;height:24px;line-height:24px;border-bottom:1px solid #CCCCCC;}
.think-editor .tool a{display:inline-block;margin-right:6px;width:24px;height:24px;line-height:9;overflow:hidden;vertical-align:top;background:url(../images/tool.png) no-repeat;}
.think-editor .tool a:hover{background-color:#EAEAEA;}
/*.think-editor .tool .fullscreen{background-position:3px -198px;}
.think-editor .tool .bold{background-position:8px 5px;}
.think-editor .tool .link{background-position:4px -162px;}
.think-editor .tool .code{background-position:0 -96px;}
.think-editor .tool .upload{background-position:2px -130px;}
.think-editor .tool .tel{background-position:-259px 0;}
.think-editor .tool .email{background-position:-279px 0;}
*/
.think-editor .tool .bold{background-position:0 0;}
.think-editor .tool .italic{background-position:0 -30px;}
.think-editor .tool .underline{background-position:0 -60px;}
.think-editor .tool .code{background-position:0 -90px;}
.think-editor .tool .upload{background-position:0 -120px;}
.think-editor .tool .link{background-position:0 -150px;}
.think-editor .tool .fullscreen{background-position:0 -180px;}
.think-editor .tool .shrink{background-position:0 -210px;}
.think-editor .tool .tel{background-position:0 -240px;}
.think-editor .tool .email{background-position:0 -270px;}
.think-editor .enter{margin:3px;}
.think-editor .enter textarea{border:0 none;height:180px;padding:0;resize:none;width:100%;}
#editor_img .uploadify-button-text{font-size:0;line-height:0;}
/*本代码由js代码收集并编辑整理;尊重他人劳动成果;转载请保留js代码链接 - www.jsdaima.com*/
分享到QQ
分享到微博
微信扫一扫
