jQuery仿thinkphp在线编辑器

 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">

 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" /> 
    

粗体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();