forked from mirror/MrDoc
805 lines
32 KiB
HTML
805 lines
32 KiB
HTML
{% load static %}
|
||
<!DOCTYPE html>
|
||
<html lang="zh-cn">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
|
||
<meta http-equiv="Cache-Control" content="no-transform" />
|
||
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
||
<meta http-equiv="Cache-Control" content="max-age=7200" />
|
||
<meta name="referrer" content="no-referrer">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>{% block title %}{% endblock %} - {% if site_name != None and site_name != '' %}{{site_name}} {% else %}站点标题{% endif %}</title>
|
||
<link href="{% static 'layui/css/layui.css' %}?version={{mrdoc_version}}" rel="stylesheet">
|
||
<link rel="stylesheet" href="{% static 'editor.md/css/font-awesome.min.css' %}?version={{mrdoc_version}}" />
|
||
<link rel="stylesheet" href="{% static 'vditor/dist/index.css' %}?version={{mrdoc_version}}" />
|
||
<link rel="icon" href="{% static 'favicon_16.png' %}"/>
|
||
<link href="{% static 'mrdoc/mrdoc.css' %}?version={{mrdoc_version}}" rel="stylesheet">
|
||
<link href="{% static 'tagsInput/tagsinput.css' %}" rel="stylesheet" type="text/css"/>
|
||
<style>
|
||
/* 编辑器图标样式 */
|
||
.editormd-menu i{
|
||
color: #333;
|
||
font-size: 16px;
|
||
}
|
||
ul.editormd-menu{
|
||
margin-bottom: 0;
|
||
}
|
||
/* 编辑器预览列表样式 */
|
||
.markdown-body ul li{
|
||
list-style:disc;
|
||
}
|
||
.markdown-body ul > li > ul > li{
|
||
list-style-type: circle;
|
||
}
|
||
.markdown-body ol li{
|
||
list-style-type: decimal;
|
||
}
|
||
.markdown-body ol ol ul,.markdown-body ol ul ul,.markdown-body ul ol ul,.markdown-body ul ul ul li{
|
||
list-style-type: square;
|
||
}
|
||
/* 选择上级文档样式 */
|
||
.selected-parent-doc{
|
||
text-decoration-line: underline;
|
||
font-weight: 700;
|
||
color: black;
|
||
}
|
||
/* 选择图片 - 图片列表样式 */
|
||
.select-img-list{
|
||
cursor: pointer;
|
||
position: relative;
|
||
display:flex;
|
||
float: left;
|
||
align-items:center;
|
||
width: 120px;
|
||
height:120px;
|
||
margin: 0 20px 30px 0;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.select-img-list:hover{
|
||
background-color: #EAFFEA;
|
||
}
|
||
.select-img-list-i{
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
-webkit-background-size: contain;
|
||
border: 1px solid transparent;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
/* layui分页组件样式 */
|
||
.layui-laypage .layui-laypage-curr .layui-laypage-em{
|
||
background-color: #2176ff !important;
|
||
}
|
||
.layui-form-select dl dd.layui-this{
|
||
background-color: #2176ff !important;
|
||
}
|
||
/* layui单选样式 */
|
||
.layui-form-radio>i:hover, .layui-form-radioed>i{
|
||
color: #2176ff;
|
||
}
|
||
/* HTML预览样式 */
|
||
.markdown-body h1{
|
||
font-size: 1.7em;
|
||
}
|
||
.markdown-body h2{
|
||
font-size: 1.5em;
|
||
}
|
||
.markdown-body h3{
|
||
font-size: 1.25em;
|
||
}
|
||
.markdown-body h4{
|
||
font-size: 1em;
|
||
}
|
||
.markdown-body h5{
|
||
font-size: .875em;
|
||
}
|
||
.markdown-body h6{
|
||
font-size: .85em;
|
||
}
|
||
/* 编辑器行号宽度 */
|
||
.CodeMirror-linenumber{
|
||
width: auto !important;
|
||
}
|
||
li.L1, li.L3, li.L5, li.L7, li.L9 {
|
||
background: none !important;
|
||
}
|
||
/* layui 折叠面板 边框颜色 - 用在左侧文集结构 */
|
||
.layui-badge-rim, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-layedit, .layui-layedit-tool, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea{
|
||
border-color: #f8f8f8;
|
||
}
|
||
.layui-colla-content{
|
||
padding: 0px;
|
||
}
|
||
/* 预览代码宽度 */
|
||
ol.linenums li{
|
||
width: max-content;
|
||
}
|
||
#doc-tree{
|
||
margin-bottom: 5px;
|
||
}
|
||
</style>
|
||
<!--[if lt IE 9]>
|
||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||
<![endif]-->
|
||
|
||
</head>
|
||
<body>
|
||
<div class="doc layui-fluid" style="padding-left:0px;">
|
||
<!-- 左侧工具栏 -->
|
||
<div class="doc-summary">
|
||
<div class="project-title"><i class="fa fa-edit"></i> MrDoc文档编辑器<br>
|
||
<span style="font-size: 14px;">你正在：{% block editor_type %}{% endblock %}</span>
|
||
</div>
|
||
<hr>
|
||
{% block left_opera %}
|
||
{% endblock %}
|
||
</div>
|
||
<!-- 左侧工具栏结束 -->
|
||
|
||
<!-- 右侧编辑器栏 -->
|
||
<div class="doc-body">
|
||
<!-- 文档导航 -->
|
||
<div class="doc-header" role="navigation">
|
||
|
||
<a class="btn pull-left js-toolbar-action" aria-label="" href="javascript:void(0);" title="切换侧边栏">
|
||
<i class="fa fa-align-justify"></i>
|
||
</a>
|
||
<!-- 顶部工具栏 -->
|
||
{% block head_toolbar %}
|
||
{% endblock %}
|
||
<a class="btn pull-right" aria-label="" href="{% url 'pro_list' %}">
|
||
<i class="fa fa-home"></i> <span class="layui-hide-xs">首页</span>
|
||
</a>
|
||
</div>
|
||
<!-- 文档主体 -->
|
||
<div class="doc-body-content" style="padding-left: 15px;">
|
||
<div class="mrdoc-body-content-div">
|
||
<!-- 文档内容 -->
|
||
<div class="mrdoc-editor-content">
|
||
<!-- 正文开始 -->
|
||
<div class="markdown-body" id="content">
|
||
{% block content %}
|
||
{% endblock %}
|
||
</div>
|
||
<!-- 正文结束 -->
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 右侧编辑器结束 -->
|
||
</div>
|
||
|
||
<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
|
||
<script src="{% static 'layui/layui.all.js' %}"></script>
|
||
|
||
<script src="{% static 'vditor/dist/index.min.js' %}?version={{mrdoc_version}}"></script>
|
||
|
||
|
||
<script src="{% static 'mrdoc/mrdoc.editor.js' %}"></script>
|
||
<script src="{% static 'mrdoc/mrdoc.js' %}?version={{mrdoc_version}}"></script>
|
||
<!-- 标签输入 -->
|
||
<script src="{% static '/tagsInput/tagsinput.js' %}" type="text/javascript" charset="utf-8"></script>
|
||
<script>
|
||
$.ajaxSetup({
|
||
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
|
||
});
|
||
var tree = layui.tree;
|
||
//加载页面时执行一次
|
||
changeSidebar();
|
||
//监听浏览器宽度的改变
|
||
window.onresize = function(){
|
||
changeSidebar();
|
||
};
|
||
function changeSidebar(){
|
||
// 获取匹配指定的媒体查询
|
||
var screen_width = window.matchMedia('(max-width: 768px)');
|
||
//判断匹配状态
|
||
if(screen_width.matches){
|
||
//如果匹配到，切换侧边栏
|
||
//console.log('小屏幕')
|
||
$("body").addClass("big-page");
|
||
}else{
|
||
$("body").removeClass("big-page");
|
||
}
|
||
}
|
||
</script>
|
||
<!-- 切换隐藏侧边栏 -->
|
||
<script>
|
||
// 切换侧边栏
|
||
$(function(){
|
||
$(".js-toolbar-action").click(toggleSidebar);
|
||
});
|
||
//切换侧边栏显示隐藏
|
||
function toggleSidebar(){
|
||
console.log("切换侧边栏")
|
||
$("body").toggleClass("big-page");
|
||
return false;
|
||
}
|
||
</script>
|
||
|
||
<!-- 展开收起左边目录 -->
|
||
<script>
|
||
$(function(){
|
||
$(".switch-toc").click(SwitchToc);
|
||
});
|
||
function SwitchToc(i){
|
||
var $me = $(this);
|
||
$(this).parent().next("ul").toggleClass("toc-close"); //切换展开收起样式
|
||
$(this).toggleClass("fa-chevron-left fa-chevron-down");//切换图标
|
||
};
|
||
</script>
|
||
<script>
|
||
$.ajaxSetup({
|
||
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
|
||
});
|
||
var layer = layui.layer;
|
||
var form = layui.form;
|
||
var element = layui.element;
|
||
var laypage = layui.laypage;
|
||
var md_changed = false; //初始化一个变量，用于判断编辑器是否修改
|
||
//初始化vditor
|
||
var editor = new Vditor('editor-md',{
|
||
"cdn":"{% static 'vditor' %}",
|
||
"toolbar": [
|
||
"emoji",
|
||
"headings",
|
||
"bold",
|
||
"italic",
|
||
"strike",
|
||
"link",
|
||
"|",
|
||
"list",
|
||
"ordered-list",
|
||
"check",
|
||
"outdent",
|
||
"indent",
|
||
"|",
|
||
"quote",
|
||
"line",
|
||
"code",
|
||
"inline-code",
|
||
"insert-before",
|
||
"insert-after",
|
||
"|",
|
||
// "upload",
|
||
{
|
||
name: 'insert-img',
|
||
tipPosition: 's',
|
||
tip: '图片',
|
||
className: 'right',
|
||
tipPosition:'nw',
|
||
icon:'<svg t="1599747832593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4027" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><defs><style type="text/css"></style></defs><path d="M864.05 128.46H129.97c-17.68 0-32 14.33-32 32v639.61c0 17.67 14.32 32 32 32h734.08c17.68 0 32-14.33 32-32V160.46c0-17.67-14.32-32-32-32z m-32 639.61H161.97V192.46h670.08v575.61z" p-id="4028"></path><path d="M795.58 691.57a32.007 32.007 0 0 1-27.33 15.34H225.77c-12.01 0-23-6.72-28.48-17.4a31.988 31.988 0 0 1 2.5-33.28l125.3-174.17c10.17-14.13 29.78-17.54 44.12-7.67l101.77 70.03 129.73-165.51a31.995 31.995 0 0 1 28.21-12.11 31.99 31.99 0 0 1 25.42 17.2L796.7 660.26a32.018 32.018 0 0 1-1.12 31.31z" p-id="4029"></path><path d="M320.03 321.34a64.03 64.83 0 1 0 128.06 0 64.03 64.83 0 1 0-128.06 0Z" p-id="4030"></path></svg>',
|
||
click () {
|
||
layer.ready(function(){
|
||
element.init();
|
||
});
|
||
layer.open({
|
||
type:'1',
|
||
title:'添加图片',
|
||
area:['800px','600px'],
|
||
id:'uploadImg',//配置ID,
|
||
content:$('#upload-img'),
|
||
})
|
||
},
|
||
},
|
||
// "record",
|
||
{
|
||
name: 'insert-attachment',
|
||
tipPosition: 's',
|
||
tip: '附件',
|
||
className: 'right',
|
||
tipPosition:'nw',
|
||
icon:'<svg t="1599964518089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4929" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><defs><style type="text/css"></style></defs><path d="M633.553 251.102c15.993-12.795 38.385-12.795 55.978 1.6 15.993 15.993 15.993 38.384 0 54.378L347.264 647.747c-22.39 20.792-22.39 57.577 0 81.568 20.792 22.391 57.578 22.391 81.568 0l401.444-403.042c55.978-55.979 55.978-148.742 0-204.72s-148.742-55.979-204.72 0l-47.982 47.98-12.795 12.796-369.455 369.455c-91.165 91.165-91.165 236.708 0 327.872 91.164 91.165 236.707 91.165 327.872 0L894.25 511.8c6.397-3.199 9.596-7.997 12.795-12.795 15.993-15.994 38.385-15.994 54.378 0s15.994 38.385 0 54.379l-3.198 3.199c-3.2 1.599-6.398 6.397-9.597 9.596L577.574 934.035c-119.953 119.953-316.676 119.953-436.63 0s-119.952-316.676 0-436.63l430.233-431.83c86.366-86.367 227.111-86.367 315.077 0 86.366 86.366 86.366 227.11 0 315.076L483.21 783.694c-52.78 52.78-139.145 52.78-190.325 0-52.78-52.78-52.78-139.146 0-190.326l340.667-342.266z m0 0" fill="#333333" p-id="4930"></path></svg>',
|
||
click () {
|
||
layer.ready(function(){
|
||
element.init();
|
||
});
|
||
layer.open({
|
||
type:'1',
|
||
title:'添加附件',
|
||
area:['800px','600px'],
|
||
id:'uploadAttach',//配置ID,
|
||
content:$('#upload-attach'),
|
||
success: function(layero, index){
|
||
layer.load(1);
|
||
$.post('{% url "manage_attachment" %}',{types:2},function(r){
|
||
$("#attach_table tbody").empty()
|
||
if(r.status){
|
||
//调用分页显示
|
||
laypage.render({
|
||
elem: 'select-attach-page',//分页的div
|
||
count: r.data.length, //数据总数
|
||
limit:10, //单页数
|
||
jump: function(obj){
|
||
//渲染HTML
|
||
$("#attach_table tbody").empty();
|
||
var thisData = r.data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
|
||
layui.each(thisData, function(k, v){
|
||
var row = "<tr><td>" + v.filename + "</td><td>"+ v.filesize +"</td><td>"+ v.filetime +"</td><td><button class='layui-btn layui-btn-normal layui-btn-sm' data-name='"+ v.filename +"' data-path='"+ v.filepath +"' onclick='insertAttach(this)'>选择</button></td></tr>"
|
||
// arr.push(row);
|
||
$("#attach_table tbody").append(row)
|
||
});
|
||
}
|
||
});
|
||
layer.closeAll("loading");//关闭加载提示
|
||
}else{
|
||
layer.closeAll("loading");//关闭加载提示
|
||
layer.msg("获取附件失败，请稍后重试！")
|
||
}
|
||
})
|
||
|
||
}
|
||
})
|
||
},
|
||
},
|
||
"table",
|
||
"|",
|
||
"undo",
|
||
"redo",
|
||
"|",
|
||
"fullscreen",
|
||
"edit-mode",
|
||
{
|
||
name: "more",
|
||
toolbar: [
|
||
"both",
|
||
"code-theme",
|
||
"content-theme",
|
||
"export",
|
||
"outline",
|
||
"preview",
|
||
"devtools",
|
||
"info",
|
||
"help",
|
||
],
|
||
}],
|
||
"height":800,
|
||
"width":'100%',
|
||
"mode":"sv",
|
||
"placeholder":"道友，开始吧……",
|
||
"counter":{
|
||
enable:true, // 启用计数
|
||
},
|
||
"cache": {
|
||
"enable": false, // 禁用缓存
|
||
},
|
||
"preview": {
|
||
"markdown": {
|
||
"autoSpace": true,// 自动空格
|
||
"chinesePunct": true,// 矫正标点
|
||
"mark": true,//Mark标记
|
||
},
|
||
"hljs":{
|
||
"lineNumber":true,//代码行号
|
||
}
|
||
},
|
||
"upload":{
|
||
fieldName:"editormd-image-file[]",
|
||
linkToImgUrl:"{% url 'upload_doc_img' %}",
|
||
linkToImgCallback(responseText){
|
||
console.log(responseText)
|
||
},
|
||
handler(files){
|
||
console.log(files)
|
||
}
|
||
}
|
||
});
|
||
|
||
//粘贴上传图片
|
||
$("#editor-md").on('paste', function (ev) {
|
||
console.log("粘贴上传图片")
|
||
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上传图片
|
||
layer.load(1);
|
||
$.post("{% url 'upload_doc_img' %}",{base:base64}, function (ret) {
|
||
layer.msg(ret.message);
|
||
if (ret.success === 1) {
|
||
//新一行的图片显示
|
||
layer.closeAll("loading");
|
||
editor.insertValue("\n![](" + ret.url + ")");
|
||
editor.focus()
|
||
}else{
|
||
layer.closeAll("loading");
|
||
layer.msg("粘贴图片失败！")
|
||
}
|
||
});
|
||
}; // data url!
|
||
var url = reader.readAsDataURL(blob);
|
||
}
|
||
}
|
||
});
|
||
|
||
//未保存离开提示
|
||
window.onbeforeunload =function() {
|
||
if(md_changed){
|
||
return 1;
|
||
}else{
|
||
return null;
|
||
}
|
||
};
|
||
//监听图片Tab选项卡切换
|
||
element.on('tab(img-tab)', function(data){
|
||
//console.log(this); //当前Tab标题所在的原始DOM元素
|
||
//console.log(data.index); //得到当前Tab的所在下标
|
||
//console.log(data.elem); //得到当前的Tab大容器
|
||
if(data.index == 1){
|
||
layer.load(1);
|
||
console.log('选择图片')
|
||
$("#select-img-group").empty(); //删除已有分组按钮
|
||
//请求新的分组数据
|
||
$.post("{% url 'manage_img_group' %}",{'types':3},function(r){
|
||
if(r.status){
|
||
group_btn_str = ''
|
||
for(var i in r.data){
|
||
group_btn_str += '<button class="layui-btn layui-btn-normal layui-btn-sm" onclick="switchImgGroup(' + r.data[i].group_id +')">' + r.data[i].group_name + '(' + r.data[i].group_cnt + ')</button>'
|
||
};
|
||
$("#select-img-group").append(group_btn_str)
|
||
}
|
||
});
|
||
//请求全部图片数据
|
||
$.post("{% url 'manage_image' %}",{'types':2,'group_id':0},function(r){
|
||
if(r.status){
|
||
//调用分页显示
|
||
laypage.render({
|
||
elem: 'select-img-page',//分页的div
|
||
count: r.data.length, //数据总数
|
||
limit:15, //单页数
|
||
jump: function(obj){
|
||
//渲染HTML
|
||
document.getElementById('select-img').innerHTML = function(){
|
||
var arr = []
|
||
var thisData = r.data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
|
||
layui.each(thisData, function(index, item){
|
||
arr.push('<li class="select-img-list"><img class="select-img-list-i" onclick="insertImg(this);" src="' + item.path + '" title="' + item.name + '" /></li>');
|
||
});
|
||
return arr.join('');
|
||
}();
|
||
}
|
||
});
|
||
layer.closeAll("loading");
|
||
}else{
|
||
layer.closeAll("loading");
|
||
layer.msg("获取图片失败")
|
||
}
|
||
})
|
||
}
|
||
});
|
||
// 插入选择的图片到编辑器
|
||
insertImg = function(e){
|
||
console.log(e.src);
|
||
editor.insertValue("\n![](" + e.src + ")");
|
||
editor.focus()
|
||
};
|
||
// 按钮点击插入输入框图片链接
|
||
insertImgUrl = function(){
|
||
editor.insertValue("\n![](" + $("#img_url_input").val() + ")");
|
||
$("#img_url_input").val("")
|
||
layer.closeAll();
|
||
editor.focus()
|
||
};
|
||
// 切换图片分组
|
||
switchImgGroup = function(e){
|
||
layer.load(1);
|
||
$.post("{% url 'manage_image' %}", {
|
||
'types': 2,
|
||
'group_id': e
|
||
},
|
||
function(r) {
|
||
if (r.status) {
|
||
//调用分页显示
|
||
laypage.render({
|
||
elem: 'select-img-page',//分页的div
|
||
count: r.data.length,//数据总数
|
||
limit: 15,//单页数
|
||
jump: function(obj) {
|
||
//渲染HTML
|
||
document.getElementById('select-img').innerHTML = function() {
|
||
var arr = []
|
||
var thisData = r.data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
|
||
layui.each(thisData,
|
||
function(index, item) {
|
||
arr.push('<li class="select-img-list"><img class="select-img-list-i" onclick="insertImg(this);" src="' + item.path + '" title="' + item.name + '" /></li>');
|
||
});
|
||
return arr.join('');
|
||
} ();
|
||
}
|
||
});
|
||
layer.closeAll("loading"); //关闭加载提示
|
||
} else {
|
||
layer.closeAll("loading");
|
||
layer.msg("获取分组图片失败")
|
||
}
|
||
})
|
||
};
|
||
// 插入选择的附件到编辑器
|
||
insertAttach = function(e){
|
||
editor.insertValue("\n[【附件】"+ $(e).data('name') + "](/media/" + $(e).data('path') + ")");
|
||
layer.closeAll();
|
||
}
|
||
// 插入音视频到编辑器
|
||
insertMultimedia = function(e){
|
||
if(e === 'audio'){
|
||
editor.insertValue("\n![=audio](" + $("#audio_input").val() + ")");
|
||
}else if(e === 'video'){
|
||
editor.insertValue("\n![=video](" + $("#video_input").val() + ")");
|
||
}else if(e === 'video_iframe'){
|
||
editor.insertValue("\n![=video_iframe](" + $("#video_iframe_input").val() + ")");
|
||
}
|
||
$("#audio_input").val('')
|
||
$("#video_input").val('')
|
||
$("#video_iframe_input").val('')
|
||
layer.closeAll();
|
||
editor.focus()
|
||
}
|
||
</script>
|
||
{% block custom_script %}
|
||
{% endblock %}
|
||
</body>
|
||
{% block custom_div %}
|
||
{% endblock %}
|
||
<!-- 选择和上传图片div -->
|
||
<div id="upload-img" style="display:none;margin:20px;">
|
||
<div class="layui-tab" lay-filter="img-tab">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this">上传图片</li>
|
||
<li>选择图片</li>
|
||
</ul>
|
||
<div class="layui-tab-content">
|
||
<div class="layui-tab-item layui-show">
|
||
<div class="layui-row">
|
||
<button class="layui-btn layui-btn-normal layui-btn-fluid" id="upload_img"><i class="layui-icon layui-icon-upload"></i> 点击上传图片</button>
|
||
</div>
|
||
<fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
|
||
<legend style="font-size: 12px;">或 插入外链图片链接</legend>
|
||
</fieldset>
|
||
<div class="layui-row" style="margin-top: 10px;">
|
||
<input type="text" class="layui-input" placeholder="输入图片URL" id="img_url_input" style="margin-bottom: 5px;"/>
|
||
<button type="button" class="layui-btn layui-btn-primary" onclick="insertImgUrl()">插入图片链接</button>
|
||
</div>
|
||
</div>
|
||
<div class="layui-tab-item">
|
||
<div class="layui-row" id="select-img-group">
|
||
</div><hr>
|
||
<div class="layui-row" id="select-img"></div>
|
||
<div id="select-img-page"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 选择和上传附件div -->
|
||
<div id="upload-attach" style="display:none;margin:20px;">
|
||
<span>* 仅支持.zip格式的压缩文件作为附件，文件大小不超过50Mb</span>
|
||
<div style="margin: 10px 0 0 10px;">
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm" id="upload_attachment"><i class="layui-icon layui-icon-upload"></i> 点击上传附件</button>
|
||
<a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'manage_attachment' %}" target="_blank"><i class="fa fa-cubes"></i> 管理附件</a>
|
||
</div>
|
||
<table class="layui-table" id="attach_table" style="margin: 10px;width:90%;">
|
||
<thead>
|
||
<th>附件名称</th>
|
||
<th>附件大小</th>
|
||
<th>上传时间</th>
|
||
<th>操作</th>
|
||
</thead>
|
||
<tbody>
|
||
</tbody>
|
||
</table>
|
||
<div id="select-attach-page"></div>
|
||
</div>
|
||
|
||
<!-- 添加表格div -->
|
||
<div id="layer-table" style="display: none;margin: 10px;">
|
||
<div class="layui-tab" lay-filter="table-tab" id="insert-table-div">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this" lay-id="generaTable">生成表格</li>
|
||
<li lay-id="pasteTable">粘贴表格</li>
|
||
</ul>
|
||
<div class="layui-tab-content">
|
||
<div class="layui-tab-item layui-show" >
|
||
<div class="layui-row" style="margin: 10px;">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<div class="layui-input-inline" style="width: 50px;">
|
||
<input type="number" placeholder="行" id="row" class="layui-input" value="3">
|
||
</div>
|
||
<div class="layui-form-mid">x</div>
|
||
<div class="layui-input-inline" style="width: 50px;">
|
||
<input type="number" placeholder="列" id="col" class="layui-input" value="3">
|
||
</div>
|
||
<div class="layui-form-mid" style="width: 100px;">
|
||
<button class="layui-btn layui-btn-normal layui-btn-xs" onclick="addtable(1)" >生成表格</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row" style="margin:10px;" id="TableGroup"></div>
|
||
</div>
|
||
|
||
<div class="layui-tab-item" >
|
||
<textarea placeholder="粘贴Excel或在线电子表格的内容" class="layui-textarea" style="height: 200px;" id="pasteExcel"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加音视频div -->
|
||
<div id="insertMultimedia" style="display: none;margin:10px;">
|
||
<div class="layui-row">
|
||
<fieldset class="layui-elem-field">
|
||
<legend>插入音频链接</legend>
|
||
<div class="layui-field-box">
|
||
<input class="layui-input" type="url" id="audio_input" placeholder="填入音频文件链接，支持文件后缀格式为mp3、wav、flac、m4a" style="margin-bottom: 5px;">
|
||
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="insertMultimedia('audio')"><i class="fa fa-music"></i> 插入音频</button>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
<div class="layui-row">
|
||
<fieldset class="layui-elem-field">
|
||
<legend>插入视频链接</legend>
|
||
<div class="layui-field-box">
|
||
<input class="layui-input" type="url" id="video_input" placeholder="填入视频文件链接，支持文件后缀格式为mp4、m4v、ogg、ogv、webm" style="margin-bottom: 5px;">
|
||
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="insertMultimedia('video')"><i class="fa fa-video-camera"></i> 插入视频</button>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
<div class="layui-row">
|
||
<fieldset class="layui-elem-field">
|
||
<legend>插入视频网站链接</legend>
|
||
<div class="layui-field-box">
|
||
<input class="layui-input" type="url" id="video_iframe_input" placeholder="填入视频网站视频播放页链接，支持YouTube、优酷、QQ视频、Facebook、哔哩哔哩、TED网站" style="margin-bottom: 5px;">
|
||
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="insertMultimedia('video_iframe')"><i class="fa fa-youtube-play"></i> 插入视频网站视频</button>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
//按钮选择上传图片
|
||
var upload = layui.upload;
|
||
upload.render({
|
||
elem: '#upload_img',
|
||
url: '{% url "upload_doc_img" %}',
|
||
before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
||
layer.load(1); //上传loading
|
||
},
|
||
done: function(res, index, upload){ //上传后的回调
|
||
//上传成功
|
||
if(res.success == 1){
|
||
editor.insertValue("\n![](" + res.url + ")");
|
||
layer.closeAll();
|
||
layer.msg("上传成功");
|
||
}else{
|
||
layer.closeAll();
|
||
layer.msg(res.message)
|
||
}
|
||
},
|
||
error:function(){
|
||
layer.closeAll('loading'); //关闭loading
|
||
layer.msg("系统异常，请稍后再试！")
|
||
},
|
||
accept: 'images', //允许上传的文件类型
|
||
acceptMime:'image/*',
|
||
field:'manage_upload',
|
||
|
||
});
|
||
// 按钮选择上传附件
|
||
var upload_attach = layui.upload;
|
||
upload_attach.render({
|
||
elem: '#upload_attachment',
|
||
url: '{% url "manage_attachment" %}',
|
||
data:{types:0,csrfmiddlewaretoken: '{{ csrf_token }}'},
|
||
before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
||
layer.load(1); //上传loading
|
||
},
|
||
done: function(res, index, upload){ //上传后的回调
|
||
//上传成功，刷新页面
|
||
if(res.status){
|
||
editor.insertValue("\n[【附件】"+ res.data.name + "](/media/" + res.data.url + ")");
|
||
layer.closeAll();
|
||
layer.msg("上传成功");
|
||
}else{
|
||
layer.msg("上传出错，请重试！")
|
||
}
|
||
},
|
||
error:function(){
|
||
layer.closeAll('loading'); //关闭loading
|
||
layer.msg("系统异常，请稍后再试！")
|
||
},
|
||
accept: 'file', //允许上传的文件类型
|
||
field:'attachment_upload',
|
||
})
|
||
|
||
//修改预览div中a标签链接新窗口打开
|
||
$('div.editormd-preview').on('click','a',function(e){
|
||
e.target.target = '_blank';
|
||
});
|
||
// 粘贴表格文本框侦听paste粘贴事件
|
||
// 列宽的函数
|
||
function columnWidth(rows, columnIndex) {
|
||
return Math.max.apply(null, rows.map(function(row) {
|
||
return row[columnIndex].length
|
||
}))
|
||
};
|
||
|
||
// 检查是否是个表格
|
||
function looksLikeTable(data) {
|
||
return true
|
||
};
|
||
// 编辑器侦听paste粘贴事件
|
||
var pasteExcel = document.getElementById('pasteExcel')
|
||
pasteExcel.addEventListener("paste", function(event) {
|
||
console.log('粘贴Excel')
|
||
var clipboard = event.clipboardData
|
||
var data = clipboard.getData('text/plain')
|
||
data = data.replace(/(?:[\n\u0085\u2028\u2029]|\r\n?)$/, '');
|
||
|
||
if(looksLikeTable(data)) {
|
||
event.preventDefault()
|
||
}else{
|
||
return
|
||
}
|
||
// 行
|
||
var rows = data.split((/[\n\u0085\u2028\u2029]|\r\n?/g)).map(function(row) {
|
||
console.log(row)
|
||
return row.split("\t")
|
||
})
|
||
// 列对齐
|
||
var colAlignments = []
|
||
// 列宽
|
||
var columnWidths = rows[0].map(function(column, columnIndex) {
|
||
var alignment = "l"
|
||
var re = /^(\^[lcr])/i
|
||
var m = column.match(re)
|
||
if (m) {
|
||
var align = m[1][1].toLowerCase()
|
||
if (align === "c") {
|
||
alignment = "c"
|
||
} else if (align === "r") {
|
||
alignment = "r"
|
||
}
|
||
}
|
||
colAlignments.push(alignment)
|
||
column = column.replace(re, "")
|
||
rows[0][columnIndex] = column
|
||
return columnWidth(rows, columnIndex)
|
||
})
|
||
var markdownRows = rows.map(function(row, rowIndex) {
|
||
return "| " + row.map(function(column, index) {
|
||
return column + Array(columnWidths[index] - column.length + 1).join(" ")
|
||
}).join(" | ") + " |"
|
||
row.map
|
||
})
|
||
markdownRows.splice(1, 0, "|" + columnWidths.map(function(width, index) {
|
||
var prefix = ""
|
||
var postfix = ""
|
||
var adjust = 0
|
||
var alignment = colAlignments[index]
|
||
if (alignment === "r") {
|
||
postfix = ":"
|
||
adjust = 1
|
||
} else if (alignment == "c") {
|
||
prefix = ":"
|
||
postfix = ":"
|
||
adjust = 2
|
||
}
|
||
return prefix + Array(columnWidths[index] + 3 - adjust).join("-") + postfix
|
||
}).join("|") + "|")
|
||
event.target.value = markdownRows.join("\n")
|
||
return false
|
||
});
|
||
</script>
|
||
</html> |