forked from mirror/MrDoc
200 lines
8.0 KiB
HTML
200 lines
8.0 KiB
HTML
{% load staticfiles %}
|
|
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>修改文档 - MrDoc</title>
|
|
<link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
|
|
<link rel="stylesheet" href="{% static 'editor.md/css/editormd.css' %}" />
|
|
<link href="{% static 'style.css' %}" rel="stylesheet">
|
|
<style>
|
|
ul li{
|
|
list-style:disc;
|
|
}
|
|
ol li{
|
|
list-style-type: decimal;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="layui-layout-body">
|
|
<div class="layui-header">
|
|
<div class="layui-main">
|
|
<a class="logo" href="{% url 'pro_list' %}">
|
|
<img src="/media/logo.png" />
|
|
</a>
|
|
<div class="component">
|
|
<div class="layui-input-inline">
|
|
<input class="layui-input" placeholder="搜索文集"/>
|
|
</div>
|
|
</div>
|
|
<ul class="layui-nav layui-layout-right">
|
|
{% if request.user.is_authenticated %}
|
|
<li class="layui-nav-item">
|
|
<a href="javascript:void(0);">
|
|
<i class="layui-icon layui-icon-username"></i> {{request.user.username}}
|
|
</a>
|
|
<dl class="layui-nav-child">
|
|
<!-- <dd><a href="">基本资料</a></dd> -->
|
|
<dd><a href="javascript:void(0);">修改密码</a></dd>
|
|
<dd><a href="{% url 'logout' %}">退出登录</a></dd>
|
|
</dl>
|
|
</li>
|
|
{% else %}
|
|
<li class="layui-nav-item">
|
|
<a href="javascript:void(0);">
|
|
<i class="layui-icon layui-icon-username"></i> 游客
|
|
</a>
|
|
<dl class="layui-nav-child">
|
|
<!-- <dd><a href="">基本资料</a></dd> -->
|
|
<dd><a href="javascript:void(0);">注册</a></dd>
|
|
<dd><a href="{% url 'login' %}">登录</a></dd>
|
|
</dl>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="layui-main">
|
|
<div class="create-doc-form">
|
|
{# 文档标题#}
|
|
<div class="layui-form">
|
|
<label class="layui-form-label">文档标题</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题" value="{{ doc.name }}" class="layui-input" >
|
|
</div>
|
|
<label class="doc-form-label">所属文集</label>
|
|
<div class="layui-input-inline">
|
|
<select name="pro_id" lay-verify="required" lay-filter="project" id="project" disabled>
|
|
<option value="{{ project.id }}">{{ project.name }}</option>
|
|
</select>
|
|
</div>
|
|
<label class="doc-form-label">上级文档</label>
|
|
<div class="layui-input-inline">
|
|
<select name="parent_id" lay-verify="required" id="parent-doc">
|
|
<option value="0"></option>
|
|
{# {% for docs in doc_list %}#}
|
|
{# {% if doc.parent_doc == docs.id %}#}
|
|
{# <option value="{{ docs.id }}" selected>{{ docs.name }}</option>#}
|
|
{# {% else %}#}
|
|
{# <option value="{{ docs.id }}">{{ docs.name }}</option>#}
|
|
{# {% endif %}#}
|
|
{# {% endfor %}#}
|
|
</select>
|
|
</div>
|
|
<label class="doc-form-label">
|
|
<button class="layui-btn layui-btn-primary">插入模板</button>
|
|
</label>
|
|
<label class="doc-form-label">
|
|
<button class="layui-btn layui-btn-normal" onclick="createDoc()">保存</button>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="editor-md">
|
|
<textarea style="display:none;">{{ doc.pre_content }}</textarea>
|
|
<textarea class="editormd-html-textarea" name="$id-html-code"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
|
|
<script src="{% static 'layui/layui.all.js' %}"></script>
|
|
<script src="{% static 'editor.md/editormd.min.js' %}"></script>
|
|
{% block custom_script %}
|
|
<script>
|
|
layui.config({
|
|
base: "/static/layui/module/"
|
|
}).extend({
|
|
treeSelect: "treeSelect/treeSelect"
|
|
});
|
|
$.ajaxSetup({
|
|
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
|
|
});
|
|
//初始化editormd
|
|
var editor = editormd("editor-md", {
|
|
width : "100%",
|
|
height : "1000px;",
|
|
placeholder : "开始使用Markdown书写……",
|
|
path : "/static/editor.md/lib/",
|
|
saveHTMLToTextarea : true,
|
|
tex : true,//开启科学公式
|
|
tocm : true,//开启下拉目录
|
|
taskList : true,//开启任务列表
|
|
tocTitle : '文章导读',//目录标题
|
|
tocContainer: '',
|
|
tocDropdown : false,
|
|
emoji : true,//开启Emoji
|
|
imageUpload : true, //开启图片上传
|
|
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
|
|
imageUploadURL : "{% url 'upload_doc_img' %}",
|
|
});
|
|
//粘贴上传图片
|
|
$("#editor-md").on('paste', function (ev) {
|
|
var data = ev.clipboardData;
|
|
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
|
|
for (var index in items) {
|
|
var item = items[index];
|
|
if (item.kind === 'file') {
|
|
var blob = item.getAsFile();
|
|
var reader = new FileReader();
|
|
reader.onload = function (event) {
|
|
var base64 = event.target.result;
|
|
//ajax上传图片
|
|
$.post("{% url 'upload_doc_img' %}",{base:base64}, function (ret) {
|
|
layer.msg(ret.message);
|
|
if (ret.success === 1) {
|
|
//新一行的图片显示
|
|
editor.insertValue("\n![](" + ret.url + ")");
|
|
}
|
|
});
|
|
}; // data url!
|
|
var url = reader.readAsDataURL(blob);
|
|
}
|
|
}
|
|
});
|
|
var layer = layui.layer;
|
|
var form = layui.form;
|
|
$(function(){
|
|
var doc_parent_id = {{ doc.parent_doc }};
|
|
$.post('{% url 'get_pro_doc' %}',{'pro_id':$("#project").val()},function(r){
|
|
|
|
if(r.status){
|
|
//解析文集的下级文档
|
|
for(let i in r.data) {
|
|
console.log(doc_parent_id,r.data[i][2])
|
|
if(r.data[i][0] == doc_parent_id){
|
|
$("#parent-doc").append("<option value='"+r.data[i][0]+"' selected>"+r.data[i][3]+r.data[i][1]+"</option>")
|
|
}else{
|
|
$("#parent-doc").append("<option value='"+r.data[i][0]+"'>"+r.data[i][3]+r.data[i][1]+"</option>")
|
|
}
|
|
};
|
|
form.render();
|
|
}else{
|
|
layer.msg("获取下级文档失败！")
|
|
}
|
|
});
|
|
});
|
|
//保存文档
|
|
createDoc = function(){
|
|
var data = {
|
|
'doc_id':{{ doc.id }},
|
|
'project':$("#project").val(),
|
|
'parent_doc':$("#parent-doc").val(),
|
|
'doc_name':$("#doc-name").val(),
|
|
'content':editor.getHTML(),
|
|
'pre_content':editor.getMarkdown(),
|
|
}
|
|
$.post("{% url 'modify_doc' doc_id=doc.id %}",data,function(r){
|
|
if(r.status){
|
|
//创建成功
|
|
layer.msg('保存成功，即将跳转',function(){
|
|
window.location.href = "{% url 'doc' pro_id=doc.top_doc doc_id=doc.id %}";
|
|
});
|
|
}else{
|
|
//创建失败
|
|
layer.msg('保存失败');
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
{% endblock %}
|
|
</body>
|
|
</html> |