让编程更简单——百度编辑器的使用教程
背景：成绩系统虽然不大，但是自己的经验不足加上里面的漏洞比较多，所以整个成绩系统的任务比较重大。开始的时候本着维护的原则，修修补补一个多月，大体上的功能是实现了，但是各个模块之间的联调还是一如既往的不能用。修补的时候感觉MongoDB比较适合我们的系统，决定加MongoDB。年前验收的时候，看到新生系统采用百度编辑器对文字和图片进行编辑，效果还不错，而且更适合我们成绩系统教师留作业和学生提交作业和在线编辑功能。下定决心添加百度编辑器，年后来了一顿忙，终于研究出来点眉目了，现在分享一下。
一、资源下载
百度编辑器官网
根据需求下载自己需要的软件，下面是我下载的版本。
我们解压缩下载下来的UEditor压缩包。我们双击打开index.html文件。显示下面内容表示该软件可用。
二、使用方法
1、将百度编辑器文件夹放在自己项目的文件夹下。
2、引用JS文件
3、实例化百度编辑器
4、代码展示
AddHomeworkPartial.cshtml
<strong>@model ITOO.ResultTeacherHomework.ViewModel.ResultLeaveHomeworkViewModel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>添加作业</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- 编辑器配置 -->
<script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.all.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<!--中文包-->
<script type="text/javascript" charset="utf-8" src="../../ueditor/lang/zh-cn/zh-cn.js"></script>
<!--代码解析-->
<script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.parse.js"></script>
@*添加Jquery EasyUI的样式*@
<link href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
<link href="../../Content/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
@*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
<script src="../../Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
@*添加DatagridOperate*@
<script src="../../Scripts/MyScript/DatagridOperate.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//页面加载时，先加载学年信息
$(function () {
var cmbSchoolYear = $('#cmbSchoolYear').combobox({
url: '/TeaQueryHomework/QuerySchoolYear',
editable: false,
method: 'get',
valueField: 'SchoolCalendarID',
textField: 'SchoolYear',
onSelect: function (data) {
linkCmbCourse(data);
}
});
});
//学年信息改变后，根据学年ID查询课程信息
function linkCmbCourse(data) {
var cmbCourse = $('#cmbCourse').combobox({
url: '/TeaQueryHomework/QueryCourse?termID=' + data.SchoolCalendarID,
editable: false,
method: 'get',
valueField: 'CourseID',
textField: 'CourseName',
onSelect: function (data) {
linkCmbOnClass(data);
}
});
}
//课程信息改变后，课程ID查询上课班信息
function linkCmbOnClass(data) {
var cmbOnClass = $('#cmbOnClass').combobox({
url: '/TeaQueryHomework/QueryOnClass?courseID=' + data.CourseID + "&termID=" + $('#cmbSchoolYear').combobox('getValue'),
valueField: 'OnClassID',
textField: 'OnClassName'
});
} </script>
<div id="dlgadd" style="float:left; width:300px; display:block;margin-top:45px;">
<div style="font-size: 24px; margin-top:15px"><strong>学年:</strong><strong> </strong><input id="cmbSchoolYear" name="cmbSchoolYear" class="easyui-combobox" ></div><br>
<div style="font-size: 24px; margin-top:15px"><strong>课程:</strong><strong> </strong><input id="cmbCourse" name="cmbCourse" class="easyui-combobox" ></div><br>
<div style="font-size: 24px; margin-top:15px"><strong>班级:</strong><strong> </strong><input id="cmbOnClass" name="cmbOnClass" class="easyui-combobox" ></div><br>
@*<div style="font-size: 24px; margin-top:15px"><strong>作业类型:</strong><strong> </strong><input id="homeworkType" name="homeworkType" class="easyui-combobox" style="width:140px;" name="language"></div><br>*@
<div style="font-size: 24px; margin-top:15px"><strong>作业类型:</strong><strong> </strong><select id="homeworkType" name="homeworkType" style="width:140px;">
<option>平时作业</option>
<option>期末作业</option>
</select></div><br>
<div style="font-size: 24px; margin-top:15px"><strong>作业标题:</strong><strong> </strong><input id="homeworkTitle" style="width: 140px; margin-top: 10px;" name="homeworkTitle" class="easyui-textbox" placeholder="请在此输入作业标题……"/></div><br>
</div>
<div id="buttons" style="width:850px;margin-top:30px; float:left; display:block;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" href="#" style="margin-left: 200px; text-align: center;" onclick="AddHomeWork()">保存</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-back'" href="../TeaQueryHomework/Index" style="margin-left: 300px; text-align: center;">返回</a>
@* 加载编辑器 *@
<script id="container" name ="content" type="text/plain" style = "width: 850px; height: 400px; margin-top: 15px; margin-left: 360px; float:right";>请在此输入作业内容……</script>
<script type="text/javascript">
var editor = UE.getEditor('container');//创建百度编辑器
</script>
</div>
</body>
</html>
</strong>
DatagridOperate.js
<strong>//添加作业-何丽杰-2016-02-16
function AddHomeWork() {
// 判断年份是否为空
var year = $('#cmbSchoolYear').combobox('getText');
if (year == "") {
$.messager.alert('提醒', '年份不能为空！', 'Info');
return;
}
//判断课程是否为空
var course = $('#cmbCourse').combobox('getValue');
if (course == "") {
$.messager.alert('提醒', '课程不能为空！', 'Info');
return;
}
//判断班级是否为空
var classes = $('#cmbOnClass').combobox('getValue');
if (classes == "") {
$.messager.alert('提醒', '班级不能为空！', 'Info');
return;
}
//获取作业类型
//var Type = $('#homeworkType').combobox('getValue');
var Type = document.getElementById("homeworkType").value;
//判断作业标题是否为空
var title = document.getElementById("homeworkTitle").value;
if (title == "") {
$.messager.alert('提醒', '作业标题不能为空！', 'Info');
return;
}
//获取作业内容
var content = editor.getContent();
//获取带格式的内容
//var content = editor.getPlainTxt();
if (content == "") {
$.messager.alert('提醒', '作业内容不能为空！', 'Info');
return;
}
$.ajax({
type: "post",
url: "/TeaQueryHomework/AddHomework",
data:{
"SchoolYear":year,
"courseID":course,
"courseName":$('#cmbCourse').combobox('getText'),
"temporaryClassID":classes,
"temporaryClassName":$('#cmbOnClass').combobox('getText'),
"homeworkTitle":title,
"HomeworkContent":content,
"type":Type
},
success: function (data) {
$.messager.show({
title: "操作提示",
msg: "教师添加作业成功！ ",
timeout: 5000,
showType: 'slide'
})
},
error: function () {
$.messager.alert('操作提示',"作业添加失败，请联系管理员");
}
});
}
</strong>
TeaQueryHomeworkController.cs
<strong> #region AddHomework-添加作业-何丽杰-2016-02-13
/// <summary>
/// 添加作业
/// </summary>
/// <param name="Homework"></param>
/// <returns></returns>
[HttpPost]
[ValidateInput(false)]//解决百度编辑器出现“检测到有潜在危险的 Request.Form 值”的问题。
public void AddHomework()
{
ResultLeaveHomeworkViewModel con = new ResultLeaveHomeworkViewModel();
string strTitle = Request["homeworkTitle"];
string dtTime = DateTime.Now.ToString();
string strTimes = "12";
string schoolYear = Request["schoolYear"];
string homeworkType = Request["type"];
//由于使用CAS登录界面中并没有selfguid,暂时赋值-何丽杰-2016-01-23
string teacherID = "92252611-8784-4741-a4b8-002e9ece2055";
string teacherName = "韩金裕";
string courseID = Request["courseID"];
string courseName = Request["courseName"];
string temporatoyClassID = Request["temporaryClassID"];
string temporatoryName = Request["temporaryClassName"];
string homeworkContent = Request["HomeworkContent"];//获取百度编辑器中的作业内容
con.resultLeaveHomeworkID = System.Guid.NewGuid();
con.SchoolYear = schoolYear;
con.teacherID = teacherID;
con.TeacherName = teacherName;
con.temporaryClassID = temporatoyClassID;
con.temporaryClassName = temporatoryName;
con.CourseID = courseID;
con.CourseName = courseName;
con.times = strTimes;
con.homeworkTitle = strTitle;
con.isDeleted = 0;
con.type = homeworkType;
con.HomeworkContent = homeworkContent;
con.leaveDate = Convert.ToDateTime(dtTime); //将字符串形式的时间转换为datetime格式
LeaveHomework.AddWork(con);
}
#endregion</strong>
5、效果图
三、学习心得
1、第三方插件的使用大大的简化了我们开发任务。
2、刚开始的时候自己对这一部分比较抵触，其实积极主动地去研究，没有什么解决不了的。
3、不懂的地方可以参考网络中的分享，也可以找旁边的人交流，只要你有信心做好，那就一定能做好。