/**
|
* markdown编辑器页面
|
* @author weidy
|
* @date 2021-11-29
|
*/
|
layui.define(['layer','element','form','table','dynamicCondition','upload' ],function(exports){
|
var webUtil = $webUtil;
|
var Class = function(){
|
this.MODELNAME = "platform/objectService/markdown";
|
this.moduleKey = "markdown";
|
this.backPath = configData.adminServicePath;
|
this.url = {
|
controller:'helpDocumentController/',
|
createOrGetContentByOid:'createOrGetContentByOid',
|
saveContentByOid:'saveContentByOid',
|
uploadPic:'uploadPic',
|
gridImageInfo:'gridImageInfo'
|
};
|
this.getContent=function(){
|
var that = this;
|
var html = "";
|
html = [
|
'<div class="layui-layout" style="display:block;overflow-y: hidden">',
|
'<div class="layui-layout-border" style="display:block;margin-top:0px; " id="border_',that.id,'">',
|
'<div class="layui-center" style="overflow-y:auto;">',
|
this.getmarkdownHtml(),
|
'</div>',
|
'</div>',
|
'</div>'
|
].join("");
|
return html;
|
};
|
this.getmarkdownHtml=function (){
|
var that=this;
|
return ' <link href="style/css/markdown.min.css" rel="stylesheet" type="text/css"/>' +
|
'<style type="text/css">\n' +
|
' html, body {\n' +
|
' margin: 0;\n' +
|
' padding: 0;\n' +
|
' font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n' +
|
' color: #333;\n' +
|
' background-color: #fbfbfb;\n' +
|
' height: 100%;\n' +
|
' }\n' +
|
' textarea {\n' +
|
' font-family: Menlo, Monaco, Consolas, "Courier New", monospace;\n' +
|
' font-size: 12px;\n' +
|
' resize: none;\n' +
|
' }\n' +
|
' header {\n' +
|
' padding-top: 10px;\n' +
|
' display: flex;\n' +
|
' height: 58px;\n' +
|
' }\n' +
|
' header h1 {\n' +
|
' margin: 0;\n' +
|
' }\n' +
|
' .containers {\n' +
|
' display: flex;\n' +
|
' height: calc(100vh - 180px);\n' +
|
' }\n' +
|
' .container {\n' +
|
' width: 50%;\n' +
|
' padding: 5px;\n' +
|
' display: flex;\n' +
|
' flex-direction: column;\n' +
|
' height: 100%;\n' +
|
' box-sizing: border-box;\n' +
|
' }\n' +
|
' .pane, .inputPane {\n' +
|
' margin-top: 5px;\n' +
|
' padding: 0.6em;\n' +
|
' border: 1px solid #ccc;\n' +
|
' overflow: auto;\n' +
|
' flex-grow: 1;\n' +
|
' flex-shrink: 1;\n' +
|
' flex:1;'+
|
' }\n' +
|
' .btns{\n' +
|
' display: flex;\n' +
|
' }\n' +
|
' .btns input{\n' +
|
' margin-right: 20px;\n' +
|
' }\n' +
|
' .img_content ul{\n' +
|
' list-style: none;\n' +
|
' margin: 10px 20px;\n' +
|
' padding: 0;\n' +
|
' }\n' +
|
' .img_content li{\n' +
|
' display: flex;\n' +
|
' align-items: center;\n' +
|
' padding: 10px 0;\n' +
|
' border-bottom: 1px solid #efefef;\n' +
|
' }\n' +
|
' .img_content li img{\n' +
|
' width: 150px;\n' +
|
' margin-right: 20px;\n' +
|
' }' +
|
' </style>' +
|
'<div class="containers" id="containers'+that.sourceData.oid+'">\n' +
|
' <div class="container" style="width: 40%">\n' +
|
' <div class="btns">\n' +
|
' <input type="button" id="clear'+that.sourceData.oid+'" oid="'+that.sourceData.oid+'" value="清除" style="width: 80px;height: 25px"/>\n' +
|
' <input type="button" id="save'+that.sourceData.oid+'" oid="'+that.sourceData.oid+'" value="保存" style="width: 80px;height: 25px"/>\n' +
|
' <input type="button" id="btnimages'+that.sourceData.oid+'" oid="'+that.sourceData.oid+'" value="已上传图片" style="width: 80px;height: 25px"/>\n' +
|
' <input type="button" id="uploadmdimg'+that.sourceData.oid+'" name="uploader-input" oid="'+that.sourceData.oid+'" class="uploader-file" value="上传图片" style="width: 80px;height: 25px">\n' +
|
' </div>\n' +
|
' <textarea id="markedSource'+that.sourceData.oid+'" class="inputPane" oid="'+that.sourceData.oid+'"></textarea>\n' +
|
' </div>\n' +
|
' <div class="container" style="width: 60%">\n' +
|
' <select id="outputType'+that.sourceData.oid+'" oid="'+that.sourceData.oid+'" style="width: 150px;height: 25px;visibility: hidden">\n' +
|
' <option value="markedResult">markedResult</option>\n' +
|
' <option value="html">HTML Source</option>\n' +
|
' <option value="lexer">Lexer Data</option>\n' +
|
' </select>\n' +
|
' <div id="markedResult'+that.sourceData.oid+'" class="pane"><div class="markdownDiv"></div></div>\n' +
|
' <textarea id="html'+that.sourceData.oid+'" class="pane" readonly="readonly" style="display: none;"></textarea>\n' +
|
' <textarea id="lexer'+that.sourceData.oid+'" class="pane" readonly="readonly" style="display: none;"></textarea>\n' +
|
' </div>\n' +
|
' </div>'
|
};
|
this.init = function(){
|
var that = this;
|
webUtil.copyConfig(that,that.moduleKey);
|
this.renderMD()
|
};
|
this.renderMD=function (){
|
var that=this;
|
var rendererMD = new marked.Renderer();
|
marked.setOptions({
|
renderer: rendererMD,
|
gfm: true,
|
tables: true,
|
breaks: false,//允许回车换行。该选项要求 gfm 为true
|
pedantic: false,
|
sanitize: false,//不输出HTML
|
smartLists: true,
|
smartypants: false,
|
highlight: function (code) {
|
return hljs.highlightAuto(code).value;
|
}
|
});
|
|
$webUtil.ajax('get',this.url.controller+this.url.createOrGetContentByOid,{oid:this.sourceData.oid},function (result) {
|
if (result.success) {
|
if (result.obj) {
|
$('#markedSource'+that.sourceData.oid).val(result.obj)
|
document.getElementById('markedResult'+that.sourceData.oid).firstChild.innerHTML = marked(result.obj);
|
|
var lexed = marked.lexer(result.obj);
|
var lexedList = that.jsonString(lexed);
|
var parsed = marked.parser(lexed);
|
document.getElementById('lexer'+that.sourceData.oid).value=lexedList
|
document.getElementById('html'+that.sourceData.oid).value=parsed
|
}
|
} else {
|
webUtil.showErrorMsg(result.msg);
|
}
|
},function (xhr,error) {
|
$webUtil.showDebugMsg(error);
|
},this.backPath);
|
this.bind()
|
this.upload(that.sourceData.oid);
|
}
|
|
this.bind=function (){
|
var that=this;
|
// 监听输入值变化
|
$('#markedSource'+that.sourceData.oid).on('keyup', function(cm){
|
var oid=$(this).attr('oid')
|
document.getElementById('markedResult'+oid).firstChild.innerHTML = marked(cm.currentTarget.value);
|
|
var lexed = marked.lexer(cm.currentTarget.value);
|
var lexedList = that.jsonString(lexed);
|
var parsed = marked.parser(lexed);
|
document.getElementById('lexer'+oid).value=lexedList
|
document.getElementById('html'+oid).value=parsed
|
})
|
|
$('#clear'+that.sourceData.oid).on('click',function (e){
|
var oid=$(this).attr('oid')
|
document.getElementById('markedSource'+oid).value = '';
|
document.getElementById('markedResult'+oid).firstChild.innerHTML= '';
|
})
|
$('#save'+that.sourceData.oid).on('click',function (e){
|
var oid=$(this).attr('oid')
|
$webUtil.ajax('post',that.url.controller+that.url.saveContentByOid,{oid:oid,content:$('#markedSource'+oid).val()},function(result){
|
if(result.success){
|
$webUtil.showMsgFromResult(result,"保存成功");
|
}else{
|
$webUtil.showErrorMsg(result.msg);
|
}
|
},function(xhr,err){
|
$webUtil.showErrorMsg("请求服务出现了错误，可能服务器未开启");
|
},that.backPath);
|
})
|
$('#outputType'+that.sourceData.oid).on('change',function (e){
|
var oid=$(this).attr('oid')
|
var panes=$('#containers'+oid+' .pane')
|
for(var i = 0; i< panes.length; i++) {
|
if (panes[i].id === e.currentTarget.value+oid) {
|
panes[i].style.display = '';
|
} else {
|
panes[i].style.display = 'none';
|
}
|
}
|
})
|
|
//显示已上传图片
|
$('#btnimages'+that.sourceData.oid).on('click',function (){
|
var oid=$(this).attr('oid')
|
var imglayer=layer.open({
|
title:'已上传图片',
|
type: 1,
|
skin: 'layui-layer-rim', //加上边框
|
area: ['1200px', '600px'], //宽高
|
content: '<div class="img_content" id="img_content'+oid+'"><ul></ul><input type="text" style="opacity: 0;width: 1px" id="imgCopy'+oid+'" value="" /></div>',
|
success: function (layero) {
|
$webUtil.ajax('get',that.url.controller+that.url.gridImageInfo,{'conditionMap["ownbizOid"]':oid},function (result) {
|
if (result.success) {
|
if (result.data && result.data.length>0) {
|
var list=[]
|
var imgJson=[]
|
$.each(result.data,function (i,item){
|
item.url=that.backPath+item.url;
|
list.push('<li>' +
|
'<img src="'+item.url+'" alt=""/>' +
|
'<div>' +item.url+
|
'<button class="btn btn-img-copy" imgsrc="'+item.url+'" style="margin-left: 20px">复制图片地址</button>' +
|
'<button class="btn btn-imgDiv-copy" imgsrc="'+item.url+'" style="margin-left: 20px">复制img标签</button>' +
|
'</div>' +
|
'</li>');
|
imgJson.push({
|
"alt": item.url,
|
"pid": item.oid, //图片id
|
"src": item.url, //原图地址
|
"thumb":item.url //缩略图地址
|
})
|
})
|
$('#img_content'+oid+' ul').append(list)
|
$('#img_content'+oid+' img').on('click',function (){
|
layer.photos({
|
photos: {
|
"title": "", //相册标题
|
"id": 123, //相册id
|
"start": 0, //初始显示的图片序号，默认0
|
"data":imgJson
|
}
|
,shift:5
|
});
|
})
|
//复制按钮
|
$('#img_content'+oid+' .btn-img-copy').on('click', function() {
|
var input = document.getElementById('imgCopy'+oid);
|
input.value='.attr('imgsrc')+')'
|
$('#markedSource'+oid).val($('#markedSource'+oid).val()+input.value);
|
document.getElementById('markedResult'+oid).firstChild.innerHTML = marked( $('#markedSource'+oid).val());
|
// 选中文本
|
input.select();
|
// 执行浏览器复制命令
|
document.execCommand("copy");
|
//alert("成功复制到剪切版！");
|
layer.close(imglayer)
|
})
|
//复制div按钮
|
$('#img_content'+oid+' .btn-imgDiv-copy').on('click', function() {
|
var input = document.getElementById('imgCopy'+oid);
|
input.value='<div style="text-align:center;margin:10px 0"><img src="'+$(this).attr('imgsrc')+'"/></div>'
|
$('#markedSource'+oid).val($('#markedSource'+oid).val()+input.value);
|
document.getElementById('markedResult'+oid).firstChild.innerHTML = marked( $('#markedSource'+oid).val());
|
// 选中文本
|
input.select();
|
// 执行浏览器复制命令
|
document.execCommand("copy");
|
//alert("成功复制到剪切版！");
|
layer.close(imglayer)
|
})
|
}
|
} else {
|
webUtil.showErrorMsg(result.msg);
|
}
|
},function (xhr,error) {
|
$webUtil.showDebugMsg(error);
|
},that.backPath);
|
|
|
|
}
|
});
|
})
|
|
}
|
|
this.upload=function (oid){
|
var that=this;
|
//文件上传
|
layui.upload.render({
|
elem: '#uploadmdimg'+oid
|
,url: that.backPath+that.url.controller+that.url.uploadPic
|
,data: {ownbizOid:oid}
|
,acceptMime: 'image/*'
|
,done: function(result, index, upload){ //上传后的回调
|
if(result.success) {
|
$webUtil.showMsgFromResult(result, "图片上传成功");
|
}
|
}
|
,accept: 'images'
|
})
|
}
|
|
this.stringRepeat=function (char, times) {
|
var s = '';
|
for (var i = 0; i < times; i++) {
|
s += char;
|
}
|
return s;
|
}
|
this.jsonString=function (input, level) {
|
level = level || 0;
|
if (Array.isArray(input)) {
|
if (input.length === 0) {
|
return '[]';
|
}
|
var items = [],
|
i;
|
if (!Array.isArray(input[0]) && typeof input[0] === 'object' && input[0] !== null) {
|
for (i = 0; i < input.length; i++) {
|
items.push(this.stringRepeat(' ', 2 * level) + this.jsonString(input[i], level + 1));
|
}
|
return '[\n' + items.join('\n') + '\n]';
|
}
|
for (i = 0; i < input.length; i++) {
|
items.push(this.jsonString(input[i], level));
|
}
|
return '[' + items.join(', ') + ']';
|
} else if (typeof input === 'object' && input !== null) {
|
var props = [];
|
for (var prop in input) {
|
props.push(prop + ':' + this.jsonString(input[prop], level));
|
}
|
return '{' + props.join(', ') + '}';
|
} else {
|
return JSON.stringify(input);
|
}
|
}
|
};
|
var cs = new Class();
|
exports(cs.MODELNAME,cs);
|
});
|
