kevinli
/
educoder
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

实训新建、预备知识、配置页面的markdown自动保存

This commit is contained in:
cxt 2017-07-21 10:03:30 +08:00
parent c15080f5da
commit cbf111179b
5 changed files with 91 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
app/views/shixuns/_form.html.erb
View File

@ -139,6 +139,8 @@
}
window.onload = function(){
console.log(shixun_editormd);
$("#shixun_introduction [type=\"latex\"]").bind("click", function(){
shixun_editormd.cm.replaceSelection("```latex");
shixun_editormd.cm.replaceSelection("\n");
@ -175,8 +177,8 @@
};
$(function(){
// md_elocalStorage($("textarea[name='shixun[description]']"),"shixun_in_<%#= User.current.id %>","in");
// md_elocalStorage($("textarea[name='shixun[propaedeutics]']"),"shixun_pr_<%#= User.current.id %>","pr");
md_elocalStorage(shixun_editormd,"shixun_in_<%= User.current.id %>","in");
md_elocalStorage(shixun_propaedeutics,"shixun_pr_<%= User.current.id %>","pr");
//$("textarea[name='shixun[description]']").md_elocalStorage();
// 防止刷新页面后适用课程的下拉列表为空
@ -259,123 +261,15 @@
$(".lesson_checkbox").html("");
}
});
// var editor_in;
// var editor_pr;
// function md_elocalStorage(editor,mdu,id){
// if (window.sessionStorage){
// if(id=="in"){
// editor_in = editor;
// } else{
// editor_pr = editor;
// }
// var oc = window.sessionStorage.getItem('content'+mdu);
// if(oc !== null ){
// var h = '您上次有已保存的数据，是否<a style="cursor: pointer;" class="link-color-blue" onclick="md_rec_data(\'content\',\''+ mdu + '\',\'' + id + '\')">恢复</a> ? / <a style="cursor: pointer;" class="link-color-blue" onclick="md_clear_data(\'content\',\''+ mdu + '\',\'' + id + '\')">不恢复</a>';
// $("#e_tips_"+id).html(h);
// }
// setInterval(function() {
// d = new Date();
// var h = d.getHours();
// var m = d.getMinutes();
// var s = d.getSeconds();
// h = h < 10 ? '0' + h : h;
// m = m < 10 ? '0' + m : m;
// s = s < 10 ? '0' + s : s;
// if(editor.val().trim() != ""){
// md_add_data("content",mdu,editor.val());
// var id1 = "#e_tip_"+id;
// var id2 = "#e_tips_"+id;
// $(id1).html(" 数据已于 " + h + ':' + m + ':' + s +" 保存 ");
// $(id2).html("");
// }
// },10000);
//
// }else{
// $('.ke-edit').after('您的浏览器不支持localStorage.无法开启自动保存草稿服务,请升级浏览器！');
// }
// }
// function md_add_data(k,mdu,d){
// console.log(d);
// window.sessionStorage.setItem(k+mdu,d);
// }
// function md_rec_data(k,mdu,id){
// if(window.sessionStorage.getItem(k+mdu) !== null){
// if(id == "in"){
// editor_in.val(window.sessionStorage.getItem(k+mdu));
// } else{
// editor_pr.val(window.sessionStorage.getItem(k+mdu));
// }
// if(id == "pr"){
// console.log(shixun_propaedeutics);
// /* --------------------------------- 预备知识 -------------------------------------- */
// var shixun_propaedeutics = editormd("shixun_propaedeutics", {
// width : "89.7%",
// height : 300,
// syncScrolling : "single",
// //你的lib目录的路径，我这边用JSP做测试的
// path : "/editormd/lib/",
// tex : true,
// toolbarIcons : function() {
// // Or return editormd.toolbarModes[name]; // full, simple, mini
// // Using "||" set icons align right.
// return ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear" ]
// },
// toolbarCustomIcons : {
// testIcon : "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>",
// testIcon1 : "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>"
// },
// //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
// saveHTMLToTextarea : true,
// autoFocus: false,
// // 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
// dialogMaskOpacity : 0.6,
// placeholder: "请输入完成当前任务依赖的知识点或者其它相关信息",
// imageUpload : true,
// imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
// imageUploadURL : "<%= upload_with_markdown_path(:container_id => @shixun.id, :container_type => @shixun.class) %>" //url
// });
// shixun_propaedeutics.getHTML();
// } else{
// var shixun_editormd = editormd("shixun_introduction", {
// width : "89.7%",
// height : 300,
// syncScrolling : "single",
// //你的lib目录的路径，我这边用JSP做测试的
// path : "/editormd/lib/",
// tex : true,
// toolbarIcons : function() {
// // Or return editormd.toolbarModes[name]; // full, simple, mini
// // Using "||" set icons align right.
// return ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear" ]
// },
//
// toolbarCustomIcons : {
// testIcon : "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>",
// testIcon1 : "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>"
// },
// //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
// saveHTMLToTextarea : true,
// autoFocus: false,
// // 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
// dialogMaskOpacity : 0.6,
// placeholder: "请输入完成当前任务依赖的知识点或者其它相关信息",
// imageUpload : true,
// imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
// imageUploadURL : "<%= upload_with_markdown_path(:container_id => @shixun.id, :container_type => @shixun.class) %>" //url
// });
// shixun_editormd.getHTML();
// }
// md_clear_data(k,mdu,id);
// }
// }
// function md_clear_data(k,mdu,id){
// window.sessionStorage.removeItem(k+mdu);
// var id1 = "#e_tip_"+id;
// var id2 = "#e_tips_"+id;
// if(k == 'content'){
// $(id2).html("");
// }else{
// $(id1).html("");
// }
// }
function md_rec_data(k,mdu,id){
if(window.sessionStorage.getItem(k+mdu) !== null){
if(id == "in"){
shixun_editormd.setValue(window.sessionStorage.getItem(k+mdu));
} else{
shixun_propaedeutics.setValue(window.sessionStorage.getItem(k+mdu));
}
md_clear_data(k,mdu,id);
}
}
</script>

2
app/views/shixuns/_settings_edit.html.erb
View File

@ -11,6 +11,8 @@
<div id="setting_introduction" class="new_li fl" style="margin-bottom: 0px">
<textarea name="shixun[description]"><%= @shixun.description %></textarea>
</div>
<p id="e_tip_in" style="margin-left: 10%" class="c_grey"></p>
<p id="e_tips_in" style="margin-left: 10%" class="c_grey"></p>
</li>
<!-- <li class="clearfix">
<label class="panel-form-label fl">预备知识：</label>

10
app/views/shixuns/_settings_show.html.erb
View File

@ -59,6 +59,7 @@
sequenceDiagram: true // 默认不解析
});
});
var editor;
function edit_shixun(){
$("#shixun_settings_show").hide();
$("#shixun_settings_edit").show();
@ -108,5 +109,14 @@
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
imageUploadURL : "<%= upload_with_markdown_path(:container_id => @shixun.id, :container_type => @shixun.class) %>" //url
});
md_elocalStorage(setting_editormd,"shixun_in_<%= User.current.id %>_<%= @shixun.id %>","in");
editor = setting_editormd;
}
function md_rec_data(k,mdu,id){
if(window.sessionStorage.getItem(k+mdu) !== null){
editor.setValue(window.sessionStorage.getItem(k+mdu));
md_clear_data(k,mdu,id);
}
}
</script>

13
app/views/shixuns/propaedeutics.html.erb
View File

@ -22,6 +22,8 @@
<div id="shixuns_propaedeutics" class="new_li fl" style="margin-bottom: 0px">
<textarea name="shixun[propaedeutics]"><%= @shixun.propaedeutics %></textarea>
</div>
<p id="e_tip_pr" style="margin-left: 10%" class="c_grey"></p>
<p id="e_tips_pr" style="margin-left: 10%" class="c_grey"></p>
</li>
<li class="clearfix">
<a href="javascript:void(0)" class="task-btn task-btn-green fr " onclick="$('#update_propaedeutics').submit();" >保存</a>
@ -51,6 +53,7 @@
flowChart: true, // 默认不解析
sequenceDiagram: true // 默认不解析
});
var editor;
/* ----------------------编辑预备知识---------------------- */
$("#edit_propaedeutics").on("click", function(){
@ -102,9 +105,17 @@
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
imageUploadURL : "<%= upload_with_markdown_path(:container_id => @shixun.id, :container_type => @shixun.class) %>" //url
});
})
md_elocalStorage(shiuxn_p_editormd,"shixun_pr_<%= User.current.id %>_<%= @shixun.id %>","pr");
editor = shiuxn_p_editormd;
});
function cancel_editor_pattern() {
$("#edit_propaedeutics").trigger("click");
}
function md_rec_data(k,mdu,id){
if(window.sessionStorage.getItem(k+mdu) !== null){
editor.setValue(window.sessionStorage.getItem(k+mdu));
md_clear_data(k,mdu,id);
}
}
</script>

52
public/javascripts/edu/application.js
View File

@ -1018,4 +1018,56 @@ function shixun_link(shixun) {
}
function subject_link(id){
window.open('/subjects/' + id);
}
// markdown的自动保存
function md_elocalStorage(editor,mdu,id){
if (window.sessionStorage){
var oc = window.sessionStorage.getItem('content'+mdu);
if(oc !== null ){
var h = '您上次有已保存的数据，是否<a style="cursor: pointer;" class="link-color-blue" onclick="md_rec_data(\'content\',\''+ mdu + '\',\'' + id + '\')">恢复</a> ? / <a style="cursor: pointer;" class="link-color-blue" onclick="md_clear_data(\'content\',\''+ mdu + '\',\'' + id + '\')">不恢复</a>';
$("#e_tips_"+id).html(h);
}
setInterval(function() {
d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
if(editor.getValue().trim() != ""){
md_add_data("content",mdu,editor.getValue());
var id1 = "#e_tip_"+id;
var id2 = "#e_tips_"+id;
$(id1).html(" 数据已于 " + h + ':' + m + ':' + s +" 保存 ");
$(id2).html("");
}
},10000);
}else{
$("#e_tip_"+id).after('您的浏览器不支持localStorage.无法开启自动保存草稿服务,请升级浏览器！');
}
}
// 保存数据
function md_add_data(k,mdu,d){
window.sessionStorage.setItem(k+mdu,d);
}
// 恢复数据
//function md_rec_data(k,mdu,id, editor){
// if(window.sessionStorage.getItem(k+mdu) !== null){
// editor.setValue(window.sessionStorage.getItem(k+mdu));
// md_clear_data(k,mdu,id);
// }
//}
// 清空保存的数据
function md_clear_data(k,mdu,id){
window.sessionStorage.removeItem(k+mdu);
var id1 = "#e_tip_"+id;
var id2 = "#e_tips_"+id;
if(k == 'content'){
$(id2).html("");
}else{
$(id1).html("");
}
}