编辑器都有什么功能。文字加粗，上传图片，改变大小等等。此例仅包含文字加粗和图片上传。
首页你要知道html标签中的contenteditable="true"属性，不知道的自行去百度。（可让div可编辑）
其次知道js的document.execCommand()，不知道的自行去百度(可以实现浏览器菜单的很多功能. 如保存文件,打开新文件,撤消、重做操作…等等. 有了这个方法,就可以很容易的实现网页中的文本编辑器.）
最后说下图片上传，此处用了一个ajaxfileupload.js的插件。（图片上传给后台（如php文件），后台返回图片地址，前台再把该图片插入到该编辑器中）
该插件可能会报handleError相关错误，加上下面代码即可
handleError: function (s, xhr, status, e) {
// If a local callback was specified, fire it
if (s.error) {
s.error.call(s.context || s, xhr, status, e);
}
// Fire the global callback
if (s.global) {
(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
}
},效果如图
下面直接放代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bianjiqi技术支持qq:41435301</title>
<script src="./jquery.js"></script>
<style>
/**编辑器样式**/
.textareatitle {
width: 844px;
height: 20px;
border: 1px solid #ccc;
border-bottom: none;
}
.textareatitle a,.textareatitle span {
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
border-right: 1px solid #ccc;
cursor: pointer;
overflow: hidden;
display: block;
float: left;
color:#000000;
}
.textareaedit{
width: 844px; height: 150px;border: 1px solid #ccc;resize:vertical;
overflow-y:auto;
}
.fileinput {
position: relative;
display: inline-block;
overflow: hidden;
cursor: pointer;
}
.fileinput input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
filter:alpha(opacity=0); opacity:0;
cursor: pointer;
}
</style>
</head>
<body>
<div style="width:850px;">
<div class="textareatitle" id="editControls">
<a data-role='bold' href='javascript:void(0);'>B</a>
<span class="fileinput">图片
<input type="file" multiple class="input-file pic-1" id="arrt_pic" name="images" onchange="uploadPic(this);">
</span>
</div>
<div class="textareaedit" style=" " contenteditable="true"></div>
</div>
<script src="./ajaxfileupload.js"></script>
<script>
/********编辑器插入图片*********/
function uploadPic(input_file) {
var current_input = input_file;
var upload_id = $(input_file).attr('id');
$.ajaxFileUpload
(
{
url: 'upload.php', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: upload_id, //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
type: 'POST',
async: true,
success: function (data) //服务器成功响应处理函数
{
if (data.status == 'Y') {
$(".textareaedit").append("<img src='./upload/" + data.msg + "'>");
} else {
alertLayer({text: '您上传的文件不符合要求'});
}
},
error: function (e) {
alertLayer({text: '您上传的文件不符合要求'});
},
complete: function () {
}
}
);
}
/*******编辑器功能*******/
$('#editControls a').click(function (e) {
switch ($(this).data('role')) {
case 'h1':
case 'h2':
case 'p':
document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
break;
default:
document.execCommand($(this).data('role'), false, null);
break;
}
})
</script>
</body>
</html>upload.php
<?php
$res["error"] = "";//错误信息
$res["msg"] = "";//提示信息
$name = $_FILES['images']['name'];
$path = dirname(__FILE__) . "\upload\\" . $name;
if(move_uploaded_file($_FILES['images']['tmp_name'],$path)){
$res["status"] = "Y";
$res["msg"] = $name;
}else{
$res["status"] = "N";
$res["error"] = "error";
}
echo json_encode($res);
?>欢迎大家多多交流。qq: 41435301