<!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="http://libs.baidu.com/jquery/1.7.2/jquery.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>
<div style="text-align:center;margin:-150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
jQuery实现的精简UBB代码编辑器源码.zip
版权申诉
88 浏览量
2022-11-07
00:26:11
上传
评论
收藏 43KB ZIP 举报
jQuery实现的精简UBB代码编辑器源码.zip （11个子文件） 
132689946752489198 css 
editor.css 5KB base.css 1KB images 
tool.png 3KB uploads 
1442485328.jpg 3KB
index.html 6KB js jquery.shortcuts.js 5KB uploadify uploadify-cancel.png 3KB jquery.uploadify.js 45KB uploadify.css 2KB
uploadify.swf 12KB common.js 1KB资源评论
