jQuery仿thinkphp在线编辑器

收藏

分享一个刚扒出来，还热乎的thinkphp在线编辑器，下面我们会演示如何用htmlspecialchars和addslahes插入编辑器内容，并且在页面上展示想要的内容。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入编辑器插件

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

编辑器html代码

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

粗体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上传图片

<?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();