UBB在线html文本编辑器_jQuery网页文本编辑器
2015-11-11 16:15:04  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 5837
• 1

分享一个HTML的在线编辑器、虽然我博客里面使用的不是这个、但这个真的很不错、非常值得推荐给大家、jQuery精简UBB代码编辑器、是一款简洁实用的UBB代码编辑器、效果非常好、下面是效果图、希望对大家有用

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>

JS代码

$(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();
});

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1jGq84bs 密码: 2cqe

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛