最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jQuery仿thinkphp在线编辑器

来源:http://www.erdangjiade.com/ 二当家的 2015-09-20 05:08浏览(1461)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery仿thinkphp在线编辑器
分类:其它特效 > jQuery插件 难易:中级
查看演示 下载资源: 110

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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();
标签: 编辑器
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/508.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2