jQuery仿thinkphp在线编辑器
jQuery仿thinkphp在线编辑器，下面我们会演示如何用htmlspecialchars和addslahes插入编辑器内容，并且在页面上展示想要的内容
源码介绍
引入编辑器插件
rel="stylesheet" type="text/css" href="css/editor.css"/> rel="stylesheet" type="text/css" href="uploadify/uploadify.css" /> type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"> type="text/javascript" src="uploadify/jquery.uploadify.js"> type="text/javascript" src="js/jquery.shortcuts.js">
编辑器html代码
class="think-editor"> class="tool"> class="fullscreen fr" href="javascript:;">全屏 class="bold" href="javascript:;" title="加粗">加粗 class="link" href="javascript:;" title="链接">链接 class="code" href="javascript:;" title="代码">代码 class="tel" href="javascript:;" title="将电话号码生成图片">电话 class="email" href="javascript:;" title="将电子邮件生成图片">电子邮件 class="upload" href="javascript:;" title="图片"> id="editor_img" type="file" name="editor_img" />
class="enter">
name="content" autocomplete="off">
粗体bold
$('.think-editor .bold').click(function() { $(this).closest('.think-editor').find('textarea').insertContent('[b]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/b]'); });
斜体italic
$('.think-editor .italic').click(function() { $(this).closest('.think-editor').find('textarea').insertContent('[i]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/i]'); });
下划线underline
$('.think-editor .underline').click(function() { $(this).closest('.think-editor').find('textarea').insertContent('[u]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/u]'); });
链接link
$('.think-editor .link').click(function() { $(this).closest('.think-editor').find('textarea').insertContent('[url]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/url]'); });
代码code
$('.think-editor .code').click(function() { $(this).closest('.think-editor').find('textarea').insertContent('[code]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/code]'); });
邮箱email
$('.think-editor .email').click(function() { $(this).closest('.think-editor').find('textarea').insertContent('[email]' + $(this).closest('.think-editor').find('textarea').selectionRange() + '[/email]'); });
全屏fullscreen
$('.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); } });
编辑器上传图片
$('#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]') } });
uploadify.php上传图片
$targetPic = 'uploads/' . time() . ".jpg"; // 新上传图片名称 if (!empty($_FILES)) { $uploadInfo = $_FILES['editor_img']; $tempFile = $uploadInfo['tmp_name']; $fileTypes = array('jpg', 'jpeg', 'gif', 'png'); // 允许文件上传类型 $fileParts = pathinfo($uploadInfo['name']); if (in_array($fileParts['extension'], $fileTypes)) { move_uploaded_file($tempFile, $targetPic); } } echo $targetPic; ?>
文本框textarea光标定位
$('textarea').shortcuts();