网站内容编辑器(jQuery精简UBB代码JS代码编辑器、效果非常好、值得推荐)

　　网站内容编辑器(jQuery精简UBB代码JS代码编辑器、效果非常好、值得推荐)

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

　　

　　HTML 代码

　　

全屏

加粗

链接

代码

电话

电子邮件

　　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(´´ $(this).closest(´.think-editor´).find(´textarea´).selectionRange() ´´);

});

$(´.think-editor .italic´).click(function() {

$(this).closest(´.think-editor´).find(´textarea´).insertContent(´´ $(this).closest(´.think-editor´).find(´textarea´).selectionRange() ´´);

});

$(´.think-editor .underline´).click(function() {

$(this).closest(´.think-editor´).find(´textarea´).insertContent(´´ $(this).closest(´.think-editor´).find(´textarea´).selectionRange() ´´);

});

$(´.think-editor .link´).click(function() {

$(this).closest(´.think-editor´).find(´textarea´).insertContent(´´ $(this).closest(´.think-editor´).find(´textarea´).selectionRange() ´´);

});

$(´.think-editor .code´).click(function() {

$(this).closest(´.think-editor´).find(´textarea´).insertContent(´

´   $(this).closest(´.think-editor´).find(´textarea´).selectionRange()   ´

´);

});

$(´.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(´´ data ´´)

// data = $.parseJSON(data);

// data.status ? $(´.think-editor textarea´).insertContent(´´ data.pic ´´) : "上传错误";

}

});

$(´textarea´).shortcuts();

});

　　最后贴出Demo的源码。希望对大家有用，有兴趣的可以下载。

　　源码下载链接：密码​​：2cqe

　　如果资源对你有帮助，浏览后收获很多，不妨试试，你的鼓励是我继续写博的最大动力