MrDoc/template/app_doc/editor/create_doc.html

406 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends 'app_doc/editor/create_base.html' %}
{% load static %}
{% load i18n %}
{% block title %}新建文档{% endblock %}
{% block head_toolbar %}
<ul class="layui-nav layui-form">
<a class="btn pull-left js-toolbar-action" aria-label="" href="javascript:void(0);" title="切换侧边栏">
<i class="fa fa-align-justify"></i>
</a>
<li class="layui-nav-item mrdoc-import-doc-item">
<a href="javascript:;"><i class="fa fa-file-text layui-hide-md"></i><span class="layui-hide-xs">文档</span></a>
<dl class="layui-nav-child mrdoc-import-doc-child">
<dd><a href="javascript:void(0);" id="doc-tag-set">文档标签</a></dd>
<hr>
<dd><input type="checkbox" name="open-children" title="展开下级目录" lay-skin="primary"></dd>
<dd><input type="checkbox" name="show-children" title="显示下级文档" lay-skin="primary"></dd>
</dl>
</li>
<li class="layui-nav-item mrdoc-import-doc-item">
<a href="javascript:;"><i class="fa fa-upload layui-hide-md"></i><span class="layui-hide-xs">导入</span></a>
<dl class="layui-nav-child mrdoc-import-doc-child"> <!-- 二级菜单 -->
<dd><a href="javascript:void(0);" id="sel-doctemp">
<svg t="1608814405819" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3399" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M0 0h475.904v335.36H0z" fill="#52adff" p-id="3400"></path><path d="M591.36 667.050667H1024V1024H591.36z" fill="#1892ff" p-id="3401"></path><path d="M0 450.730667h475.904V1024H0z" fill="#83c5fd" p-id="3402"></path><path d="M591.36 0H1024v551.68H591.36z" fill="#52afff" p-id="3403"></path></svg>
文档模板</a>
</dd>
<input type="file" id="insert-local-file" onchange="insertLocalFile(this)" style="display:none;">
<dd><a href="javascript:void(0);" id="sel-local" onclick="selectLocalFile()">
<svg t="1608814859854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4936" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M967.610182 280.878545v626.455273a113.361455 113.361455 0 0 1-113.361455 113.384727H173.870545A113.361455 113.361455 0 0 1 60.509091 907.333818V113.594182A113.291636 113.291636 0 0 1 173.847273 0.209455h513.093818l280.669091 280.599272v0.069818z" fill="#2475FE" p-id="4937"></path><path d="M686.964364 167.493818V0.069818l280.669091 280.669091h-167.214546A113.361455 113.361455 0 0 1 687.010909 167.330909l-0.069818 0.139636z" fill="#8AB3F7" p-id="4938"></path><path d="M346.763636 425.402182h311.901091v58.740363H346.786909v-58.740363z m185.134546 58.740363v256.791273h-58.647273V484.212364h58.647273v-0.069819z" fill="#FFFFFF" p-id="4939"></path></svg>
文本文件</a></dd>
<dd><a href="javascript:void(0);" id="doc-cache-btn">
<svg t="1608814983993" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6507" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M0 0h1024v1024H0z" fill="#D8D8D8" fill-opacity="0" p-id="6508"></path><path d="M58.514286 220.7744h819.2a58.514286 58.514286 0 0 1 58.514285 58.514286v367.381943a117.028571 117.028571 0 0 1-117.028571 117.028571H175.542857a117.028571 117.028571 0 0 1-117.028571-117.028571V220.7744z" fill="#005DE8" opacity=".2" p-id="6509"></path><path d="M402.373486 193.653029m29.257143 0l104.360228 0q29.257143 0 29.257143 29.257142l0 22.9376q0 29.257143-29.257143 29.257143l-104.360228 0q-29.257143 0-29.257143-29.257143l0-22.9376q0-29.257143 29.257143-29.257142Z" fill="#FFDB00" p-id="6510"></path><path d="M245.467429 193.653029m29.257142 0l134.582858 0q29.257143 0 29.257142 29.257142l0 22.9376q0 29.257143-29.257142 29.257143l-134.582858 0q-29.257143 0-29.257142-29.257143l0-22.9376q0-29.257143 29.257142-29.257142Z" fill="#3289FF" p-id="6511"></path><path d="M194.852571 175.542857c48.830171 0 90.667886 29.9008 108.222172 72.411429H877.714286a58.514286 58.514286 0 0 1 58.514285 58.514285V732.306286a58.514286 58.514286 0 0 1-58.514285 58.514285H117.028571a58.514286 58.514286 0 0 1-58.514285-58.514285V234.057143a58.514286 58.514286 0 0 1 58.514285-58.514286h77.824z" fill="#005DE8" p-id="6512"></path><path d="M221.827657 617.033143c16.852114 0 33.440914-3.159771 44.763429-7.3728v-44.500114a124.5184 124.5184 0 0 1-42.130286 6.582857c-25.8048 0-37.390629-9.479314-37.390629-48.713143 0-37.390629 10.269257-49.7664 36.600686-49.7664 15.008914 0 28.437943 2.369829 40.813714 6.846171V435.6096c-11.322514-4.213029-27.121371-6.582857-45.026742-6.582857-54.769371 0-89.790171 23.434971-89.790172 94.0032 0 76.624457 36.337371 94.0032 92.16 94.0032z m132.183772-147.192686c-10.269257 0-25.541486 0.526629-36.337372 2.369829v41.866971a172.909714 172.909714 0 0 1 29.227886-2.369828l7.519086 0.146285c14.628571 0.643657 18.666057 3.8912 19.338971 16.442515h-29.227886c-41.340343 0-60.035657 12.112457-60.035657 44.763428 0 30.544457 18.695314 43.973486 48.449829 43.973486 25.014857 0 37.127314-8.689371 41.340343-15.798857l3.949714 13.165714h45.290057v-96.636343c0-33.1776-19.748571-47.9232-69.514971-47.9232z m-5.266286 110.065372c-10.269257 0-15.798857-1.8432-15.798857-9.216 0-7.723886 4.213029-10.357029 17.086171-10.737372l23.727543-0.058514v11.0592c-3.949714 5.002971-12.639086 8.952686-25.014857 8.952686z m174.577371 37.127314c13.165714 0 30.017829-2.106514 38.180572-5.5296v-39.760457a74.986057 74.986057 0 0 1-28.437943 4.739657c-21.855086 0-32.914286-6.582857-32.914286-33.1776 0-26.331429 11.585829-33.704229 31.861029-33.704229 9.742629 0 18.168686 1.053257 27.648 4.476343v-40.5504c-9.479314-2.896457-23.698286-3.949714-36.337372-3.949714-46.343314 0-73.728 15.272229-73.728 73.728s27.384686 73.728 73.728 73.728z m158.5152-147.456c-23.9616 0-37.390629 7.636114-43.973485 17.905371V414.281143h-50.029715V614.4h50.029715v-92.16c1.8432-7.636114 7.3728-13.165714 20.2752-13.165714 15.798857 0 20.2752 2.896457 20.2752 20.538514V614.4h50.029714v-96.109714c0-34.494171-13.165714-48.713143-46.606629-48.713143z m209.334857 64.512c0-43.446857-13.692343-64.512-64.248685-64.512-47.133257 0-74.517943 15.272229-74.517943 73.728s27.384686 73.728 72.148114 73.728c28.174629 0 50.819657-5.266286 59.509029-11.322514v-36.864c-8.426057 5.002971-30.281143 10.269257-49.503086 10.269257-18.168686 0-29.4912-5.002971-32.387657-17.378743l87.420343-5.266286c0.789943-2.106514 1.579886-10.795886 1.579885-22.381714z m-89.263542-6.319543c1.053257-17.642057 8.426057-21.591771 25.278171-21.591771 15.798857 0 19.748571 7.3728 19.748571 18.168685l-45.026742 3.423086z" fill="#FFFFFF" p-id="6513"></path></svg>
文档缓存</a></dd>
<dd><a href="javascript:void(0);" id="import-doc-docx">
<svg t="1608815050013" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7356" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M535.119473 0h69.599248v95.247413C729.226717 96.331138 853.614299 93.92286 977.881468 96.331138a40.459078 40.459078 0 0 1 44.914393 45.516463c2.047037 234.566322 0 469.614299 1.204139 703.819379-1.204139 24.082785 2.287865 50.694262-11.318909 72.248354-16.978363 12.041392-38.893697 10.837253-58.761994 12.041392h-349.200376V1023.518344h-72.248354C354.980245 990.886171 177.490122 960.541863 0 928.752587V95.488241C178.33302 63.578551 356.786453 32.511759 535.119473 0z" fill="#2A5699" p-id="7357"></path><path d="M604.718721 131.010348H988.598307v761.979304H604.718721v-95.247413h302.479774v-48.165569H604.718721v-59.002822h302.479774v-48.16557H604.718721v-59.002822h302.479774v-48.165569H604.718721v-60.206961h302.479774V428.673565H604.718721v-60.206961h302.479774v-46.96143H604.718721v-59.604892h302.479774V214.336783H604.718721zM240.827846 341.373471c22.156162-1.324553 44.19191-2.287865 66.348071-3.492003 15.533396 80.4365 31.30762 160.632173 48.165569 240.827845 13.125118-82.724365 27.695202-165.087488 41.783632-247.571025 23.239887-0.842897 46.479774-2.167451 69.719661-3.612418-26.370649 115.356538-49.369708 231.796802-78.148636 346.430856-19.386642 10.355597-48.165569 0-71.52587 1.204139C301.034807 596.169332 283.093133 517.779868 269.245532 438.667921c-13.606773 76.944497-31.30762 153.16651-46.841016 229.508937-22.39699-1.204139-44.793979-2.528692-67.311383-4.094073-19.266228-104.760113-42.024459-208.918156-60.206962-313.919097 19.868297-0.963311 39.857008-1.806209 60.206962-2.528693 12.041392 75.860771 25.648166 151.360301 36.124177 227.341487 16.135466-77.907808 32.873001-155.695202 49.610536-233.603011z" fill="#FFFFFF" p-id="7358"></path></svg>
Word文档(.docx)</a></dd>
</dl>
</li>
<li class="layui-nav-item mrdoc-import-doc-item">
<a href="javascript:;"><i class="fa fa-edit layui-hide-md"></i><span class="layui-hide-xs">编辑器</span></a>
<dl class="layui-nav-child mrdoc-import-doc-child"> <!-- 二级菜单 -->
<dd><a href="?pid={{pid}}&eid=1">EditorMD{% if editor_mode == 1 %}<span class="layui-badge-dot layui-bg-blue"> </span>{% endif %}</a></dd>
<dd><a href="?pid={{pid}}&eid=2">Vditor{% if editor_mode == 2 %}<span class="layui-badge-dot layui-bg-blue"> </span>{% endif %}</a></dd>
<dd><a href="?pid={{pid}}&eid=3">iceEditor{% if editor_mode == 3 %}<span class="layui-badge-dot layui-bg-blue"> </span>{% endif %}</a></dd>
</dl>
</li>
<li class="layui-nav-item mrdoc-import-doc-item">
<a href="{% url 'user_center' %}" target="_blank"><i class="fa fa-dashboard layui-hide-md"></i><span class="layui-hide-xs">管理</span></a>
</li>
<button class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius pull-right" style="margin-top:10px;" title="发布文档" id="pub_doc">发布</button>
<button class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius pull-right" style="margin-top:10px;" title="保存文档为草稿状态" id="save_doc">保存</button>
</ul>
{% endblock %}
{% block left_opera %}
<div class="layui-form" style="padding: 0 10px 10px 10px;" lay-filter="left_form">
<div class="layui-row">
<!-- 选择文集 -->
<div class="layui-col-md12" style="margin-bottom: 10px;">
<div class="layui-input-inblock">
<select name="pro_id" lay-verify="required" lay-filter="project" id="project" lay-search>
<option value="">请选择一个文集(必选)</option>
<option value="-1">新建文集</option>
<!-- 自己的文集 -->
<optgroup label="自有文集" id="self-project">
{% for p in project_list %}
{% if p.role == 1 %}
<option value="{{ p.id }}">[私密]《{{ p.name }}》</option>
{% elif p.role == 2 %}
<option value="{{ p.id }}" >[指定用户]《{{ p.name }}》</option>
{% elif p.role == 3 %}
<option value="{{ p.id }}" >[访问码]《{{ p.name }}》</option>
{% else %}
<option value="{{ p.id }}" >[公开]《{{ p.name }}》</option>
{% endif %}
{% endfor %}
</optgroup>
<!-- 协作的文集 -->
{% if colla_project_list.count > 0 %}
<optgroup label="协作文集">
{% for p in colla_project_list %}
<option value="{{ p.project.id }}">[协作]《{{ p.project.name }}》</option>
{% endfor %}
</optgroup>
{% endif %}
</select>
</div>
</div>
<!-- 设置文档排序 -->
<div class="layui-row">
<div class="layui-col-md12" style="margin-bottom: 10px;">
<span>点击文档树选择上级(可选)或</span>
<button class="layui-btn layui-btn-xs layui-btn-primary" id="clearParentDoc">取消上级</button>
<input type="text" id="parent-doc" hidden>
</div>
<div class="layui-col-md12">
<input type="number" class="layui-input" placeholder="输入文档排序值默认99" id="sort">
</div>
</div>
<div class="layui-colla-content layui-show" style="max-height: 100%;overflow: hidden;overflow-y: hidden;overflow-x: scroll;">
<div id="doc-tree"></div>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="create-doc-form">
<div class="layui-form">
<!-- 标题 -->
<div style="padding-bottom:10px;">
<div class="layui-input-block" style="margin-left:0px;">
<input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题……" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div id="editor-md" class="layui-col-xs12">
{% if editor_mode == 1 %}
<textarea style="display:none;"></textarea>
{% endif %}
</div>
{% endblock %}
{% block custom_div %}
{% include 'app_doc/editor/tpl_editor_div_doc.html' %}
{% endblock %}
{% block custom_script %}
<script>
form.val("left_form",{
"select_editor_mode":'{{editor_mode}}'
})
form.on('select(select_editor_mode)',function(data){
//console.log(data.value)
layer.open({
type:0,
title:'切换编辑器',
area:'300px;',
id:'change_editor',//配置ID
content: "为确保格式兼容,切换编辑器将导致未保存内容丢失!",
btn:['确定切换','取消'], //添加按钮
btnAlign:'c', //按钮居中
yes:function (index,layero) {
eurl = "{% url 'create_doc' %}?pid={{pid}}&eid=" + data.value.toString();
$(location).attr('href', eurl);
},
btn2: function(index, layero){
//暂时不需要返回
}
});
})
var tree = layui.tree;
//选择文集
form.on('select(project)', function(data){
console.log('选择文集:',data.value); //得到被选中的值
if(data.value == -1){ //新建文集
layer.open({
type:1,
title:'新建文集',
area:'300px;',
id:'createPro',//配置ID
content: $('#create-project-div'),
btn:['确定','取消'], //添加按钮
btnAlign:'c', //按钮居中
yes:function (index,layero) {
data = {
'pname':$("#pname").val(),
'desc':$("#desc").val(),
'role':$("#project-role").val(),
}
$.post("{% url 'create_project' %}",data,function(r){
if(r.status){
var role_str = r.data.role == 0 ? '公开':'私密'
//创建成功更新文集select
$("#self-project").append("<option value="+r.data.id+">["+role_str+"]《"+r.data.name+"》</option>");
$("#project").val(r.data.id);
form.render();
layer.close(index);
}else{
//创建失败,提示
console.log(r)
}
})
},
});
}else{//获取文集的下级文档
$.post("{% url 'get_pro_doc_tree' %}",{'pro_id':data.value},function(r){
if(r.status){
var doc_tree = tree.render({
elem:"#doc-tree",
id:'docTree',
// showCheckbox:true,
onlyIconControl:true,
data:r.data,
text: {
defaultNodeName: '未命名' //节点默认名称
,none: '文集暂无文档' //数据为空时的提示文本
},
click: function(obj){
//console.log(obj.data); //得到当前点击的节点数据
// console.log(obj.state); //得到当前节点的展开状态open、close、normal
// console.log(obj.elem); //得到当前节点元素
if(obj.data.level != 3){
$('#parent-doc').val(obj.data.id);// 设置上级文档
$("div.layui-tree-set").each(function(i){
var $me = $(this)
if($me.data('id') == obj.data.id){
// console.log('点击了')
layer.msg("你选择了上级文档:"+obj.data.title)
$me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
}else{
$me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
}
});
}else{
layer.msg("第三级文档不能作为上级文档")
}
}
});
}else{
layer.msg("获取下级文档失败!")
}
});
}
});
//带pid参数自动选择文集
var sel_pro_list = $('dl.layui-anim dd');
for(var i = 0;i < sel_pro_list.length; i++){
if(sel_pro_list[i].getAttribute('lay-value') == '{{pid}}'){
var sel_pro = 'dd[lay-value=' + sel_pro_list[i].getAttribute('lay-value') + ']';
$('#project').siblings("div.layui-form-select").find('dl').find(sel_pro).click();
}
};
//发布文档
createDoc = function(status){
$('button.layui-btn').attr("disabled",true);
$('button.layui-btn').addClass('layui-btn-disabled');
if(editor_mode == 1){
var content = editor.getHTML()
var pre_content = editor.getMarkdown()
}else if(editor_mode == 2){
var content = editor.getHTML()
var pre_content = editor.getValue()
}else if(editor_mode == 3){
var content = editor.getHTML()
var pre_content = editor.getText()
}
var data = {
'project':$("#project").val(),
'parent_doc':$("#parent-doc").val(),
'doc_name':$("#doc-name").val(),
'doc_tag':$("#tagsinputval").val(),
'content':content,
'pre_content':pre_content,
'sort':$("#sort").val(),
'editor_mode':'{{editor_mode}}',
'status':status,
'open_children':$('input:checkbox[name="open-children"]:checked').val(),
'show_children':$('input:checkbox[name="show-children"]:checked').val(),
}
// console.log(data)
if(data.doc_name == ""){
layer.msg('请输入文档标题!');
$('button.layui-btn').attr("disabled",false);
$('button.layui-btn').removeClass('layui-btn-disabled');
}
else if(data.project == ""){
layer.msg('请选择文集!');
$('button.layui-btn').attr("disabled",false);
$('button.layui-btn').removeClass('layui-btn-disabled');
}
else{
//发布按钮设为禁用
$("#create_doc").attr({"disabled":"disabled"});
layer.load(); // 加载提示
$.post("{% url 'create_doc' %}",data,function(r){
if(r.status){
//创建成功
layer.closeAll("loading"); //关闭加载层
window.localStorage.removeItem('mrdoc_doc_cache') // 清空文档缓存
if(status === 1){
layer.msg('发布成功',{time:1000},function(){
md_changed = false;
//跳转到文档阅读页面
window.location.href = "/project-" + r.data.pro + "/doc-" + r.data.doc
});
}else{
layer.msg('保存成功',{time:1000},function(){
md_changed = false;
//跳转到文档修改
window.location.href = "/modify_doc/"+r.data.doc+"/";
});
}
}else{
//创建失败
layer.closeAll("loading"); //关闭加载层
layer.msg('发布文档失败:'+r.data);
//恢复按钮状态
$('button.layui-btn').attr("disabled",false);
$('button.layui-btn').removeClass('layui-btn-disabled');
}
});
}
};
$("#pub_doc").click(function(){
createDoc(1);
})
$("#save_doc").click(function(){
createDoc(0);
})
//选择文档模板
$("#sel-doctemp").click(function(){
layer.open({
type: 1,
id:'temp-div',
content: $('#doctemp-list'),
//area:['530px','300px'],
area:['50%','50%'],
});
});
//清除所选上级文档
$("#clearParentDoc").click(function(){
$('#parent-doc').val("");
$("span.layui-tree-txt").each(function(i){
var $me = $(this)
$me.removeClass('selected-parent-doc')
});
layer.msg("你取消了当前文档的上级文档")
});
//插入模板
insertTemp = function(doctemp_id){
$.post("{% url 'get_doctemp' %}",{'doctemp_id':doctemp_id},function(r){
if(r.status){
if(editor_mode == 1){
editor.insertValue(r.data);
}else if(editor_mode == 2){
editor.insertValue(r.data);
}
layer.closeAll()
}else{
layer.msg(r.data)
}
});
};
//插入本地文本文件
function insertLocalFile(input) {
var file = input.files[0];
//filename = file.name.split(".")[0]; // 文件名
//支持chrome IE10
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
if(editor_mode == 1){
editor.insertValue(this.result);
}else if(editor_mode == 2){
editor.setValue(this.result)
}else if(editor_mode == 3){
editor.addValue(this.result)
}
}
reader.readAsText(file);
}
//支持IE 7 8 9 10
else if (typeof window.ActiveXObject != 'undefined'){
var xmlDoc;
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(input.value);
console.log(xmlDoc.xml);
editor.insertValue(xmlDoc.xml);
}
//支持FF
else if (document.implementation && document.implementation.createDocument) {
var xmlDoc;
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = false;
xmlDoc.load(input.value);
console.log(xmlDoc.xml);
editor.insertValue(xmlDoc.xml);
} else {
alert('error');
}
};
//选择本地文本文件
function selectLocalFile(){
$("#insert-local-file").trigger("click");
};
</script>
{% endblock %}