mirror of
https://github.com/nsnail/FreeSql.git
synced 2025-06-19 12:28:15 +08:00
新增读取文档帮助
This commit is contained in:
hogan
@ -1,2 +1,72 @@
|
||||
/** layui-v2.4.5 MIT License By https://www.layui.com */
|
||||
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #e2e2e2;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:32px;line-height:32px;border-bottom:1px solid #e2e2e2}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 5px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}
|
||||
html #layuicss-skincodecss {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 1989px
|
||||
}
|
||||
|
||||
.layui-code-h3, .layui-code-view {
|
||||
position: relative;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.layui-code-view {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
border: 1px solid #e2e2e2;
|
||||
border-left-width: 6px;
|
||||
background-color: #F2F2F2;
|
||||
color: #333;
|
||||
font-family: Courier New
|
||||
}
|
||||
|
||||
.layui-code-h3 {
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid #e2e2e2
|
||||
}
|
||||
|
||||
.layui-code-h3 a {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
color: #999
|
||||
}
|
||||
|
||||
.layui-code-view .layui-code-ol {
|
||||
position: relative;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.layui-code-view .layui-code-ol li {
|
||||
position: relative;
|
||||
margin-left: 45px;
|
||||
line-height: 20px;
|
||||
padding: 0 5px;
|
||||
border-left: 1px solid #e2e2e2;
|
||||
list-style-type: decimal-leading-zero;
|
||||
*list-style-type: decimal;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.layui-code-view pre {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.layui-code-notepad {
|
||||
border: 1px solid #0C0C0C;
|
||||
border-left-color: #3F3F3F;
|
||||
background-color: #0C0C0C;
|
||||
color: #C2BE9E
|
||||
}
|
||||
|
||||
.layui-code-notepad .layui-code-h3 {
|
||||
border-bottom: none
|
||||
}
|
||||
|
||||
.layui-code-notepad .layui-code-ol li {
|
||||
background-color: #3F3F3F;
|
||||
border-left: none
|
||||
}
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
/** layui-v2.4.5 MIT License By https://www.layui.com */
|
||||
;layui.define("jquery",function(e){"use strict";var a=layui.$,l="http://www.layui.com/doc/modules/code.html";e("code",function(e){var t=[];e=e||{},e.elem=a(e.elem||".layui-code"),e.about=!("about"in e)||e.about,e.elem.each(function(){t.push(this)}),layui.each(t.reverse(),function(t,i){var c=a(i),o=c.html();(c.attr("lay-encode")||e.encode)&&(o=o.replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/'/g,"'").replace(/"/g,""")),c.html('<ol class="layui-code-ol"><li>'+o.replace(/[\r\t\n]+/g,"</li><li>")+"</li></ol>"),c.find(">.layui-code-h3")[0]||c.prepend('<h3 class="layui-code-h3">'+(c.attr("lay-title")||e.title||"code")+(e.about?'<a href="'+l+'" target="_blank">layui.code</a>':"")+"</h3>");var d=c.find(">.layui-code-ol");c.addClass("layui-box layui-code-view"),(c.attr("lay-skin")||e.skin)&&c.addClass("layui-code-"+(c.attr("lay-skin")||e.skin)),(d.find("li").length/100|0)>0&&d.css("margin-left",(d.find("li").length/100|0)+"px"),(c.attr("lay-height")||e.height)&&d.css("max-height",c.attr("lay-height")||e.height)})})}).addcss("modules/code.css","skincodecss");
|
||||
;layui.define("jquery",function(e){"use strict";var a=layui.$,l="http://www.layui.com/doc/modules/code.html";e("code",function(e){var t=[];e=e||{},e.elem=a(e.elem||".layui-code"),e.about=!("about"in e)||e.about,e.elem.each(function(){t.push(this)}),layui.each(t.reverse(),function(t,i){var c=a(i),o=c.html();(c.attr("lay-encode")||e.encode)&&(o=o.replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/'/g,"'").replace(/"/g,""")),c.html('<ol class="layui-code-ol"><li>'+o.replace(/[\r\t\n]+/g,"</li><li>")+"</li></ol>"),c.find(">.layui-code-h3")[0]||c.prepend('<h3 class="layui-code-h3">'+(c.attr("lay-title")||e.title||"code")+(e.about?'<a href="'+l+'" target="_blank">code</a>':"")+"</h3>");var d=c.find(">.layui-code-ol");c.addClass("layui-box layui-code-view"),(c.attr("lay-skin")||e.skin)&&c.addClass("layui-code-"+(c.attr("lay-skin")||e.skin)),(d.find("li").length/100|0)>0&&d.css("margin-left",(d.find("li").length/100|0)+"px"),(c.attr("lay-height")||e.height)&&d.css("max-height",c.attr("lay-height")||e.height)})})}).addcss("modules/code.css","skincodecss");
|
||||
@ -318,7 +318,10 @@ layui.define(['code', 'element', 'table', 'util'], function (exports) {
|
||||
|
||||
//代码修饰
|
||||
layui.code({
|
||||
elem: 'pre'
|
||||
elem: 'pre',
|
||||
title: "free.code",
|
||||
encode: false,
|
||||
about: false
|
||||
});
|
||||
|
||||
//目录
|
||||
|
||||
@ -0,0 +1,111 @@
|
||||
.layui-laymd {
|
||||
position: relative;
|
||||
display: block;
|
||||
border: 1px solid #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.layui-form-item[pane] .layui-laymd {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layui-laymd-tool {
|
||||
padding: 3px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.layui-laymd-tool i,
|
||||
.layui-laymd-tool span {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.layui-laymd-tool i {
|
||||
min-width: 15px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding: 3px 5px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-family: Consolas, "Microsoft Sans Serif", sans-serif;
|
||||
}
|
||||
|
||||
.layui-laymd-tool i.select,
|
||||
.layui-laymd-tool i:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.layui-laymd-tool span {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
margin: 0 10px;
|
||||
background-color: #d2d2d2;
|
||||
}
|
||||
|
||||
.layui-laymd-full {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layui-laymd-area {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layui-laymd-full .layui-laymd-area {
|
||||
position: absolute;
|
||||
height: auto!important;
|
||||
left: 0;
|
||||
top: 33px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.layui-laymd-area textarea {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
letter-spacing: 1px;
|
||||
font-family: Consolas, "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.layui-laymd-full textarea {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.layui-laymd-area iframe {
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layui-laymd-full iframe {
|
||||
display: block!important;
|
||||
width: 50%;
|
||||
left: 50%;
|
||||
border-left: 1px solid #e6e6e6;
|
||||
}
|
||||
@ -0,0 +1,625 @@
|
||||
layui.define(['jquery'], function(exports) {
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$,
|
||||
MOD_NAME = 'laymd',
|
||||
JS_PATH;
|
||||
|
||||
//获取JS所在路径
|
||||
if (document.currentScript) {
|
||||
JS_PATH = document.currentScript.src;
|
||||
} else {
|
||||
var js = document.scripts, last = js.length - 1, src;
|
||||
for(var i = last; i > 0; i--){
|
||||
if(js[i].readyState === 'interactive'){
|
||||
src = js[i].src;
|
||||
break;
|
||||
}
|
||||
}
|
||||
JS_PATH = src || js[last].src;
|
||||
}
|
||||
JS_PATH = JS_PATH.substring(0, JS_PATH.lastIndexOf('/') + 1);
|
||||
|
||||
//加载CSS
|
||||
layui.link(JS_PATH + 'laymd.css');
|
||||
|
||||
//实例化
|
||||
var MD = function (id, options) {
|
||||
|
||||
//默认配置项
|
||||
var config = {
|
||||
tools: [
|
||||
'bold', 'italic', 'underline', 'del',
|
||||
'|',
|
||||
'left', 'center', 'right',
|
||||
'|',
|
||||
'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
|
||||
'|',
|
||||
'hr', 'link', 'code', 'ol', 'ul', 'tl',
|
||||
'|',
|
||||
'table', 'quote', 'toc', 'img',
|
||||
'|',
|
||||
'full', 'preview'
|
||||
],
|
||||
height: 280
|
||||
};
|
||||
|
||||
//合并配置项
|
||||
config = $.extend({}, config, options);
|
||||
|
||||
//相关元素
|
||||
var EL = {}, THIS = this;
|
||||
|
||||
//获取编辑器容器
|
||||
EL.$div = $(typeof(id) === 'string' ? '#' + id : id).addClass('layui-laymd');
|
||||
|
||||
//获取默认值
|
||||
var initValue = EL.$div.text();
|
||||
|
||||
//设置要显示的工具
|
||||
var toolBar = [];
|
||||
layui.each(config.tools, function(index, item){
|
||||
tools[item] && toolBar.push(tools[item]);
|
||||
});
|
||||
|
||||
//载入元素
|
||||
EL.$div.html([
|
||||
'<div class="layui-unselect layui-laymd-tool">' + toolBar.join('') + '</div>',
|
||||
'<div class="layui-laymd-area">',
|
||||
'<textarea spellcheck="false"></textarea>',
|
||||
'<iframe></iframe>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join(''));
|
||||
|
||||
//设置编辑框和预览框
|
||||
EL.$body = $('body');
|
||||
EL.$div.find('.layui-laymd-area').height(config.height);
|
||||
EL.$div.find('textarea').attr('id', EL.$div.attr('name') || EL.$div.prop('id'))
|
||||
EL.$textArea = EL.$div.find('textarea').attr('name', EL.$div.attr('name') || EL.$div.prop('id')).val(initValue);
|
||||
EL.$iframe = EL.$div.find('iframe');
|
||||
|
||||
//设置预览默认样式
|
||||
EL.$iframe.contents().find('head').append('<link rel="stylesheet" href="' + JS_PATH + 'preview.css' + '">');
|
||||
|
||||
//获取DOM
|
||||
var textArea = EL.$textArea[0];
|
||||
|
||||
//==============================================================================================================
|
||||
|
||||
//绑定按键事件
|
||||
EL.$textArea.on('keydown', function (e) {
|
||||
if (e.ctrlKey) {
|
||||
if (e.shiftKey && e.keyCode === 90) { //ctrl + shift + z
|
||||
actions.redo.call(THIS, e, this, EL);
|
||||
} else if (keyMap[e.keyCode]) {
|
||||
e.preventDefault();
|
||||
actions[keyMap[e.keyCode]].call(THIS, e, this, EL);
|
||||
}
|
||||
} else {
|
||||
if (e.keyCode === 9) { //tab
|
||||
e.preventDefault();
|
||||
actions.tab.call(THIS, e, this, EL);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//绑定按钮事件
|
||||
EL.$textArea.on('keyup', function (e) {
|
||||
if (e.keyCode === 13) {
|
||||
e.preventDefault();
|
||||
actions.enter.call(THIS, e, this, EL);
|
||||
}
|
||||
});
|
||||
|
||||
//滚动事件
|
||||
EL.$textArea.scroll(function () {
|
||||
var ifrBody = EL.$iframe.contents().find('body')[0];
|
||||
if (ifrBody.scrollHeight > EL.$iframe.height()) {
|
||||
var p = (ifrBody.scrollHeight - EL.$iframe.height()) / (textArea.scrollHeight - EL.$textArea.outerHeight());
|
||||
EL.$iframe[0].contentWindow.scroll(0, this.scrollTop * p);
|
||||
}
|
||||
});
|
||||
|
||||
//输入法输入事件
|
||||
var composition = false, preText, sufText;
|
||||
EL.$textArea.on('input', function (e) {
|
||||
composition || actions.input.call(THIS, e, this, EL);
|
||||
}).on('compositionstart', function (e) {
|
||||
preText = this.value;
|
||||
composition = true;
|
||||
}).on('compositionend', function (e) {
|
||||
composition = false;
|
||||
sufText = this.value;
|
||||
preText === sufText || actions.input.call(THIS, e, this, EL);
|
||||
});
|
||||
|
||||
//工具栏事件
|
||||
EL.$div.find('.layui-laymd-tool > i').on('click', function (e) {
|
||||
actions[$(this).attr('laymd-event')].call(THIS, e, this, EL);
|
||||
});
|
||||
|
||||
//==============================================================================================================
|
||||
|
||||
//事件绑定
|
||||
this.on = function (event, callback) {
|
||||
layui.onevent.call(this, MOD_NAME, MOD_NAME + '(' + event + ')', callback);
|
||||
};
|
||||
|
||||
//执行某个动作
|
||||
this.do = function (action, event, element, params) {
|
||||
actions[action] && actions[action].call(THIS, event, element, EL, params);
|
||||
};
|
||||
|
||||
//定时存储操作记录
|
||||
setInterval(function () {
|
||||
THIS.history.undo(true);
|
||||
}, 1500);
|
||||
|
||||
//操作记录
|
||||
this.history = {
|
||||
_undo: [textArea.value],
|
||||
_redo: [],
|
||||
undo: function (record) {
|
||||
if (record) {
|
||||
var text = textArea.value;
|
||||
if (this._undo[this._undo.length - 1] === text) {
|
||||
return false;
|
||||
} else {
|
||||
this._undo.push(text);
|
||||
this._undo.length > 500 && this._undo.shift();
|
||||
}
|
||||
} else {
|
||||
this.undo(true);
|
||||
if (this._undo.length > 1) {
|
||||
this._redo.push(this._undo.pop());
|
||||
textArea.value = this._undo[this._undo.length - 1];
|
||||
actions.change.call(THIS, null, null, EL);
|
||||
}
|
||||
}
|
||||
},
|
||||
redo: function (flush) {
|
||||
if (flush && this._redo.length) {
|
||||
this._redo = [];
|
||||
} else {
|
||||
if (this._redo.length > 0) {
|
||||
textArea.value = this._redo.pop();
|
||||
this.undo(true);
|
||||
actions.change.call(THIS, null, null, EL);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//==============================================================================================================
|
||||
|
||||
/**
|
||||
* 获取选中位置
|
||||
* @returns {{start: number, end: number, text: string}}
|
||||
*/
|
||||
this.getRangeData = function () {
|
||||
textArea.focus();
|
||||
return {
|
||||
start: textArea.selectionStart,
|
||||
end: textArea.selectionEnd,
|
||||
text: textArea.value.substring(textArea.selectionStart, textArea.selectionEnd)
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 替换选中数据
|
||||
* @param rangeData {{start: *|number, end: *|number, text: *|string}}
|
||||
*/
|
||||
this.setRangeData = function (rangeData) {
|
||||
textArea.focus();
|
||||
if (typeof rangeData.text === 'string') {
|
||||
var value = textArea.value;
|
||||
if (textArea.setRangeText) {
|
||||
textArea.setRangeText(rangeData.text);
|
||||
} else {
|
||||
var range = this.getRangeData(),
|
||||
pre = value.substring(0, range.start),
|
||||
suf = value.substring(range.end);
|
||||
textArea.value = pre + rangeData.text + suf;
|
||||
textArea.selectionStart = range.start;
|
||||
textArea.selectionEnd = range.start + rangeData.text.length;
|
||||
}
|
||||
value === textArea.value || EL.$textArea.trigger('input');
|
||||
}
|
||||
if (typeof rangeData.start === 'number') {
|
||||
textArea.selectionStart = rangeData.start;
|
||||
}
|
||||
if (typeof rangeData.end === 'number') {
|
||||
textArea.selectionEnd = rangeData.end;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取选中文本
|
||||
* @returns {string}
|
||||
*/
|
||||
this.getRangeText = function () {
|
||||
return this.getRangeData().text;
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置选中文本
|
||||
* @param text
|
||||
*/
|
||||
this.setRangeText = function (text) {
|
||||
this.setRangeData({text: text});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取光标所在行的数据
|
||||
* @param line
|
||||
* @returns {{start: number, end: number, line: number, text: string}}
|
||||
*/
|
||||
this.getLineData = function (line) {
|
||||
textArea.focus();
|
||||
var lineData = {},
|
||||
text = textArea.value,
|
||||
lines = text.split("\n");
|
||||
|
||||
lineData.start = 0;
|
||||
lineData.line = typeof line === 'number' ? line : text.substring(0, textArea.selectionEnd).split("\n").length - 1;
|
||||
lineData.text = lines[lineData.line] || '';
|
||||
for (var i = 0; i < lineData.line; i++) {
|
||||
lineData.start += lines[i].length + 1;
|
||||
}
|
||||
lineData.end = lineData.start + lineData.text.length;
|
||||
return lineData;
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置光标所在行的数据
|
||||
* @param lineData {{start: *|number, end: *|number, line: *|number, text: *|string}}
|
||||
*/
|
||||
this.setLineData = function (lineData) {
|
||||
textArea.focus();
|
||||
if (typeof lineData.text === 'string') {
|
||||
var line = this.getLineData(lineData.line),
|
||||
value = textArea.value,
|
||||
pre = value.substring(0, line.start),
|
||||
suf = value.substring(line.end);
|
||||
textArea.value = pre + lineData.text + suf;
|
||||
textArea.selectionStart = textArea.selectionEnd = line.start + lineData.text.length;
|
||||
value === textArea.value || EL.$textArea.trigger('input');
|
||||
}
|
||||
if (typeof lineData.start === 'number') {
|
||||
textArea.selectionStart = lineData.start;
|
||||
}
|
||||
if (typeof lineData.end === 'number') {
|
||||
textArea.selectionEnd = lineData.end;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取光标所在行的文本
|
||||
* @returns {string}
|
||||
*/
|
||||
this.getLineText = function (line) {
|
||||
return this.getLineData({line: line}).text;
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置光标所在行的文本
|
||||
* @param text
|
||||
* @param line
|
||||
*/
|
||||
this.setLineText = function (text, line) {
|
||||
this.setLineData({text: text, line: line});
|
||||
};
|
||||
|
||||
//==============================================================================================================
|
||||
|
||||
//获取编辑器的文本
|
||||
this.getText = function () {
|
||||
return textArea.value;
|
||||
};
|
||||
|
||||
//设置预览HTML
|
||||
this.setPreview = function (html) {
|
||||
EL.$iframe.contents().find('body').html(html);
|
||||
};
|
||||
|
||||
//设置超链接
|
||||
this.setLink = function (link, text, title) {
|
||||
actions.link.call(THIS, null, null, EL, {
|
||||
link: link,
|
||||
text: text,
|
||||
title: title
|
||||
});
|
||||
};
|
||||
|
||||
//设置图片
|
||||
this.setImg = function (src, alt, title) {
|
||||
actions.img.call(THIS, null, null, EL, {
|
||||
src: src,
|
||||
alt: alt,
|
||||
title: title
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
//所有工具
|
||||
var tools = {
|
||||
bold: '<i class="laymd-tool-b" title="加粗" laymd-event="bold">B</i>',
|
||||
italic: '<i class="laymd-tool-i" title="斜体" laymd-event="italic">I</i>',
|
||||
underline: '<i class="laymd-tool-u" title="下划线" laymd-event="underline">U</i>',
|
||||
del: '<i class="laymd-tool-d" title="删除线" laymd-event="del">D</i>',
|
||||
'|': '<span></span>',
|
||||
h1: '<i class="laymd-tool-h1" title="h1" laymd-event="h1">h1</i>',
|
||||
h2: '<i class="laymd-tool-h2" title="h2" laymd-event="h2">h2</i>',
|
||||
h3: '<i class="laymd-tool-h3" title="h3" laymd-event="h3">h3</i>',
|
||||
h4: '<i class="laymd-tool-h4" title="h4" laymd-event="h4">h4</i>',
|
||||
h5: '<i class="laymd-tool-h5" title="h5" laymd-event="h5">h5</i>',
|
||||
h6: '<i class="laymd-tool-h6" title="h6" laymd-event="h6">h6</i>',
|
||||
hr: '<i class="laymd-tool-hr" title="换行符" laymd-event="hr">—</i>',
|
||||
link: '<i class="laymd-tool-link" title="超链接" laymd-event="link">A</i>',
|
||||
code: '<i class="laymd-tool-code" title="代码" laymd-event="code">/</i>',
|
||||
ol: '<i class="laymd-tool-ol" title="有序列表" laymd-event="ol">ol</i>',
|
||||
ul: '<i class="laymd-tool-ul" title="无序列表" laymd-event="ul">ul</i>',
|
||||
tl: '<i class="laymd-tool-tl" title="任务列表" laymd-event="tl">tl</i>',
|
||||
table: '<i class="laymd-tool-table" title="表格" laymd-event="table">T</i>',
|
||||
quote: '<i class="laymd-tool-quote" title="引用" laymd-event="quote">Q</i>',
|
||||
toc: '<i class="laymd-tool-toc" title="导航" laymd-event="toc">TOC</i>',
|
||||
left: '<i class="laymd-tool-left" title="居左" laymd-event="left">L</i>',
|
||||
center: '<i class="laymd-tool-center" title="居中" laymd-event="center">C</i>',
|
||||
right: '<i class="laymd-tool-right" title="居右" laymd-event="right">R</i>',
|
||||
img: '<i class="laymd-tool-img" title="图片" laymd-event="img">IMG</i>',
|
||||
full: '<i class="laymd-tool-full" title="全屏" laymd-event="full">↗</i>',
|
||||
preview: '<i class="laymd-tool-preview" title="预览" laymd-event="preview">√</i>'
|
||||
};
|
||||
|
||||
//热键数组
|
||||
var keyMap = [];
|
||||
keyMap[66] = 'bold'; //ctrl + b
|
||||
keyMap[73] = 'italic'; //ctrl + i
|
||||
keyMap[85] = 'underline'; //ctrl + u
|
||||
keyMap[68] = 'del'; //ctrl + d
|
||||
keyMap[37] = 'left'; //ctrl + ←
|
||||
keyMap[38] = 'center'; //ctrl + ↑
|
||||
keyMap[39] = 'right'; //ctrl + →
|
||||
keyMap[49] = 'h1'; //ctrl + 1
|
||||
keyMap[50] = 'h2'; //ctrl + 2
|
||||
keyMap[51] = 'h3'; //ctrl + 3
|
||||
keyMap[52] = 'h4'; //ctrl + 4
|
||||
keyMap[53] = 'h5'; //ctrl + 5
|
||||
keyMap[54] = 'h6'; //ctrl + 6
|
||||
keyMap[189] = 'hr'; //ctrl + -
|
||||
keyMap[76] = 'link'; //ctrl + l
|
||||
keyMap[191] = 'code'; //ctrl + /
|
||||
keyMap[81] = 'quote'; //ctrl + q
|
||||
keyMap[89] = 'redo'; //ctrl + y
|
||||
keyMap[90] = 'undo'; //ctrl + z
|
||||
|
||||
//事件列表
|
||||
var actions = {
|
||||
bold: function (event, element, EL, params) {
|
||||
var range = this.getRangeData();
|
||||
this.setRangeData({
|
||||
text: '**' + range.text + '**',
|
||||
start: range.end + 2,
|
||||
end: range.end + 2
|
||||
});
|
||||
},
|
||||
italic: function (event, element, EL, params) {
|
||||
var range = this.getRangeData();
|
||||
this.setRangeData({
|
||||
text: '*' + range.text + '*',
|
||||
start: range.end + 1,
|
||||
end: range.end + 1
|
||||
});
|
||||
},
|
||||
underline: function (event, element, EL, params) {
|
||||
var range = this.getRangeData();
|
||||
this.setRangeData({
|
||||
text: '++' + range.text + '++',
|
||||
start: range.end + 2,
|
||||
end: range.end + 2
|
||||
});
|
||||
},
|
||||
del: function (event, element, EL, params) {
|
||||
var range = this.getRangeData();
|
||||
this.setRangeData({
|
||||
text: '~~' + range.text + '~~',
|
||||
start: range.end + 2,
|
||||
end: range.end + 2
|
||||
});
|
||||
},
|
||||
left: function (event, element, EL, params) {
|
||||
this.setLineText(this.getLineText().replace(/^ *(:-:|--:) /, ''));
|
||||
},
|
||||
center: function (event, element, EL, params) {
|
||||
this.setLineText(':-: ' + this.getLineText().replace(/ *(^:-:|--:) /, ''));
|
||||
},
|
||||
right: function (event, element, EL, params) {
|
||||
this.setLineText('--: ' + this.getLineText().replace(/^ *(:-:|--:) /, ''));
|
||||
},
|
||||
h1: function (event, element, EL, params) {
|
||||
this.setLineText('# ' + this.getLineText().replace(/^ *#+ /, ''));
|
||||
},
|
||||
h2: function (event, element, EL, params) {
|
||||
this.setLineText('## ' + this.getLineText().replace(/^ *#+ /, ''));
|
||||
},
|
||||
h3: function (event, element, EL, params) {
|
||||
this.setLineText('### ' + this.getLineText().replace(/^ *#+ /, ''));
|
||||
},
|
||||
h4: function (event, element, EL, params) {
|
||||
this.setLineText('#### ' + this.getLineText().replace(/^ *#+ /, ''));
|
||||
},
|
||||
h5: function (event, element, EL, params) {
|
||||
this.setLineText('##### ' + this.getLineText().replace(/^ *#+ /, ''));
|
||||
},
|
||||
h6: function (event, element, EL, params) {
|
||||
this.setLineText('###### ' + this.getLineText().replace(/^ *#+ /, ''));
|
||||
},
|
||||
hr: function (event, element, EL, params) {
|
||||
var range = this.getRangeData();
|
||||
this.setRangeData({
|
||||
text: "\n---\n",
|
||||
start: range.start + 5,
|
||||
end: range.start + 5
|
||||
});
|
||||
},
|
||||
link: function (event, element, EL, params) {
|
||||
var range = this.getRangeData();
|
||||
if (params) {
|
||||
var text = params.text || range.text || params.link,
|
||||
title = params.title || text || '',
|
||||
link = '[' + text + '](' + params.link + (title ? (' "' + title + '"') : '') + ')';
|
||||
this.setRangeData({
|
||||
text: link,
|
||||
start: range.start + link.length,
|
||||
end: range.start + link.length
|
||||
});
|
||||
} else {
|
||||
var textLen = range.text.length,
|
||||
text = textLen ? range.text : 'text',
|
||||
title = textLen ? range.text : 'title';
|
||||
this.setRangeData({
|
||||
text: '[' + text + '](http://link-address "' + title + '")',
|
||||
start: textLen ? (range.start + textLen + 3) : (range.start + 1),
|
||||
end: textLen ? (range.start + textLen + 22) : (range.start + 5),
|
||||
});
|
||||
}
|
||||
},
|
||||
code: function (event, element, EL, params) {
|
||||
var range = this.getRangeData(),
|
||||
line = this.getLineData();
|
||||
if (range.text || line.text) {
|
||||
this.setRangeData({
|
||||
text: '`' + range.text + '`',
|
||||
start: range.end + 1,
|
||||
end: range.end + 1
|
||||
});
|
||||
} else {
|
||||
this.setLineData({
|
||||
text: '```\n\n```',
|
||||
start: line.start + 4,
|
||||
end: line.start + 4
|
||||
});
|
||||
}
|
||||
},
|
||||
ol: function (event, element, EL, params) {
|
||||
this.setLineText(this.getLineText().replace(/^( *)(?:(?:(?:\d+\.)|(?:-(?: \[[ x]])?)) )?(.*)/, '$11. $2'));
|
||||
},
|
||||
ul: function (event, element, EL, params) {
|
||||
this.setLineText(this.getLineText().replace(/^( *)(?:(?:(?:\d+\.)|(?:-(?: \[[ x]])?)) )?(.*)/, '$1- $2'));
|
||||
},
|
||||
tl: function (event, element, EL, params) {
|
||||
this.setLineText(this.getLineText().replace(/^( *)(?:(?:(?:\d+\.)|(?:-(?: \[[ x]])?)) )?(.*)/, '$1- [ ] $2'));
|
||||
},
|
||||
enter: function (event, element, EL, params) {
|
||||
var line = this.getLineData(),
|
||||
preLine = this.getLineData(line.line - 1);
|
||||
var match = /^( *)((?:(?:\d+\.)|(?:-(?: \[[ x]])?)) )?(.*)/.exec(preLine.text);
|
||||
if (match[2]) {
|
||||
if (match[3] === '') {
|
||||
this.setLineText('', preLine.line);
|
||||
this.setLineText('', line.line);
|
||||
} else if (match[2].length === 3) {
|
||||
var m = /^(\d+)\. /.exec(match[2]);
|
||||
this.setLineText(match[1] + (parseInt(m[1]) + 1) + '. ' + line.text);
|
||||
} else {
|
||||
this.setLineText(match[1] + match[2] + line.text);
|
||||
}
|
||||
}
|
||||
},
|
||||
table: function (event, element, EL, params) {
|
||||
var range = this.getRangeData(),
|
||||
table = [
|
||||
this.getLineText() ? '\n' : '',
|
||||
'header 1 | header 2',
|
||||
'--- | ---',
|
||||
'row 1 col 1 | row 1 col 2',
|
||||
'row 2 col 1 | row 2 col 2',
|
||||
'\n'
|
||||
].join("\n");
|
||||
this.setRangeData({
|
||||
text: table,
|
||||
start: range.start + table.length,
|
||||
end: range.start + table.length
|
||||
});
|
||||
},
|
||||
quote: function (event, element, EL, params) {
|
||||
this.setLineText('> ' + this.getLineText().replace(/^ *> /, ''));
|
||||
},
|
||||
toc: function (event, element, EL, params) {
|
||||
var range = this.getRangeData();
|
||||
this.setRangeData({
|
||||
text: '\n[TOC]\n',
|
||||
start: range.start + 7,
|
||||
end: range.start + 7
|
||||
});
|
||||
},
|
||||
img: function (event, element, EL, params) {
|
||||
var range = this.getRangeData();
|
||||
if (params) {
|
||||
var alt = params.alt || range.text || params.title || params.src,
|
||||
title = params.title || alt || '',
|
||||
src = '[' + alt + '](' + params.src + (title ? (' "' + title + '"') : '') + ')';
|
||||
this.setRangeData({
|
||||
text: src,
|
||||
start: range.start + src.length,
|
||||
end: range.start + src.length
|
||||
});
|
||||
} else {
|
||||
var textLen = range.text.length,
|
||||
alt = textLen ? range.text : 'alt',
|
||||
title = textLen ? range.text : 'title';
|
||||
this.setRangeData({
|
||||
text: '',
|
||||
start: textLen ? (range.start + textLen + 4) : (range.start + 2),
|
||||
end: textLen ? (range.start + textLen + 23) : (range.start + 5),
|
||||
});
|
||||
}
|
||||
},
|
||||
tab: function (event, element, EL, params) {
|
||||
var range = this.getRangeData();
|
||||
this.setRangeData({text: ' ', start: range.start + 4, end: range.start + 4});
|
||||
},
|
||||
input: function (event, element, EL, params) {
|
||||
this.history.redo(true);
|
||||
actions.change.call(this, event, element, EL, params);
|
||||
},
|
||||
redo: function (event, element, EL, params) {
|
||||
this.history.redo(params);
|
||||
},
|
||||
undo: function (event, element, EL, params) {
|
||||
this.history.undo(params);
|
||||
},
|
||||
change: function (event, element, EL, params) {
|
||||
layui.event.call(this, MOD_NAME, MOD_NAME + '(change)');
|
||||
},
|
||||
full: function (event, element, EL, params) {
|
||||
if (EL.$div.hasClass('layui-laymd-full')) {
|
||||
EL.$div.removeClass('layui-laymd-full');
|
||||
element && $(element).text('↗');
|
||||
EL.$div.find('i.laymd-tool-preview').show();
|
||||
EL.$body.removeAttr('style');
|
||||
} else {
|
||||
EL.$div.addClass('layui-laymd-full');
|
||||
element && $(element).text('↙');
|
||||
EL.$div.find('i.laymd-tool-preview').hide();
|
||||
EL.$body.attr('style', 'overflow: hidden;');
|
||||
}
|
||||
},
|
||||
preview: function (event, element, EL, params) {
|
||||
if (EL.$iframe.is(':visible')) {
|
||||
EL.$iframe.hide();
|
||||
element && $(element).removeClass('select');
|
||||
} else {
|
||||
EL.$iframe.show();
|
||||
element && $(element).addClass('select');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
exports(MOD_NAME, {
|
||||
init: function (id, options) {
|
||||
return new MD(id, options);
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,648 @@
|
||||
/**
|
||||
@Name：layui.layedit 富文本编辑器
|
||||
@Author：贤心
|
||||
@License：LGPL
|
||||
|
||||
*/
|
||||
|
||||
layui.define(['layer', 'form'], function (exports) {
|
||||
"use strict";
|
||||
|
||||
var $ = layui.jquery
|
||||
, layer = layui.layer
|
||||
, form = layui.form()
|
||||
, hint = layui.hint()
|
||||
, device = layui.device()
|
||||
|
||||
, MOD_NAME = 'layedit', THIS = 'layui-this', SHOW = 'layui-show', ABLED = 'layui-disabled'
|
||||
|
||||
, Edit = function () {
|
||||
var that = this;
|
||||
that.index = 0;
|
||||
|
||||
//全局配置
|
||||
that.config = {
|
||||
//默认工具bar
|
||||
tool: [
|
||||
'strong', 'italic', 'underline', 'del'
|
||||
, '|'
|
||||
, 'left', 'center', 'right'
|
||||
, '|'
|
||||
, 'link', 'unlink', 'face', 'image'
|
||||
]
|
||||
, hideTool: []
|
||||
, height: 280 //默认高
|
||||
};
|
||||
};
|
||||
|
||||
//全局设置
|
||||
Edit.prototype.set = function (options) {
|
||||
var that = this;
|
||||
$.extend(true, that.config, options);
|
||||
return that;
|
||||
};
|
||||
|
||||
//事件监听
|
||||
Edit.prototype.on = function (events, callback) {
|
||||
return layui.onevent(MOD_NAME, events, callback);
|
||||
};
|
||||
|
||||
//建立编辑器
|
||||
Edit.prototype.build = function (id, settings) {
|
||||
settings = settings || {};
|
||||
|
||||
var that = this
|
||||
, config = that.config
|
||||
, ELEM = 'layui-layedit', textArea = $('#' + id)
|
||||
, name = 'LAY_layedit_' + (++that.index)
|
||||
, haveBuild = textArea.next('.' + ELEM)
|
||||
|
||||
, set = $.extend({}, config, settings)
|
||||
|
||||
, tool = function () {
|
||||
var node = [], hideTools = {};
|
||||
layui.each(set.hideTool, function (_, item) {
|
||||
hideTools[item] = true;
|
||||
});
|
||||
layui.each(set.tool, function (_, item) {
|
||||
if (tools[item] && !hideTools[item]) {
|
||||
node.push(tools[item]);
|
||||
}
|
||||
});
|
||||
return node.join('');
|
||||
}()
|
||||
|
||||
|
||||
, editor = $(['<div class="' + ELEM + '">'
|
||||
, '<div class="layui-unselect layui-layedit-tool">' + tool + '</div>'
|
||||
, '<div class="layui-layedit-iframe">'
|
||||
, '<iframe id="' + name + '" name="' + name + '" textarea="' + id + '" frameborder="0"></iframe>'
|
||||
, '</div>'
|
||||
, '</div>'].join(''))
|
||||
|
||||
//编辑器不兼容ie8以下
|
||||
if (device.ie && device.ie < 8) {
|
||||
return textArea.removeClass('layui-hide').addClass(SHOW);
|
||||
}
|
||||
|
||||
haveBuild[0] && (haveBuild.remove());
|
||||
|
||||
setIframe.call(that, editor, textArea[0], set)
|
||||
textArea.addClass('layui-hide').after(editor);
|
||||
|
||||
return that.index;
|
||||
};
|
||||
|
||||
//获得编辑器中内容
|
||||
Edit.prototype.getContent = function (index) {
|
||||
var iframeWin = getWin(index);
|
||||
if (!iframeWin[0]) return;
|
||||
return toLower(iframeWin[0].document.body.innerHTML);
|
||||
};
|
||||
|
||||
//获得编辑器中纯文本内容
|
||||
Edit.prototype.getText = function (index) {
|
||||
var iframeWin = getWin(index);
|
||||
if (!iframeWin[0]) return;
|
||||
return $(iframeWin[0].document.body).text();
|
||||
};
|
||||
|
||||
//将编辑器内容同步到textarea（一般用于异步提交时）
|
||||
Edit.prototype.sync = function (index) {
|
||||
var iframeWin = getWin(index);
|
||||
if (!iframeWin[0]) return;
|
||||
var textarea = $('#' + iframeWin[1].attr('textarea'));
|
||||
textarea.val(toLower(iframeWin[0].document.body.innerHTML));
|
||||
};
|
||||
|
||||
//获取编辑器选中内容
|
||||
Edit.prototype.getSelection = function (index) {
|
||||
var iframeWin = getWin(index);
|
||||
if (!iframeWin[0]) return;
|
||||
var range = Range(iframeWin[0].document);
|
||||
return document.selection ? range.text : range.toString();
|
||||
};
|
||||
|
||||
//iframe初始化
|
||||
var setIframe = function (editor, textArea, set) {
|
||||
var that = this, iframe = editor.find('iframe');
|
||||
|
||||
iframe.css({
|
||||
height: set.height
|
||||
}).on('load', function () {
|
||||
var conts = iframe.contents()
|
||||
, iframeWin = iframe.prop('contentWindow')
|
||||
, head = conts.find('head')
|
||||
, style = $(['<style>'
|
||||
, '*{margin: 0; padding: 0;}'
|
||||
, 'body{padding: 10px; line-height: 20px; overflow-x: hidden; word-wrap: break-word; font: 14px Helvetica Neue,Helvetica,PingFang SC,Microsoft YaHei,Tahoma,Arial,sans-serif; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}'
|
||||
, 'a{color:#01AAED; text-decoration:none;}a:hover{color:#c00}'
|
||||
, 'p{margin-bottom: 10px;}'
|
||||
, 'img{display: inline-block; border: none; vertical-align: middle;}'
|
||||
, 'pre{margin: 10px 0; padding: 10px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}'
|
||||
, '</style>'].join(''))
|
||||
, body = conts.find('body');
|
||||
|
||||
head.append(style);
|
||||
body.attr('contenteditable', 'true').css({
|
||||
'min-height': set.height
|
||||
}).html(textArea.value || '');
|
||||
|
||||
hotkey.apply(that, [iframeWin, iframe, textArea, set]); //快捷键处理
|
||||
toolActive.call(that, iframeWin, editor, set); //触发工具
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
//获得iframe窗口对象
|
||||
, getWin = function (index) {
|
||||
var iframe = $('#LAY_layedit_' + index)
|
||||
, iframeWin = iframe.prop('contentWindow');
|
||||
return [iframeWin, iframe];
|
||||
}
|
||||
|
||||
//IE8下将标签处理成小写
|
||||
, toLower = function (html) {
|
||||
if (device.ie == 8) {
|
||||
html = html.replace(/<.+>/g, function (str) {
|
||||
return str.toLowerCase();
|
||||
});
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
//快捷键处理
|
||||
, hotkey = function (iframeWin, iframe, textArea, set) {
|
||||
var iframeDOM = iframeWin.document, body = $(iframeDOM.body);
|
||||
body.on('keydown', function (e) {
|
||||
var keycode = e.keyCode;
|
||||
//处理回车
|
||||
if (keycode === 13) {
|
||||
var range = Range(iframeDOM);
|
||||
var container = getContainer(range)
|
||||
, parentNode = container.parentNode;
|
||||
|
||||
if (parentNode.tagName.toLowerCase() === 'pre') {
|
||||
if (e.shiftKey) return
|
||||
layer.msg('请暂时用shift+enter');
|
||||
return false;
|
||||
}
|
||||
iframeDOM.execCommand('formatBlock', false, '<p>');
|
||||
}
|
||||
});
|
||||
|
||||
//给textarea同步内容
|
||||
$(textArea).parents('form').on('submit', function () {
|
||||
var html = body.html();
|
||||
//IE8下将标签处理成小写
|
||||
if (device.ie == 8) {
|
||||
html = html.replace(/<.+>/g, function (str) {
|
||||
return str.toLowerCase();
|
||||
});
|
||||
}
|
||||
textArea.value = html;
|
||||
});
|
||||
|
||||
//处理粘贴
|
||||
body.on('paste', function (e) {
|
||||
iframeDOM.execCommand('formatBlock', false, '<p>');
|
||||
setTimeout(function () {
|
||||
filter.call(iframeWin, body);
|
||||
textArea.value = body.html();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
//标签过滤
|
||||
, filter = function (body) {
|
||||
var iframeWin = this
|
||||
, iframeDOM = iframeWin.document;
|
||||
|
||||
//清除影响版面的css属性
|
||||
body.find('*[style]').each(function () {
|
||||
var textAlign = this.style.textAlign;
|
||||
this.removeAttribute('style');
|
||||
$(this).css({
|
||||
'text-align': textAlign || ''
|
||||
})
|
||||
});
|
||||
|
||||
//修饰表格
|
||||
body.find('table').addClass('layui-table');
|
||||
|
||||
//移除不安全的标签
|
||||
body.find('script,link').remove();
|
||||
}
|
||||
|
||||
//Range对象兼容性处理
|
||||
, Range = function (iframeDOM) {
|
||||
return iframeDOM.selection
|
||||
? iframeDOM.selection.createRange()
|
||||
: iframeDOM.getSelection().getRangeAt(0);
|
||||
}
|
||||
|
||||
//当前Range对象的endContainer兼容性处理
|
||||
, getContainer = function (range) {
|
||||
return range.endContainer || range.parentElement().childNodes[0]
|
||||
}
|
||||
|
||||
//在选区插入内联元素
|
||||
, insertInline = function (tagName, attr, range) {
|
||||
var iframeDOM = this.document
|
||||
, elem = document.createElement(tagName)
|
||||
for (var key in attr) {
|
||||
elem.setAttribute(key, attr[key]);
|
||||
}
|
||||
elem.removeAttribute('text');
|
||||
|
||||
if (iframeDOM.selection) { //IE
|
||||
var text = range.text || attr.text;
|
||||
if (tagName === 'a' && !text) return;
|
||||
if (text) {
|
||||
elem.innerHTML = text;
|
||||
}
|
||||
range.pasteHTML($(elem).prop('outerHTML'));
|
||||
range.select();
|
||||
} else { //非IE
|
||||
var text = range.toString() || attr.text;
|
||||
if (tagName === 'a' && !text) return;
|
||||
if (text) {
|
||||
elem.innerHTML = text;
|
||||
}
|
||||
range.deleteContents();
|
||||
range.insertNode(elem);
|
||||
}
|
||||
}
|
||||
|
||||
//工具选中
|
||||
, toolCheck = function (tools, othis) {
|
||||
var iframeDOM = this.document
|
||||
, CHECK = 'layedit-tool-active'
|
||||
, container = getContainer(Range(iframeDOM))
|
||||
, item = function (type) {
|
||||
return tools.find('.layedit-tool-' + type)
|
||||
}
|
||||
|
||||
if (othis) {
|
||||
othis[othis.hasClass(CHECK) ? 'removeClass' : 'addClass'](CHECK);
|
||||
}
|
||||
|
||||
tools.find('>i').removeClass(CHECK);
|
||||
item('unlink').addClass(ABLED);
|
||||
|
||||
$(container).parents().each(function () {
|
||||
var tagName = this.tagName.toLowerCase()
|
||||
, textAlign = this.style.textAlign;
|
||||
|
||||
//文字
|
||||
if (tagName === 'b' || tagName === 'strong') {
|
||||
item('b').addClass(CHECK)
|
||||
}
|
||||
if (tagName === 'i' || tagName === 'em') {
|
||||
item('i').addClass(CHECK)
|
||||
}
|
||||
if (tagName === 'u') {
|
||||
item('u').addClass(CHECK)
|
||||
}
|
||||
if (tagName === 'strike') {
|
||||
item('d').addClass(CHECK)
|
||||
}
|
||||
|
||||
//对齐
|
||||
if (tagName === 'p') {
|
||||
if (textAlign === 'center') {
|
||||
item('center').addClass(CHECK);
|
||||
} else if (textAlign === 'right') {
|
||||
item('right').addClass(CHECK);
|
||||
} else {
|
||||
item('left').addClass(CHECK);
|
||||
}
|
||||
}
|
||||
|
||||
//超链接
|
||||
if (tagName === 'a') {
|
||||
item('link').addClass(CHECK);
|
||||
item('unlink').removeClass(ABLED);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//触发工具
|
||||
, toolActive = function (iframeWin, editor, set) {
|
||||
var iframeDOM = iframeWin.document
|
||||
, body = $(iframeDOM.body)
|
||||
, toolEvent = {
|
||||
//超链接
|
||||
link: function (range) {
|
||||
var container = getContainer(range)
|
||||
, parentNode = $(container).parent();
|
||||
|
||||
link.call(body, {
|
||||
href: parentNode.attr('href')
|
||||
, target: parentNode.attr('target')
|
||||
}, function (field) {
|
||||
var parent = parentNode[0];
|
||||
if (parent.tagName === 'A') {
|
||||
parent.href = field.url;
|
||||
} else {
|
||||
insertInline.call(iframeWin, 'a', {
|
||||
target: field.target
|
||||
, href: field.url
|
||||
, text: field.url
|
||||
}, range);
|
||||
}
|
||||
});
|
||||
}
|
||||
//清除超链接
|
||||
, unlink: function (range) {
|
||||
iframeDOM.execCommand('unlink');
|
||||
}
|
||||
//表情
|
||||
, face: function (range) {
|
||||
face.call(this, function (img) {
|
||||
insertInline.call(iframeWin, 'img', {
|
||||
src: img.src
|
||||
, alt: img.alt
|
||||
}, range);
|
||||
});
|
||||
}
|
||||
//图片
|
||||
, image: function (range) {
|
||||
var that = this;
|
||||
layui.use('upload', function (upload) {
|
||||
var uploadImage = set.uploadImage || {};
|
||||
upload({
|
||||
url: uploadImage.url
|
||||
, method: uploadImage.type
|
||||
, elem: $(that).find('input')[0]
|
||||
, unwrap: true
|
||||
, success: function (res) {
|
||||
if (res.code == 0) {
|
||||
res.data = res.data || {};
|
||||
insertInline.call(iframeWin, 'img', {
|
||||
src: res.data.src
|
||||
, alt: res.data.title
|
||||
}, range);
|
||||
} else {
|
||||
layer.msg(res.msg || '上传失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
//插入代码
|
||||
, code: function (range) {
|
||||
code.call(body, function (pre) {
|
||||
insertInline.call(iframeWin, 'pre', {
|
||||
text: pre.code
|
||||
, 'lay-lang': pre.lang
|
||||
}, range);
|
||||
});
|
||||
}
|
||||
//帮助
|
||||
, help: function () {
|
||||
layer.open({
|
||||
type: 2
|
||||
, title: '帮助'
|
||||
, area: ['600px', '380px']
|
||||
, shadeClose: true
|
||||
, shade: 0.1
|
||||
, skin: 'layui-layer-msg'
|
||||
, content: ['http://www.layui.com/about/layedit/help.html', 'no']
|
||||
});
|
||||
}
|
||||
}
|
||||
, tools = editor.find('.layui-layedit-tool')
|
||||
|
||||
, click = function () {
|
||||
var othis = $(this)
|
||||
, events = othis.attr('layedit-event')
|
||||
, command = othis.attr('lay-command');
|
||||
|
||||
if (othis.hasClass(ABLED)) return;
|
||||
|
||||
body.focus();
|
||||
|
||||
var range = Range(iframeDOM)
|
||||
, container = range.commonAncestorContainer
|
||||
|
||||
if (command) {
|
||||
iframeDOM.execCommand(command);
|
||||
if (/justifyLeft|justifyCenter|justifyRight/.test(command)) {
|
||||
iframeDOM.execCommand('formatBlock', false, '<p>');
|
||||
}
|
||||
setTimeout(function () {
|
||||
body.focus();
|
||||
}, 10);
|
||||
} else {
|
||||
toolEvent[events] && toolEvent[events].call(this, range);
|
||||
}
|
||||
toolCheck.call(iframeWin, tools, othis);
|
||||
}
|
||||
|
||||
, isClick = /image/
|
||||
|
||||
tools.find('>i').on('mousedown', function () {
|
||||
var othis = $(this)
|
||||
, events = othis.attr('layedit-event');
|
||||
if (isClick.test(events)) return;
|
||||
click.call(this)
|
||||
}).on('click', function () {
|
||||
var othis = $(this)
|
||||
, events = othis.attr('layedit-event');
|
||||
if (!isClick.test(events)) return;
|
||||
click.call(this)
|
||||
});
|
||||
|
||||
//触发内容区域
|
||||
body.on('click', function () {
|
||||
toolCheck.call(iframeWin, tools);
|
||||
layer.close(face.index);
|
||||
});
|
||||
}
|
||||
|
||||
//超链接面板
|
||||
, link = function (options, callback) {
|
||||
var body = this, index = layer.open({
|
||||
type: 1
|
||||
, id: 'LAY_layedit_link'
|
||||
, area: '350px'
|
||||
, shade: 0.05
|
||||
, shadeClose: true
|
||||
, moveType: 1
|
||||
, title: '超链接'
|
||||
, skin: 'layui-layer-msg'
|
||||
, content: ['<ul class="layui-form" style="margin: 15px;">'
|
||||
, '<li class="layui-form-item">'
|
||||
, '<label class="layui-form-label" style="width: 60px;">URL</label>'
|
||||
, '<div class="layui-input-block" style="margin-left: 90px">'
|
||||
, '<input name="url" lay-verify="url" value="' + (options.href || '') + '" autofocus="true" autocomplete="off" class="layui-input">'
|
||||
, '</div>'
|
||||
, '</li>'
|
||||
, '<li class="layui-form-item">'
|
||||
, '<label class="layui-form-label" style="width: 60px;">打开方式</label>'
|
||||
, '<div class="layui-input-block" style="margin-left: 90px">'
|
||||
, '<input type="radio" name="target" value="_self" class="layui-input" title="当前窗口"'
|
||||
+ ((options.target === '_self' || !options.target) ? 'checked' : '') + '>'
|
||||
, '<input type="radio" name="target" value="_blank" class="layui-input" title="新窗口" '
|
||||
+ (options.target === '_blank' ? 'checked' : '') + '>'
|
||||
, '</div>'
|
||||
, '</li>'
|
||||
, '<li class="layui-form-item" style="text-align: center;">'
|
||||
, '<button type="button" lay-submit lay-filter="layedit-link-yes" class="layui-btn"> 确定 </button>'
|
||||
, '<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>'
|
||||
, '</li>'
|
||||
, '</ul>'].join('')
|
||||
, success: function (layero, index) {
|
||||
var eventFilter = 'submit(layedit-link-yes)';
|
||||
form.render('radio');
|
||||
layero.find('.layui-btn-primary').on('click', function () {
|
||||
layer.close(index);
|
||||
body.focus();
|
||||
});
|
||||
form.on(eventFilter, function (data) {
|
||||
layer.close(link.index);
|
||||
callback && callback(data.field);
|
||||
});
|
||||
}
|
||||
});
|
||||
link.index = index;
|
||||
}
|
||||
|
||||
//表情面板
|
||||
, face = function (callback) {
|
||||
//表情库
|
||||
var faces = function () {
|
||||
var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {};
|
||||
layui.each(alt, function (index, item) {
|
||||
arr[item] = layui.cache.dir + 'images/face/' + index + '.gif';
|
||||
});
|
||||
return arr;
|
||||
}();
|
||||
face.hide = face.hide || function (e) {
|
||||
if ($(e.target).attr('layedit-event') !== 'face') {
|
||||
layer.close(face.index);
|
||||
}
|
||||
}
|
||||
return face.index = layer.tips(function () {
|
||||
var content = [];
|
||||
layui.each(faces, function (key, item) {
|
||||
content.push('<li title="' + key + '"><img src="' + item + '" alt="' + key + '"></li>');
|
||||
});
|
||||
return '<ul class="layui-clear">' + content.join('') + '</ul>';
|
||||
}(), this, {
|
||||
tips: 1
|
||||
, time: 0
|
||||
, skin: 'layui-box layui-util-face'
|
||||
, maxWidth: 500
|
||||
, success: function (layero, index) {
|
||||
layero.css({
|
||||
marginTop: -4
|
||||
, marginLeft: -10
|
||||
}).find('.layui-clear>li').on('click', function () {
|
||||
callback && callback({
|
||||
src: faces[this.title]
|
||||
, alt: this.title
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
$(document).off('click', face.hide).on('click', face.hide);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//插入代码面板
|
||||
, code = function (callback) {
|
||||
var body = this, index = layer.open({
|
||||
type: 1
|
||||
, id: 'LAY_layedit_code'
|
||||
, area: '550px'
|
||||
, shade: 0.05
|
||||
, shadeClose: true
|
||||
, moveType: 1
|
||||
, title: '插入代码'
|
||||
, skin: 'layui-layer-msg'
|
||||
, content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">'
|
||||
, '<li class="layui-form-item">'
|
||||
, '<label class="layui-form-label">请选择语言</label>'
|
||||
, '<div class="layui-input-block">'
|
||||
, '<select name="lang">'
|
||||
, '<option value="JavaScript">JavaScript</option>'
|
||||
, '<option value="HTML">HTML</option>'
|
||||
, '<option value="CSS">CSS</option>'
|
||||
, '<option value="Java">Java</option>'
|
||||
, '<option value="PHP">PHP</option>'
|
||||
, '<option value="C#">C#</option>'
|
||||
, '<option value="Python">Python</option>'
|
||||
, '<option value="Ruby">Ruby</option>'
|
||||
, '<option value="Go">Go</option>'
|
||||
, '</select>'
|
||||
, '</div>'
|
||||
, '</li>'
|
||||
, '<li class="layui-form-item layui-form-text">'
|
||||
, '<label class="layui-form-label">代码</label>'
|
||||
, '<div class="layui-input-block">'
|
||||
, '<textarea name="code" lay-verify="required" autofocus="true" class="layui-textarea" style="height: 200px;"></textarea>'
|
||||
, '</div>'
|
||||
, '</li>'
|
||||
, '<li class="layui-form-item" style="text-align: center;">'
|
||||
, '<button type="button" lay-submit lay-filter="layedit-code-yes" class="layui-btn"> 确定 </button>'
|
||||
, '<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>'
|
||||
, '</li>'
|
||||
, '</ul>'].join('')
|
||||
, success: function (layero, index) {
|
||||
var eventFilter = 'submit(layedit-code-yes)';
|
||||
form.render('select');
|
||||
layero.find('.layui-btn-primary').on('click', function () {
|
||||
layer.close(index);
|
||||
body.focus();
|
||||
});
|
||||
form.on(eventFilter, function (data) {
|
||||
layer.close(code.index);
|
||||
callback && callback(data.field);
|
||||
});
|
||||
}
|
||||
});
|
||||
code.index = index;
|
||||
}
|
||||
|
||||
//全部工具
|
||||
, tools = {
|
||||
html: '<i class="layui-icon layedit-tool-html" title="HTML源代码" lay-command="html" layedit-event="html""></i><span class="layedit-tool-mid"></span>'
|
||||
,
|
||||
strong: '<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b""></i>'
|
||||
,
|
||||
italic: '<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i""></i>'
|
||||
,
|
||||
underline: '<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u""></i>'
|
||||
,
|
||||
del: '<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d""></i>'
|
||||
|
||||
,
|
||||
'|': '<span class="layedit-tool-mid"></span>'
|
||||
|
||||
,
|
||||
left: '<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left""></i>'
|
||||
,
|
||||
center: '<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center""></i>'
|
||||
,
|
||||
right: '<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right""></i>'
|
||||
,
|
||||
link: '<i class="layui-icon layedit-tool-link" title="插入链接" layedit-event="link""></i>'
|
||||
,
|
||||
unlink: '<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除链接" lay-command="unlink" layedit-event="unlink""></i>'
|
||||
,
|
||||
face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>'
|
||||
,
|
||||
image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>'
|
||||
,
|
||||
code: '<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code"></i>'
|
||||
|
||||
,
|
||||
help: '<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help"></i>'
|
||||
}
|
||||
|
||||
, edit = new Edit();
|
||||
|
||||
exports(MOD_NAME, edit);
|
||||
});
|
||||
@ -0,0 +1,966 @@
|
||||
/**
|
||||
@Name：layui.markdown markdown编辑器
|
||||
@Author：kun
|
||||
@License：LGPL
|
||||
*/
|
||||
layui.define(['layer', 'form'], function (exports) {
|
||||
var $ = layui.jquery,
|
||||
_form = layui.form(),
|
||||
_layer = layui.layer,
|
||||
markdown = function () {
|
||||
//全局配置
|
||||
this.config = {
|
||||
//默认工具bar
|
||||
tools: [
|
||||
'face', 'image', 'link', 'code', 'preview', 'help'
|
||||
],
|
||||
height: 280 //默认高
|
||||
};
|
||||
};
|
||||
|
||||
// markdown 解析器
|
||||
var _parser = new HyperDown;
|
||||
|
||||
var tools = {
|
||||
face: '<span event="face" title="插入表情"><i class="iconfont" event="face"></i>表情</span>',
|
||||
image: '<span event="image" title="插入图片"><i class="iconfont" event="image"></i>图片</span>',
|
||||
link: '<span event="link" title="插入链接"><i class="iconfont" event="link"></i>链接</span>',
|
||||
code: '<span event="code" title="插入代码"><i class="iconfont" event="code"></i>代码</span>',
|
||||
preview: '<span event="preview" title="预览"><i class="iconfont" event="preview"></i>预览</span>'
|
||||
};
|
||||
|
||||
// 建立编辑器
|
||||
markdown.prototype.build = function (id, settings) {
|
||||
var _settings = $.extend({}, this.config, (settings || {}));
|
||||
var image_upload_action = _settings.image_upload_action; // 上传图片的action
|
||||
var _tools = (function () {
|
||||
var _nodes = [];
|
||||
$.each(_settings.tools, function (item) {
|
||||
if (tools[_settings.tools[item]])
|
||||
_nodes.push(tools[_settings.tools[item]]);
|
||||
});
|
||||
return _nodes.join('');
|
||||
})();
|
||||
|
||||
var editor = $([
|
||||
'<div class="layui-markdown">',
|
||||
' <div class="tools">' + _tools + '<span type="help" style="float: right; color: #afafaf"><small>markdown</small></span></div>',
|
||||
' <textarea placeholder="请输入内容" name="markdown_content" v-model="markdown_content" debounce="500" style="min-height: ' + _settings.height + 'px"></textarea>',
|
||||
'</div>'].join('')
|
||||
);
|
||||
|
||||
$('#' + id).empty().append(editor);
|
||||
|
||||
// 表情
|
||||
$('#' + id).find("span[event='face']").click(function () {
|
||||
face($(this), function (img) {
|
||||
// insertTextarea(document.getElementsByName("markdown_content")[0], "@" + img.alt +"(" + img.src + ")")
|
||||
insertTextarea(document.getElementsByName("markdown_content")[0], "@" + img.alt);
|
||||
})
|
||||
});
|
||||
|
||||
// 图片
|
||||
$('#' + id).find("span[event='image']").click(function () {
|
||||
// _layer.msg("开发中...", {shift: 6, time: 1000});
|
||||
var textarea = document.getElementsByName("markdown_content")[0];
|
||||
image($(this), image_upload_action, function (image) {
|
||||
insertTextarea(textarea, "![" + image.alt + "](" + image.src + ")");
|
||||
});
|
||||
});
|
||||
|
||||
// 链接
|
||||
$('#' + id).find("span[event='link']").click(function () {
|
||||
var textarea = document.getElementsByName("markdown_content")[0];
|
||||
var text = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
|
||||
link($(this), text, function (link) {
|
||||
var text = "";
|
||||
if (link.title && link.url) {
|
||||
text = link.title ? "[" + link.title + "](" + link.url + ")" : link.url
|
||||
} else if (!link.title && link.url) {
|
||||
text = link.url;
|
||||
}
|
||||
insertTextarea(textarea, text);
|
||||
});
|
||||
});
|
||||
|
||||
// 插入代码
|
||||
$('#' + id).find("span[event='code']").click(function () {
|
||||
var textarea = document.getElementsByName("markdown_content")[0];
|
||||
code($(this), function (_code) {
|
||||
insertTextarea(textarea, "\n~~~lang-" + _code.lang + "\n" + _code.content + "\n" + "~~~" + "\n");
|
||||
});
|
||||
});
|
||||
|
||||
// 预览
|
||||
$('#' + id).find("span[event='preview']").click(function () {
|
||||
var textarea = document.getElementsByName("markdown_content")[0];
|
||||
_layer.open({
|
||||
title: "预览", type: 1, area: ["100%", "100%"], btn: null, shadeClose: true, shade: 0.2,
|
||||
content: "<div class='layui-markdown' style='width: 1000px; margin: 5px auto 20px; padding: 25px 20px; background: #FBFBFB;'>" +
|
||||
_parser.makeHtml(textarea.value) + "</div>",
|
||||
success: function (layero, index) {
|
||||
$(document).on('keydown', function (e) {
|
||||
if (e.keyCode == 27)
|
||||
_layer.close(index);
|
||||
});
|
||||
Prism.highlightAll();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 修改textarea文字
|
||||
var insertTextarea = function (textarea, str) {
|
||||
if (textarea) {
|
||||
var _value = textarea.value;
|
||||
textarea.value = _value.substring(0, textarea.selectionStart) + str + _value.substring(textarea.selectionEnd);
|
||||
}
|
||||
};
|
||||
|
||||
// code
|
||||
var code = function(obj, callback) {
|
||||
return _layer.open({
|
||||
title: "插入代码：", type: 1, area: ["800px", "500px"], btn: null, shadeClose: true, shade: 0.2,
|
||||
content: "<div class='layui-form' style='padding: 20px;'>" +
|
||||
" <div class='layui-form-item' style='margin-left: -20px'>" +
|
||||
" <div class='layui-input-inline'>" +
|
||||
" <select name='lang'>" +
|
||||
" <option value=''>请选择语言</option>" +
|
||||
" <option value='javascript'>Javascript</option>" +
|
||||
" <option value='html'>HTML</option>" +
|
||||
" <option value='css'>CSS</option>" +
|
||||
" <option value='php'>PHP</option>" +
|
||||
" <option value='java'>Java</option>" +
|
||||
" <option value='ruby'>Ruby</option>" +
|
||||
" <option value='python'>Python</option>" +
|
||||
" <option value='csharp'>C#</option>" +
|
||||
" <option value='aspnet'>ASP.NET</option>" +
|
||||
" <option value='json'>JSON</option>" +
|
||||
" <option value='sql'>SQL</option>" +
|
||||
" <option value='markdown'>Markdown</option>" +
|
||||
" </select>" +
|
||||
" </div>" +
|
||||
" </div>" +
|
||||
" <div class='layui-form-item' style='margin-top: 10px'>" +
|
||||
" <textarea name='content' autofocus='true' " +
|
||||
"style='height: 300px; width: 100%; line-height: 20px; padding: 8px; -webkit-box-sizing: border-box; border: 1px solid #ccc; box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset; color: #333'></textarea>" +
|
||||
" </div>" +
|
||||
" <div style='margin-top: 20px; text-align: right'>" +
|
||||
" <button type='button' name='yes' class='layui-btn'><i class='iconfont'></i>  确 定 </button>" +
|
||||
" <button style='margin-left: 20px;' type='button' class='layui-btn layui-btn-primary' name='cancel'> 取消 </button>" +
|
||||
" </div>" +
|
||||
"</div>",
|
||||
success: function (layero, index) {
|
||||
_form.render("select");
|
||||
layero.find("button[name='yes']").click(function () {
|
||||
var _lang = layero.find("select[name='lang']");
|
||||
var _content = layero.find("textarea[name='content']");
|
||||
if (_lang.val() == "") {
|
||||
_lang.addClass("layui-form-danger").val("").focus();
|
||||
_layer.msg("请选择语言", {shift: 6, time: 800});
|
||||
}
|
||||
else if (_content.val() == "") {
|
||||
_content.addClass("layui-form-danger").val("").focus();
|
||||
_layer.msg("请输入代码", {shift: 6, time: 800});
|
||||
} else {
|
||||
callback({
|
||||
lang: _lang.val(), content: _content.val()
|
||||
});
|
||||
_layer.close(index);
|
||||
}
|
||||
});
|
||||
layero.find("button[name='cancel']").click(function () {
|
||||
_layer.close(index);
|
||||
});
|
||||
$(document).on('keydown', function (e) {
|
||||
if (e.keyCode == 27)
|
||||
_layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var image = function (obj, image_upload_action, callback) {
|
||||
return _layer.open({
|
||||
title: "插入图片：", type: 1, area: ["470px", "265px"], btn: null, shadeClose: true, shade: 0.2,
|
||||
content: "<div style='margin-top: 20px; margin-left: 16px'>" +
|
||||
" <label class='layui-form-label' style='width: 100px !important; margin-left: -27px;'>图片描述</label>" +
|
||||
" <div class='layui-input-block' style='margin-left: 90px !important'>" +
|
||||
" <input type='text' name='text' class='layui-input' value='' autocomplete='off' style='width: 250px' />" +
|
||||
" </div>" +
|
||||
" <label class='layui-form-label required' style='width: 100px !important; margin-left: -27px; margin-top: 20px'>图片地址</label>" +
|
||||
" <div class='layui-input-block' style='margin-left: 90px !important; margin-top: 20px'>" +
|
||||
" <input type='url' name='url' autofocus class='layui-input' autocomplete='off' style='width: 250px; display: inline-block' />" +
|
||||
"<button style='margin-left: 5px; display: inline-block; color: #1AA094; border: 1px solid #1AA094; transform: translateY(-2px); font-size: 17px; padding: 0 10px' type='button' class='layui-btn layui-btn-primary' name='upload'>" +
|
||||
" <i class='iconfont' style='position: relative; top: -3px; font-size: 18px;'></i> 上传</button>" +
|
||||
" <form method='post' id='upload_image' enctype='multipart/form-data' action='" + image_upload_action + "'>" +
|
||||
" <input type='file' name='file' accept='.jpg,.gif,.png,.bmp' style='display: none' /></form>" +
|
||||
" </div>" +
|
||||
" <div style='margin-top: 35px; text-align: right; padding-right: 30px;'>" +
|
||||
" <button type='button' name='yes' class='layui-btn'><i class='iconfont'></i>  确 定 </button>" +
|
||||
" <button style='margin-left: 20px;' type='button' class='layui-btn layui-btn-primary' name='cancel'> 取消 </button>" +
|
||||
" </div>" +
|
||||
"</div>",
|
||||
success: function (layero, index) {
|
||||
layero.find("input[name='url']").focus();
|
||||
layero.find("button[name='upload']").click(function () {
|
||||
if (image_upload_action == null || image_upload_action == '') {
|
||||
_layer.msg("没有定义上传图片action地址！", {shift: 6, time: 1000});
|
||||
} else {
|
||||
layero.find("input[name='file']").click();
|
||||
}
|
||||
});
|
||||
layero.find("input[name='file']").change(function () {
|
||||
if ($(this).val() == '') return;
|
||||
var load = _layer.load(8);
|
||||
layero.find("#upload_image").ajaxSubmit({
|
||||
success: function (data) {
|
||||
_layer.close(load);
|
||||
if (data.status == 0) {
|
||||
layero.find("input[name='url']").val('');
|
||||
_layer.alert(data.msg, {icon: 5, shade: 0.6});
|
||||
} else {
|
||||
layero.find("input[name='url']").val(data.src);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
layero.find("button[name='yes']").click(function () {
|
||||
var url = layero.find("input[name='url']");
|
||||
if (url.val() == "" || url.val().match(/^((https|http)?:\/\/)?[^\s]+\.(png|jpg|jpeg|gif|svg|bmp)/gi ) == null) {
|
||||
url.addClass("layui-form-danger").val("").focus();
|
||||
_layer.msg("请输入正确的图片地址", {shift: 6, time: 800});
|
||||
} else {
|
||||
callback({
|
||||
alt: layero.find("input[name='text']").val(),
|
||||
src: url.val()
|
||||
});
|
||||
_layer.close(index);
|
||||
}
|
||||
});
|
||||
layero.find("button[name='cancel']").click(function () {
|
||||
_layer.close(index);
|
||||
});
|
||||
$(document).on('keydown', function (e) {
|
||||
if (e.keyCode == 27)
|
||||
_layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 链接
|
||||
var link = function (obj, text, callback) {
|
||||
return _layer.open({
|
||||
title: "插入链接：", type: 1, area: ["400px", "260px"], btn: null, shadeClose: true, shade: 0.2,
|
||||
content: "<div style='margin-top: 20px; margin-left: 16px'>" +
|
||||
" <label class='layui-form-label' style='width: 100px !important; margin-left: -27px;'>链接文字</label>" +
|
||||
" <div class='layui-input-block' style='margin-left: 90px !important; width: 256px'>" +
|
||||
" <input type='text' name='text' class='layui-input' value='" + text + "' autocomplete='off' />" +
|
||||
" </div>" +
|
||||
" <label class='layui-form-label required' style='width: 100px !important; margin-left: -27px; margin-top: 20px'>链接</label>" +
|
||||
" <div class='layui-input-block' style='margin-left: 90px !important; width: 256px; margin-top: 20px'>" +
|
||||
" <input type='url' name='url' autofocus class='layui-input' autocomplete='off' />" +
|
||||
" </div>" +
|
||||
" <div style='margin-top: 35px; text-align: right; padding-right: 38px;'>" +
|
||||
" <button type='button' name='yes' class='layui-btn'><i class='iconfont'></i>  确 定 </button>" +
|
||||
" <button style='margin-left: 20px;' type='button' class='layui-btn layui-btn-primary' name='cancel'> 取消 </button>" +
|
||||
" </div>" +
|
||||
"</div>",
|
||||
success: function (layero, index) {
|
||||
layero.find("input[name='url']").focus();
|
||||
layero.find("button[name='yes']").click(function () {
|
||||
var url = layero.find("input[name='url']");
|
||||
if (url.val() == "" || url.val().match(/^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/g) == null) {
|
||||
url.addClass("layui-form-danger").val("").focus();
|
||||
_layer.msg("请输入正确的链接", {shift: 6, time: 800});
|
||||
} else {
|
||||
callback({
|
||||
title: layero.find("input[name='text']").val(),
|
||||
url: url.val()
|
||||
});
|
||||
_layer.close(index);
|
||||
}
|
||||
});
|
||||
layero.find("button[name='cancel']").click(function () {
|
||||
_layer.close(index);
|
||||
});
|
||||
$(document).on('keydown', function (e) {
|
||||
if (e.keyCode == 27)
|
||||
_layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表情弹窗
|
||||
var face = function (obj, callback) {
|
||||
//表情库
|
||||
var faces = function () {
|
||||
var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]",
|
||||
"[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]",
|
||||
"[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]",
|
||||
"[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]",
|
||||
"[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]",
|
||||
"[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]",
|
||||
"[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {};
|
||||
layui.each(alt, function (index, item) {
|
||||
arr[item] = layui.cache.dir + 'images/face/' + index + '.gif';
|
||||
});
|
||||
return arr;
|
||||
}();
|
||||
face.hide = face.hide || function (e) {
|
||||
if ($(e.target).attr('event') !== 'face') {
|
||||
_layer.close(face.index);
|
||||
}
|
||||
};
|
||||
return face.index = _layer.tips((function () {
|
||||
var content = [];
|
||||
layui.each(faces, function (key, item) {
|
||||
content.push('<li title="' + key + '"><img src="' + item + '" alt="' + key + '"></li>');
|
||||
});
|
||||
return '<ul class="layui-clear">' + content.join('') + '</ul>';
|
||||
})(), obj, {
|
||||
tips: 3, time: 0, skin: 'layui-box layui-util-face', maxWidth: 500,
|
||||
success: function (layero, index) {
|
||||
layero.css({
|
||||
marginTop: -4, marginLeft: -10
|
||||
}).find('.layui-clear > li').on('click', function () {
|
||||
callback && callback({
|
||||
src: faces[this.title], alt: this.title
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
$(document).off('click', face.hide).on('click', face.hide);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
exports('markdown', new markdown());
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// layui.define('layer', function(exports){
|
||||
// "use strict";
|
||||
//
|
||||
// var $ = layui.jquery,
|
||||
// layer = layui.layer,
|
||||
// MOD_NAME = 'markdown', THIS = 'layui-this', SHOW = 'layui-show', ABLED = 'layui-disabled',
|
||||
// MARKDOWN = function () {
|
||||
// var that = this;
|
||||
// that.index = 0;
|
||||
//
|
||||
// //全局配置
|
||||
// that.config = {
|
||||
// //默认工具bar
|
||||
// tool: [
|
||||
// 'face', 'image', 'link', 'code', 'preview'
|
||||
// ],
|
||||
// hideTool: [],
|
||||
// height: 280 //默认高
|
||||
// };
|
||||
// };
|
||||
//
|
||||
// //全局设置
|
||||
// MARKDOWN.prototype.set = function(options){
|
||||
// var that = this;
|
||||
// $.extend(true, that.config, options);
|
||||
// return that;
|
||||
// };
|
||||
//
|
||||
// //事件监听
|
||||
// MARKDOWN.prototype.on = function(events, callback){
|
||||
// return layui.onevent(MOD_NAME, events, callback);
|
||||
// };
|
||||
//
|
||||
// //建立编辑器
|
||||
// MARKDOWN.prototype.build = function (id, settings) {
|
||||
// settings = settings || {};
|
||||
//
|
||||
// var that = this,
|
||||
// config = that.config,
|
||||
// ELEM = 'layui-markdown',
|
||||
// textArea = $('#' + id),
|
||||
// name = 'LAY_markdown_' + (++that.index),
|
||||
// haveBuild = textArea.next('.' + ELEM),
|
||||
// set = $.extend({}, config, settings),
|
||||
// tool = function () {
|
||||
// var node = [], hideTools = {};
|
||||
// layui.each(set.hideTool, function (_, item) {
|
||||
// hideTools[item] = true;
|
||||
// });
|
||||
// layui.each(set.tool, function (_, item) {
|
||||
// if (tools[item] && !hideTools[item]) {
|
||||
// node.push(tools[item]);
|
||||
// }
|
||||
// });
|
||||
// return node.join('');
|
||||
// }()
|
||||
//
|
||||
//
|
||||
// , editor = $(['<div class="' + ELEM + '">'
|
||||
// , '<div class="layui-unselect layui-markdown-tool">' + tool + '</div>'
|
||||
// , '<div class="layui-markdown-iframe">'
|
||||
// , '<iframe id="' + name + '" name="' + name + '" textarea="' + id + '" frameborder="0"></iframe>'
|
||||
// , '</div>'
|
||||
// , '</div>'].join(''))
|
||||
//
|
||||
// //编辑器不兼容ie8以下
|
||||
// if (device.ie && device.ie < 8) {
|
||||
// return textArea.removeClass('layui-hide').addClass(SHOW);
|
||||
// }
|
||||
//
|
||||
// haveBuild[0] && (haveBuild.remove());
|
||||
//
|
||||
// setIframe.call(that, editor, textArea[0], set)
|
||||
// textArea.addClass('layui-hide').after(editor);
|
||||
//
|
||||
// return that.index;
|
||||
// };
|
||||
//
|
||||
// //获得编辑器中内容
|
||||
// MARKDOWN.prototype.getContent = function(index){
|
||||
// var iframeWin = getWin(index);
|
||||
// if(!iframeWin[0]) return;
|
||||
// return toLower(iframeWin[0].document.body.innerHTML);
|
||||
// };
|
||||
//
|
||||
// //获得编辑器中纯文本内容
|
||||
// MARKDOWN.prototype.getText = function(index){
|
||||
// var iframeWin = getWin(index);
|
||||
// if(!iframeWin[0]) return;
|
||||
// return $(iframeWin[0].document.body).text();
|
||||
// };
|
||||
//
|
||||
// //将编辑器内容同步到textarea（一般用于异步提交时）
|
||||
// MARKDOWN.prototype.sync = function(index){
|
||||
// var iframeWin = getWin(index);
|
||||
// if(!iframeWin[0]) return;
|
||||
// var textarea = $('#'+iframeWin[1].attr('textarea'));
|
||||
// textarea.val(toLower(iframeWin[0].document.body.innerHTML));
|
||||
// };
|
||||
//
|
||||
// //获取编辑器选中内容
|
||||
// MARKDOWN.prototype.getSelection = function(index){
|
||||
// var iframeWin = getWin(index);
|
||||
// if(!iframeWin[0]) return;
|
||||
// var range = Range(iframeWin[0].document);
|
||||
// return document.selection ? range.text : range.toString();
|
||||
// };
|
||||
//
|
||||
// //iframe初始化
|
||||
// var setIframe = function(editor, textArea, set){
|
||||
// var that = this, iframe = editor.find('iframe');
|
||||
//
|
||||
// iframe.css({
|
||||
// height: set.height
|
||||
// }).on('load', function(){
|
||||
// var conts = iframe.contents()
|
||||
// ,iframeWin = iframe.prop('contentWindow')
|
||||
// ,head = conts.find('head')
|
||||
// ,style = $(['<style>'
|
||||
// ,'*{margin: 0; padding: 0;}'
|
||||
// ,'body{padding: 10px; line-height: 20px; overflow-x: hidden; word-wrap: break-word; font: 14px Helvetica Neue,Helvetica,PingFang SC,Microsoft YaHei,Tahoma,Arial,sans-serif; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}'
|
||||
// ,'a{color:#01AAED; text-decoration:none;}a:hover{color:#c00}'
|
||||
// ,'p{margin-bottom: 10px;}'
|
||||
// ,'img{display: inline-block; border: none; vertical-align: middle;}'
|
||||
// ,'pre{margin: 10px 0; padding: 10px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}'
|
||||
// ,'</style>'].join(''))
|
||||
// ,body = conts.find('body');
|
||||
//
|
||||
// head.append(style);
|
||||
// body.attr('contenteditable', 'true').css({
|
||||
// 'min-height': set.height
|
||||
// }).html(textArea.value||'');
|
||||
//
|
||||
// hotkey.apply(that, [iframeWin, iframe, textArea, set]); //快捷键处理
|
||||
// toolActive.call(that, iframeWin, editor, set); //触发工具
|
||||
//
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// //获得iframe窗口对象
|
||||
// ,getWin = function(index){
|
||||
// var iframe = $('#LAY_markdown_'+ index)
|
||||
// ,iframeWin = iframe.prop('contentWindow');
|
||||
// return [iframeWin, iframe];
|
||||
// }
|
||||
//
|
||||
// //IE8下将标签处理成小写
|
||||
// ,toLower = function(html){
|
||||
// if(device.ie == 8){
|
||||
// html = html.replace(/<.+>/g, function(str){
|
||||
// return str.toLowerCase();
|
||||
// });
|
||||
// }
|
||||
// return html;
|
||||
// }
|
||||
//
|
||||
// //快捷键处理
|
||||
// ,hotkey = function(iframeWin, iframe, textArea, set){
|
||||
// var iframeDOM = iframeWin.document, body = $(iframeDOM.body);
|
||||
// body.on('keydown', function(e){
|
||||
// var keycode = e.keyCode;
|
||||
// //处理回车
|
||||
// if(keycode === 13){
|
||||
// var range = Range(iframeDOM);
|
||||
// var container = getContainer(range)
|
||||
// ,parentNode = container.parentNode;
|
||||
//
|
||||
// if(parentNode.tagName.toLowerCase() === 'pre'){
|
||||
// if(e.shiftKey) return
|
||||
// layer.msg('请暂时用shift+enter');
|
||||
// return false;
|
||||
// }
|
||||
// iframeDOM.execCommand('formatBlock', false, '<p>');
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// //给textarea同步内容
|
||||
// $(textArea).parents('form').on('submit', function(){
|
||||
// var html = body.html();
|
||||
// //IE8下将标签处理成小写
|
||||
// if(device.ie == 8){
|
||||
// html = html.replace(/<.+>/g, function(str){
|
||||
// return str.toLowerCase();
|
||||
// });
|
||||
// }
|
||||
// textArea.value = html;
|
||||
// });
|
||||
//
|
||||
// //处理粘贴
|
||||
// body.on('paste', function(e){
|
||||
// iframeDOM.execCommand('formatBlock', false, '<p>');
|
||||
// setTimeout(function(){
|
||||
// filter.call(iframeWin, body);
|
||||
// textArea.value = body.html();
|
||||
// }, 100);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// //标签过滤
|
||||
// ,filter = function(body){
|
||||
// var iframeWin = this
|
||||
// ,iframeDOM = iframeWin.document;
|
||||
//
|
||||
// //清除影响版面的css属性
|
||||
// body.find('*[style]').each(function(){
|
||||
// var textAlign = this.style.textAlign;
|
||||
// this.removeAttribute('style');
|
||||
// $(this).css({
|
||||
// 'text-align': textAlign || ''
|
||||
// })
|
||||
// });
|
||||
//
|
||||
// //修饰表格
|
||||
// body.find('table').addClass('layui-table');
|
||||
//
|
||||
// //移除不安全的标签
|
||||
// body.find('script,link').remove();
|
||||
// }
|
||||
//
|
||||
// //Range对象兼容性处理
|
||||
// ,Range = function(iframeDOM){
|
||||
// return iframeDOM.selection
|
||||
// ? iframeDOM.selection.createRange()
|
||||
// : iframeDOM.getSelection().getRangeAt(0);
|
||||
// }
|
||||
//
|
||||
// //当前Range对象的endContainer兼容性处理
|
||||
// ,getContainer = function(range){
|
||||
// return range.endContainer || range.parentElement().childNodes[0]
|
||||
// }
|
||||
//
|
||||
// //在选区插入内联元素
|
||||
// ,insertInline = function(tagName, attr, range){
|
||||
// var iframeDOM = this.document
|
||||
// ,elem = document.createElement(tagName)
|
||||
// for(var key in attr){
|
||||
// elem.setAttribute(key, attr[key]);
|
||||
// }
|
||||
// elem.removeAttribute('text');
|
||||
//
|
||||
// if(iframeDOM.selection){ //IE
|
||||
// var text = range.text || attr.text;
|
||||
// if(tagName === 'a' && !text) return;
|
||||
// if(text){
|
||||
// elem.innerHTML = text;
|
||||
// }
|
||||
// range.pasteHTML($(elem).prop('outerHTML'));
|
||||
// range.select();
|
||||
// } else { //非IE
|
||||
// var text = range.toString() || attr.text;
|
||||
// if(tagName === 'a' && !text) return;
|
||||
// if(text){
|
||||
// elem.innerHTML = text;
|
||||
// }
|
||||
// range.deleteContents();
|
||||
// range.insertNode(elem);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// //工具选中
|
||||
// ,toolCheck = function(tools, othis){
|
||||
// var iframeDOM = this.document
|
||||
// ,CHECK = 'layedit-tool-active'
|
||||
// ,container = getContainer(Range(iframeDOM))
|
||||
// ,item = function(type){
|
||||
// return tools.find('.layedit-tool-'+type)
|
||||
// }
|
||||
//
|
||||
// if(othis){
|
||||
// othis[othis.hasClass(CHECK) ? 'removeClass' : 'addClass'](CHECK);
|
||||
// }
|
||||
//
|
||||
// tools.find('>i').removeClass(CHECK);
|
||||
// item('unlink').addClass(ABLED);
|
||||
//
|
||||
// $(container).parents().each(function(){
|
||||
// var tagName = this.tagName.toLowerCase()
|
||||
// ,textAlign = this.style.textAlign;
|
||||
//
|
||||
// //文字
|
||||
// if(tagName === 'b' || tagName === 'strong'){
|
||||
// item('b').addClass(CHECK)
|
||||
// }
|
||||
// if(tagName === 'i' || tagName === 'em'){
|
||||
// item('i').addClass(CHECK)
|
||||
// }
|
||||
// if(tagName === 'u'){
|
||||
// item('u').addClass(CHECK)
|
||||
// }
|
||||
// if(tagName === 'strike'){
|
||||
// item('d').addClass(CHECK)
|
||||
// }
|
||||
//
|
||||
// //对齐
|
||||
// if(tagName === 'p'){
|
||||
// if(textAlign === 'center'){
|
||||
// item('center').addClass(CHECK);
|
||||
// } else if(textAlign === 'right'){
|
||||
// item('right').addClass(CHECK);
|
||||
// } else {
|
||||
// item('left').addClass(CHECK);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// //超链接
|
||||
// if(tagName === 'a'){
|
||||
// item('link').addClass(CHECK);
|
||||
// item('unlink').removeClass(ABLED);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// //触发工具
|
||||
// ,toolActive = function(iframeWin, editor, set){
|
||||
// var iframeDOM = iframeWin.document
|
||||
// ,body = $(iframeDOM.body)
|
||||
// ,toolEvent = {
|
||||
// //超链接
|
||||
// link: function(range){
|
||||
// var container = getContainer(range)
|
||||
// ,parentNode = $(container).parent();
|
||||
//
|
||||
// link.call(body, {
|
||||
// href: parentNode.attr('href')
|
||||
// ,target: parentNode.attr('target')
|
||||
// }, function(field){
|
||||
// var parent = parentNode[0];
|
||||
// if(parent.tagName === 'A'){
|
||||
// parent.href = field.url;
|
||||
// } else {
|
||||
// insertInline.call(iframeWin, 'a', {
|
||||
// target: field.target
|
||||
// ,href: field.url
|
||||
// ,text: field.url
|
||||
// }, range);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// //清除超链接
|
||||
// ,unlink: function(range){
|
||||
// iframeDOM.execCommand('unlink');
|
||||
// }
|
||||
// //表情
|
||||
// ,face: function(range){
|
||||
// face.call(this, function(img){
|
||||
// insertInline.call(iframeWin, 'img', {
|
||||
// src: img.src
|
||||
// ,alt: img.alt
|
||||
// }, range);
|
||||
// });
|
||||
// }
|
||||
// //图片
|
||||
// ,image: function(range){
|
||||
// var that = this;
|
||||
// layui.use('upload', function(upload){
|
||||
// var uploadImage = set.uploadImage || {};
|
||||
// upload({
|
||||
// url: uploadImage.url
|
||||
// ,method: uploadImage.type
|
||||
// ,elem: $(that).find('input')[0]
|
||||
// ,unwrap: true
|
||||
// ,success: function(res){
|
||||
// if(res.code == 0){
|
||||
// res.data = res.data || {};
|
||||
// insertInline.call(iframeWin, 'img', {
|
||||
// src: res.data.src
|
||||
// ,alt: res.data.title
|
||||
// }, range);
|
||||
// } else {
|
||||
// layer.msg(res.msg||'上传失败');
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
// //插入代码
|
||||
// ,code: function(range){
|
||||
// code.call(body, function(pre){
|
||||
// insertInline.call(iframeWin, 'pre', {
|
||||
// text: pre.code
|
||||
// ,'lay-lang': pre.lang
|
||||
// }, range);
|
||||
// });
|
||||
// }
|
||||
// //帮助
|
||||
// ,help: function(){
|
||||
// layer.open({
|
||||
// type: 2
|
||||
// ,title: '帮助'
|
||||
// ,area: ['600px', '380px']
|
||||
// ,shadeClose: true
|
||||
// ,shade: 0.1
|
||||
// ,skin: 'layui-layer-msg'
|
||||
// ,content: ['http://www.layui.com/about/layedit/help.html', 'no']
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// ,tools = editor.find('.layui-markdown-tool')
|
||||
//
|
||||
// ,click = function(){
|
||||
// var othis = $(this)
|
||||
// ,events = othis.attr('layedit-event')
|
||||
// ,command = othis.attr('lay-command');
|
||||
//
|
||||
// if(othis.hasClass(ABLED)) return;
|
||||
//
|
||||
// body.focus();
|
||||
//
|
||||
// var range = Range(iframeDOM)
|
||||
// ,container = range.commonAncestorContainer
|
||||
//
|
||||
// if(command){
|
||||
// iframeDOM.execCommand(command);
|
||||
// if(/justifyLeft|justifyCenter|justifyRight/.test(command)){
|
||||
// iframeDOM.execCommand('formatBlock', false, '<p>');
|
||||
// }
|
||||
// setTimeout(function(){
|
||||
// body.focus();
|
||||
// }, 10);
|
||||
// } else {
|
||||
// toolEvent[events] && toolEvent[events].call(this, range);
|
||||
// }
|
||||
// toolCheck.call(iframeWin, tools, othis);
|
||||
// }
|
||||
//
|
||||
// ,isClick = /image/
|
||||
//
|
||||
// tools.find('>i').on('mousedown', function(){
|
||||
// var othis = $(this)
|
||||
// ,events = othis.attr('layedit-event');
|
||||
// if(isClick.test(events)) return;
|
||||
// click.call(this)
|
||||
// }).on('click', function(){
|
||||
// var othis = $(this)
|
||||
// ,events = othis.attr('layedit-event');
|
||||
// if(!isClick.test(events)) return;
|
||||
// click.call(this)
|
||||
// });
|
||||
//
|
||||
// //触发内容区域
|
||||
// body.on('click', function(){
|
||||
// toolCheck.call(iframeWin, tools);
|
||||
// layer.close(face.index);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// //超链接面板
|
||||
// ,link = function(options, callback){
|
||||
// var body = this, index = layer.open({
|
||||
// type: 1
|
||||
// ,id: 'LAY_markdown_link'
|
||||
// ,area: '350px'
|
||||
// ,shade: 0.05
|
||||
// ,shadeClose: true
|
||||
// ,moveType: 1
|
||||
// ,title: '超链接'
|
||||
// ,skin: 'layui-layer-msg'
|
||||
// ,content: ['<ul class="layui-form" style="margin: 15px;">'
|
||||
// ,'<li class="layui-form-item">'
|
||||
// ,'<label class="layui-form-label" style="width: 60px;">URL</label>'
|
||||
// ,'<div class="layui-input-block" style="margin-left: 90px">'
|
||||
// ,'<input name="url" lay-verify="url" value="'+ (options.href||'') +'" autofocus="true" autocomplete="off" class="layui-input">'
|
||||
// ,'</div>'
|
||||
// ,'</li>'
|
||||
// ,'<li class="layui-form-item">'
|
||||
// ,'<label class="layui-form-label" style="width: 60px;">打开方式</label>'
|
||||
// ,'<div class="layui-input-block" style="margin-left: 90px">'
|
||||
// ,'<input type="radio" name="target" value="_self" class="layui-input" title="当前窗口"'
|
||||
// + ((options.target==='_self' || !options.target) ? 'checked' : '') +'>'
|
||||
// ,'<input type="radio" name="target" value="_blank" class="layui-input" title="新窗口" '
|
||||
// + (options.target==='_blank' ? 'checked' : '') +'>'
|
||||
// ,'</div>'
|
||||
// ,'</li>'
|
||||
// ,'<li class="layui-form-item" style="text-align: center;">'
|
||||
// ,'<button type="button" lay-submit lay-filter="layedit-link-yes" class="layui-btn"> 确定 </button>'
|
||||
// ,'<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>'
|
||||
// ,'</li>'
|
||||
// ,'</ul>'].join('')
|
||||
// ,success: function(layero, index){
|
||||
// var eventFilter = 'submit(layedit-link-yes)';
|
||||
// form.render('radio');
|
||||
// layero.find('.layui-btn-primary').on('click', function(){
|
||||
// layer.close(index);
|
||||
// body.focus();
|
||||
// });
|
||||
// form.on(eventFilter, function(data){
|
||||
// layer.close(link.index);
|
||||
// callback && callback(data.field);
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// link.index = index;
|
||||
// }
|
||||
//
|
||||
// //表情面板
|
||||
// ,face = function(callback){
|
||||
// //表情库
|
||||
// var faces = function(){
|
||||
// var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {};
|
||||
// layui.each(alt, function(index, item){
|
||||
// arr[item] = layui.cache.dir + 'images/face/'+ index + '.gif';
|
||||
// });
|
||||
// return arr;
|
||||
// }();
|
||||
// face.hide = face.hide || function(e){
|
||||
// if($(e.target).attr('layedit-event') !== 'face'){
|
||||
// layer.close(face.index);
|
||||
// }
|
||||
// }
|
||||
// return face.index = layer.tips(function(){
|
||||
// var content = [];
|
||||
// layui.each(faces, function(key, item){
|
||||
// content.push('<li title="'+ key +'"><img src="'+ item +'" alt="'+ key +'"></li>');
|
||||
// });
|
||||
// return '<ul class="layui-clear">' + content.join('') + '</ul>';
|
||||
// }(), this, {
|
||||
// tips: 1
|
||||
// ,time: 0
|
||||
// ,skin: 'layui-box layui-util-face'
|
||||
// ,maxWidth: 500
|
||||
// ,success: function(layero, index){
|
||||
// layero.css({
|
||||
// marginTop: -4
|
||||
// ,marginLeft: -10
|
||||
// }).find('.layui-clear>li').on('click', function(){
|
||||
// callback && callback({
|
||||
// src: faces[this.title]
|
||||
// ,alt: this.title
|
||||
// });
|
||||
// layer.close(index);
|
||||
// });
|
||||
// $(document).off('click', face.hide).on('click', face.hide);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// //插入代码面板
|
||||
// ,code = function(callback){
|
||||
// var body = this, index = layer.open({
|
||||
// type: 1
|
||||
// ,id: 'LAY_markdown_code'
|
||||
// ,area: '550px'
|
||||
// ,shade: 0.05
|
||||
// ,shadeClose: true
|
||||
// ,moveType: 1
|
||||
// ,title: '插入代码'
|
||||
// ,skin: 'layui-layer-msg'
|
||||
// ,content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">'
|
||||
// ,'<li class="layui-form-item">'
|
||||
// ,'<label class="layui-form-label">请选择语言</label>'
|
||||
// ,'<div class="layui-input-block">'
|
||||
// ,'<select name="lang">'
|
||||
// ,'<option value="JavaScript">JavaScript</option>'
|
||||
// ,'<option value="HTML">HTML</option>'
|
||||
// ,'<option value="CSS">CSS</option>'
|
||||
// ,'<option value="Java">Java</option>'
|
||||
// ,'<option value="PHP">PHP</option>'
|
||||
// ,'<option value="C#">C#</option>'
|
||||
// ,'<option value="Python">Python</option>'
|
||||
// ,'<option value="Ruby">Ruby</option>'
|
||||
// ,'<option value="Go">Go</option>'
|
||||
// ,'</select>'
|
||||
// ,'</div>'
|
||||
// ,'</li>'
|
||||
// ,'<li class="layui-form-item layui-form-text">'
|
||||
// ,'<label class="layui-form-label">代码</label>'
|
||||
// ,'<div class="layui-input-block">'
|
||||
// ,'<textarea name="code" lay-verify="required" autofocus="true" class="layui-textarea" style="height: 200px;"></textarea>'
|
||||
// ,'</div>'
|
||||
// ,'</li>'
|
||||
// ,'<li class="layui-form-item" style="text-align: center;">'
|
||||
// ,'<button type="button" lay-submit lay-filter="layedit-code-yes" class="layui-btn"> 确定 </button>'
|
||||
// ,'<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>'
|
||||
// ,'</li>'
|
||||
// ,'</ul>'].join('')
|
||||
// ,success: function(layero, index){
|
||||
// var eventFilter = 'submit(layedit-code-yes)';
|
||||
// form.render('select');
|
||||
// layero.find('.layui-btn-primary').on('click', function(){
|
||||
// layer.close(index);
|
||||
// body.focus();
|
||||
// });
|
||||
// form.on(eventFilter, function(data){
|
||||
// layer.close(code.index);
|
||||
// callback && callback(data.field);
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// code.index = index;
|
||||
// }
|
||||
//
|
||||
// //全部工具
|
||||
// ,tools = {
|
||||
// face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>',
|
||||
//
|
||||
// html: '<i class="layui-icon layedit-tool-html" title="HTML源代码" lay-command="html" layedit-event="html""></i><span class="layedit-tool-mid"></span>'
|
||||
// ,strong: '<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b""></i>'
|
||||
// ,italic: '<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i""></i>'
|
||||
// ,underline: '<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u""></i>'
|
||||
// ,del: '<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d""></i>'
|
||||
//
|
||||
// ,'|': '<span class="layedit-tool-mid"></span>'
|
||||
//
|
||||
// ,left: '<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left""></i>'
|
||||
// ,center: '<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center""></i>'
|
||||
// ,right: '<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right""></i>'
|
||||
// ,link: '<i class="layui-icon layedit-tool-link" title="插入链接" layedit-event="link""></i>'
|
||||
// ,unlink: '<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除链接" lay-command="unlink" layedit-event="unlink""></i>'
|
||||
// // ,face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>'
|
||||
// ,image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>'
|
||||
// ,code: '<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code"></i>'
|
||||
//
|
||||
// ,help: '<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help"></i>'
|
||||
// }
|
||||
//
|
||||
// ,edit = new MARKDOWN();
|
||||
//
|
||||
// exports(MOD_NAME, edit);
|
||||
// });
|
||||
@ -0,0 +1,399 @@
|
||||
/**
|
||||
@Name：layui.markdown markdown编辑器
|
||||
@Author：zhangkx
|
||||
@License：LGPL
|
||||
*/
|
||||
layui.define(['layer', 'form'], function (exports) {
|
||||
var $ = layui.jquery,
|
||||
_form = layui.form(),
|
||||
_layer = layui.layer,
|
||||
markdown = function () {
|
||||
//全局配置
|
||||
this.config = {
|
||||
//默认工具bar
|
||||
tools: [
|
||||
'face', 'image', 'link', 'code', 'help', 'full_screen', 'subfield', 'preview'
|
||||
],
|
||||
height: 280 //默认高
|
||||
};
|
||||
};
|
||||
|
||||
// markdown 解析器
|
||||
var _parser = new HyperDown;
|
||||
|
||||
var tools = {
|
||||
face: '<span title="插入表情"><i class="iconfont" event="face"></i><span event="face" class="tool-tip">表情</span></span>',
|
||||
image: '<span event="image" title="插入图片"><i class="iconfont" event="image"></i><span class="tool-tip">图片</span></span>',
|
||||
link: '<span event="link" title="插入链接"><i class="iconfont" event="link"></i><span class="tool-tip">链接</span></span>',
|
||||
code: '<span event="code" title="插入代码" class="divide"><i class="iconfont" event="code"></i><span class="tool-tip">代码</span></span>',
|
||||
full_screen: '<span event="full_screen" title="全屏"><i class="iconfont" event="full_screen"></i><span class="tool-tip">全屏</span></span>',
|
||||
subfield: '<span event="subfield" title="分栏预览" class="hide"><i class="iconfont" event="subfield"></i><span class="tool-tip">分栏</span></span>',
|
||||
preview: '<span event="preview" title="全屏预览"><i class="iconfont" event="preview"></i><span class="tool-tip">预览</span></span>'
|
||||
};
|
||||
|
||||
// 建立编辑器
|
||||
markdown.prototype.build = function (id, settings) {
|
||||
var dom = $('#' + id);
|
||||
var _settings = $.extend({}, this.config, (settings || {}));
|
||||
var image_upload_action = _settings.image_upload_action; // 上传图片的action
|
||||
var _tools = (function () {
|
||||
var _nodes = [];
|
||||
$.each(_settings.tools, function (item) {
|
||||
if (tools[_settings.tools[item]])
|
||||
_nodes.push(tools[_settings.tools[item]]);
|
||||
});
|
||||
return _nodes.join('');
|
||||
})();
|
||||
|
||||
console.log(_settings.required)
|
||||
var _required = _settings.required ? ' required lay-verify="required" ' : '';
|
||||
var editor = $([
|
||||
'<div class="layui-markdown markdown-editor">',
|
||||
' <div class="tools">' + _tools + '<span type="help" style="float: right; color: #afafaf"><small>markdown</small></span></div>',
|
||||
' <textarea placeholder="请输入内容" class="layui-textarea" ' + _required + ' name="markdown_content" v-model="markdown_content" debounce="500" style="min-height: ' + _settings.height + 'px"></textarea>',
|
||||
'</div>'].join('')
|
||||
);
|
||||
|
||||
dom.empty().append(editor);
|
||||
|
||||
// 表情
|
||||
dom.find("i[event='face'], span[event='face']").click(function () {
|
||||
face($(this), function (img) {
|
||||
// insertTextarea(document.getElementsByName("markdown_content")[0], "@" + img.alt +"(" + img.src + ")")
|
||||
insertTextarea(document.getElementsByName("markdown_content")[0], "@" + img.alt);
|
||||
})
|
||||
});
|
||||
|
||||
// 图片
|
||||
dom.find("span[event='image']").click(function () {
|
||||
// _layer.msg("开发中...", {shift: 6, time: 1000});
|
||||
var textarea = document.getElementsByName("markdown_content")[0];
|
||||
image($(this), image_upload_action, function (image) {
|
||||
insertTextarea(textarea, "![" + image.alt + "](" + image.src + ")");
|
||||
});
|
||||
});
|
||||
|
||||
// 链接
|
||||
dom.find("span[event='link']").click(function () {
|
||||
var textarea = document.getElementsByName("markdown_content")[0];
|
||||
var text = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
|
||||
link($(this), text, function (link) {
|
||||
var text = "";
|
||||
if (link.title && link.url) {
|
||||
text = link.title ? "[" + link.title + "](" + link.url + ")" : link.url
|
||||
} else if (!link.title && link.url) {
|
||||
text = link.url;
|
||||
}
|
||||
insertTextarea(textarea, text);
|
||||
});
|
||||
});
|
||||
|
||||
// 插入代码
|
||||
dom.find("span[event='code']").click(function () {
|
||||
var textarea = document.getElementsByName("markdown_content")[0];
|
||||
code($(this), function (_code) {
|
||||
insertTextarea(textarea, "\n```lang-" + _code.lang + "\n" + _code.content + "\n" + "```" + "\n");
|
||||
});
|
||||
});
|
||||
|
||||
// 预览
|
||||
dom.find("span[event='preview']").click(function () {
|
||||
var textarea = document.getElementsByName("markdown_content")[0];
|
||||
_layer.open({
|
||||
title: "预览", type: 1, area: ["100%", "100%"], btn: null, shadeClose: true, shade: 0.2,
|
||||
content: "<div class='layui-markdown' style='width: 1000px; margin: 5px auto 20px; padding: 25px 20px; background: #FBFBFB;'>" +
|
||||
_parser.makeHtml(textarea.value) + "</div>",
|
||||
success: function (layero, index) {
|
||||
$(document).on('keydown', function (e) {
|
||||
if (e.keyCode == 27)
|
||||
_layer.close(index);
|
||||
});
|
||||
Prism.highlightAll();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 全屏写作
|
||||
var shade = null;
|
||||
var is_full_screen = false;
|
||||
var is_half_screen = false;
|
||||
dom.find("span[event='full_screen']").click(function () {
|
||||
if (!is_full_screen) {
|
||||
$(".layui-body").css("position", "static");
|
||||
dom.find(".layui-markdown").addClass('full-screen');
|
||||
dom.find(".layui-markdown .tools span[event='subfield']").removeClass("hide");
|
||||
} else {
|
||||
// $(".layui-header, .layui-side").show();
|
||||
$(".layui-body").css("position", 'absolute');
|
||||
dom.find(".layui-markdown").removeClass('full-screen');
|
||||
dom.find(".layui-markdown .tools span[event='subfield']").addClass("hide");
|
||||
dom.find(".layui-markdown").removeClass('half');
|
||||
$(".article-preview").removeClass("full");
|
||||
is_half_screen = false;
|
||||
if (shade)
|
||||
shade.remove();
|
||||
}
|
||||
is_full_screen = !is_full_screen;
|
||||
});
|
||||
|
||||
// 分栏
|
||||
dom.find("span[event='subfield']").click(function () {
|
||||
if (!is_full_screen) {
|
||||
return false;
|
||||
}
|
||||
if (!is_half_screen) {
|
||||
shade = $('<div class="layui-layer-shade" style="z-index:1110; background:#fff"></div>')
|
||||
$("body").append(shade);
|
||||
dom.find(".layui-markdown").addClass('half');
|
||||
$(".article-preview").addClass("full");
|
||||
} else {
|
||||
dom.find(".layui-markdown").removeClass('half');
|
||||
$(".article-preview").removeClass("full");
|
||||
if (shade)
|
||||
shade.remove();
|
||||
}
|
||||
is_half_screen = !is_half_screen;
|
||||
});
|
||||
};
|
||||
|
||||
// 修改textarea文字
|
||||
var insertTextarea = function (textarea, str) {
|
||||
if (textarea) {
|
||||
var _value = textarea.value;
|
||||
textarea.value = _value.substring(0, textarea.selectionStart) + str + _value.substring(textarea.selectionEnd);
|
||||
}
|
||||
};
|
||||
|
||||
// code
|
||||
var code = function(obj, callback) {
|
||||
var _width = ($(window).width() < 800) ? "98%" : "800px";
|
||||
return _layer.open({
|
||||
title: "插入代码：", type: 1, area: [_width, "500px"], btn: null, shadeClose: true, shade: 0.2,
|
||||
content: "<div class='layui-form' style='padding: 20px;'>" +
|
||||
" <div class='layui-form-item' style='margin-left: -20px'>" +
|
||||
" <div class='layui-input-inline'>" +
|
||||
" <select name='lang'>" +
|
||||
" <option value=''>请选择语言</option>" +
|
||||
" <option value='javascript'>Javascript</option>" +
|
||||
" <option value='html'>HTML</option>" +
|
||||
" <option value='css'>CSS</option>" +
|
||||
" <option value='php'>PHP</option>" +
|
||||
" <option value='java'>Java</option>" +
|
||||
" <option value='ruby'>Ruby</option>" +
|
||||
" <option value='python'>Python</option>" +
|
||||
" <option value='csharp'>C#</option>" +
|
||||
" <option value='aspnet'>ASP.NET</option>" +
|
||||
" <option value='json'>JSON</option>" +
|
||||
" <option value='sql'>SQL</option>" +
|
||||
" <option value='markdown'>Markdown</option>" +
|
||||
" </select>" +
|
||||
" </div>" +
|
||||
" </div>" +
|
||||
" <div class='layui-form-item' style='margin-top: 10px'>" +
|
||||
" <textarea name='content' autofocus='true' " +
|
||||
"style='height: 300px; width: 100%; line-height: 20px; padding: 8px; -webkit-box-sizing: border-box; border: 1px solid #ccc; box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset; color: #333'></textarea>" +
|
||||
" </div>" +
|
||||
" <div style='margin-top: 20px; text-align: right'>" +
|
||||
" <button type='button' name='yes' class='layui-btn'><i class='iconfont'></i>  确 定 </button>" +
|
||||
" <button style='margin-left: 20px;' type='button' class='layui-btn layui-btn-primary' name='cancel'> 取消 </button>" +
|
||||
" </div>" +
|
||||
"</div>",
|
||||
success: function (layero, index) {
|
||||
_form.render("select");
|
||||
layero.find("button[name='yes']").click(function () {
|
||||
var _lang = layero.find("select[name='lang']");
|
||||
var _content = layero.find("textarea[name='content']");
|
||||
if (_lang.val() == "") {
|
||||
_lang.addClass("layui-form-danger").val("").focus();
|
||||
_layer.msg("请选择语言", {shift: 6, time: 800});
|
||||
}
|
||||
else if (_content.val() == "") {
|
||||
_content.addClass("layui-form-danger").val("").focus();
|
||||
_layer.msg("请输入代码", {shift: 6, time: 800});
|
||||
} else {
|
||||
callback({
|
||||
lang: _lang.val(), content: _content.val()
|
||||
});
|
||||
_layer.close(index);
|
||||
}
|
||||
});
|
||||
layero.find("button[name='cancel']").click(function () {
|
||||
_layer.close(index);
|
||||
});
|
||||
$(document).on('keydown', function (e) {
|
||||
if (e.keyCode == 27)
|
||||
_layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var image = function (obj, image_upload_action, callback) {
|
||||
var _width = ($(window).width() < 470) ? "98%" : "470px";
|
||||
var _height = ($(window).width() < 420) ? "300px" : "265px";
|
||||
var _idx = _layer.open({
|
||||
title: "插入图片：", type: 1, area: [_width, _height], btn: null, shadeClose: true, shade: 0.2,
|
||||
content: "<div style='margin-top: 20px; margin-left: 16px'>" +
|
||||
" <label class='layui-form-label' style='width: 100px !important; margin-left: -27px;'>图片描述</label>" +
|
||||
" <div class='layui-input-block' style='margin-left: 90px !important'>" +
|
||||
" <input type='text' name='text' class='layui-input' value='' autocomplete='off' style='width: 250px' />" +
|
||||
" </div>" +
|
||||
" <label class='layui-form-label required' style='width: 100px !important; margin-left: -27px; margin-top: 20px'>图片地址</label>" +
|
||||
" <div class='layui-input-block' style='margin-left: 90px !important; margin-top: 20px'>" +
|
||||
" <input type='url' name='url' autofocus class='layui-input' autocomplete='off' style='width: 250px; display: inline-block' />" +
|
||||
"<button class='layui-btn layui-btn-primary btn-upload' type='button' name='upload'>" +
|
||||
" <i class='iconfont' style='position: relative; top: -3px; font-size: 18px;'></i> <span class='tool-tip'>上传</span></button>" +
|
||||
" <form method='post' id='upload_image' enctype='multipart/form-data' action='" + image_upload_action + "'>" +
|
||||
" <input type='file' name='file' accept='.jpg,.gif,.png,.bmp' style='display: none' /></form>" +
|
||||
" </div>" +
|
||||
" <div style='margin-top: 35px; text-align: right; padding-right: 30px;'>" +
|
||||
" <button type='button' name='yes' class='layui-btn'><i class='iconfont'></i>  确 定 </button>" +
|
||||
" <button style='margin-left: 20px;' type='button' class='layui-btn layui-btn-primary' name='cancel'> 取消 </button>" +
|
||||
" </div>" +
|
||||
"</div>",
|
||||
success: function (layero, index) {
|
||||
layero.find("input[name='url']").focus();
|
||||
layero.find("button[name='upload']").click(function () {
|
||||
if (image_upload_action == null || image_upload_action == '') {
|
||||
_layer.msg("没有定义上传图片action地址！", {shift: 6, time: 1000});
|
||||
} else {
|
||||
layero.find("input[name='file']").click();
|
||||
}
|
||||
});
|
||||
layero.find("input[name='file']").change(function () {
|
||||
if ($(this).val() == '') return;
|
||||
var load = _layer.load(8);
|
||||
layero.find("#upload_image").ajaxSubmit({
|
||||
success: function (data) {
|
||||
_layer.close(load);
|
||||
if (data.status == 0) {
|
||||
layero.find("input[name='url']").val('');
|
||||
_layer.alert(data.msg, {icon: 5, shade: 0.6});
|
||||
} else {
|
||||
layero.find("input[name='url']").val(data.src);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
layero.find("button[name='yes']").click(function () {
|
||||
var url = layero.find("input[name='url']");
|
||||
if (url.val() == "" || url.val().match(/^((https|http)?:\/\/)?[^\s]+\.(png|jpg|jpeg|gif|svg|bmp)/gi ) == null) {
|
||||
url.addClass("layui-form-danger").val("").focus();
|
||||
_layer.msg("请输入正确的图片地址", {shift: 6, time: 800});
|
||||
} else {
|
||||
callback({
|
||||
alt: layero.find("input[name='text']").val(),
|
||||
src: url.val()
|
||||
});
|
||||
_layer.close(index);
|
||||
}
|
||||
});
|
||||
layero.find("button[name='cancel']").click(function () {
|
||||
_layer.close(index);
|
||||
});
|
||||
$(document).on('keydown', function (e) {
|
||||
if (e.keyCode == 27)
|
||||
_layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
// _layer.iframeAuto(_idx);
|
||||
return _idx;
|
||||
};
|
||||
|
||||
// 链接
|
||||
var link = function (obj, text, callback) {
|
||||
var _width = ($(window).width() < 400) ? "98%" : "400px";
|
||||
return _layer.open({
|
||||
title: "插入链接：", type: 1, area: [_width, "260px"], btn: null, shadeClose: true, shade: 0.2,
|
||||
content: "<div style='margin-top: 20px; margin-left: 16px'>" +
|
||||
" <label class='layui-form-label' style='width: 100px !important; margin-left: -27px;'>链接文字</label>" +
|
||||
" <div class='layui-input-block' style='margin-left: 90px !important; width: 256px'>" +
|
||||
" <input type='text' name='text' class='layui-input' value='" + text + "' autocomplete='off' />" +
|
||||
" </div>" +
|
||||
" <label class='layui-form-label required' style='width: 100px !important; margin-left: -27px; margin-top: 20px'>链接</label>" +
|
||||
" <div class='layui-input-block' style='margin-left: 90px !important; width: 256px; margin-top: 20px'>" +
|
||||
" <input type='url' name='url' autofocus class='layui-input' autocomplete='off' />" +
|
||||
" </div>" +
|
||||
" <div style='margin-top: 35px; text-align: right; padding-right: 38px;'>" +
|
||||
" <button type='button' name='yes' class='layui-btn'><i class='iconfont'></i>  确 定 </button>" +
|
||||
" <button style='margin-left: 20px;' type='button' class='layui-btn layui-btn-primary' name='cancel'> 取消 </button>" +
|
||||
" </div>" +
|
||||
"</div>",
|
||||
success: function (layero, index) {
|
||||
layero.find("input[name='url']").focus();
|
||||
layero.find("button[name='yes']").click(function () {
|
||||
var url = layero.find("input[name='url']");
|
||||
if (url.val() == "" || url.val().match(/^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/g) == null) {
|
||||
url.addClass("layui-form-danger").val("").focus();
|
||||
_layer.msg("请输入正确的链接", {shift: 6, time: 800});
|
||||
} else {
|
||||
callback({
|
||||
title: layero.find("input[name='text']").val(),
|
||||
url: url.val()
|
||||
});
|
||||
_layer.close(index);
|
||||
}
|
||||
});
|
||||
layero.find("button[name='cancel']").click(function () {
|
||||
_layer.close(index);
|
||||
});
|
||||
$(document).on('keydown', function (e) {
|
||||
if (e.keyCode == 27)
|
||||
_layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表情弹窗
|
||||
var face = function (obj, callback) {
|
||||
//表情库
|
||||
var faces = function () {
|
||||
var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]",
|
||||
"[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]",
|
||||
"[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]",
|
||||
"[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]",
|
||||
"[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]",
|
||||
"[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]",
|
||||
"[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {};
|
||||
layui.each(alt, function (index, item) {
|
||||
arr[item] = layui.cache.dir + 'images/face/' + index + '.gif';
|
||||
});
|
||||
return arr;
|
||||
}();
|
||||
face.hide = face.hide || function (e) {
|
||||
if ($(e.target).attr('event') !== 'face') {
|
||||
_layer.close(face.index);
|
||||
}
|
||||
};
|
||||
var _idx = face.index = _layer.tips((function () {
|
||||
var content = [];
|
||||
layui.each(faces, function (key, item) {
|
||||
content.push('<li title="' + key + '"><img src="' + item + '" alt="' + key + '"></li>');
|
||||
});
|
||||
return '<ul class="layui-clear">' + content.join('') + '</ul>';
|
||||
})(), obj, {
|
||||
tips: 3, time: 0, skin: 'layui-box layui-util-face', maxWidth: 500,
|
||||
success: function (layero, index) {
|
||||
layero.css({
|
||||
marginTop: -4, marginLeft: -10
|
||||
}).find('.layui-clear > li').on('click', function () {
|
||||
callback && callback({
|
||||
src: faces[this.title], alt: this.title
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
$(document).off('click', face.hide).on('click', face.hide);
|
||||
}
|
||||
});
|
||||
if ($(window).width() < 450) {
|
||||
$(".layui-util-face").css("left", "17px").css("width", "92%");
|
||||
$(".layui-util-face .layui-layer-content").css("width", "92%");
|
||||
$(".layui-util-face ul.layui-clear").css("width", "90%");//.css("padding-right", "1px");
|
||||
}
|
||||
return _idx;
|
||||
};
|
||||
|
||||
exports('markdown', new markdown());
|
||||
});
|
||||
6
Examples/website/FreeSql.Site.UI/wwwroot/layui/lay/modules/marked.min.js
vendored
Normal file
6
Examples/website/FreeSql.Site.UI/wwwroot/layui/lay/modules/marked.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,457 @@
|
||||
@font-face {
|
||||
font-family: octicons-link;
|
||||
src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
|
||||
}
|
||||
|
||||
body {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
line-height: 1.5;
|
||||
color: #24292e;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
body a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
body a:active,
|
||||
body a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
body strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
body strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
body h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
body img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
body code,
|
||||
body kbd,
|
||||
body pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
body hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
body input {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
body [type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
body a {
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body hr {
|
||||
height: 0;
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #dfe2e5;
|
||||
}
|
||||
|
||||
body hr::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
body hr::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
body table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
body td,
|
||||
body th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body h1,
|
||||
body h2,
|
||||
body h3,
|
||||
body h4,
|
||||
body h5,
|
||||
body h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body h5 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body h6 {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
body blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body ul,
|
||||
body ol {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body ol ol,
|
||||
body ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
body ul ul ol,
|
||||
body ul ol ol,
|
||||
body ol ul ol,
|
||||
body ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
body dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
body code {
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
body::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
body::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
body>*:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
body>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
body a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body p,
|
||||
body blockquote,
|
||||
body ul,
|
||||
body ol,
|
||||
body dl,
|
||||
body table,
|
||||
body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
body hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #e1e4e8;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body blockquote {
|
||||
padding: 0 1em;
|
||||
color: #6a737d;
|
||||
border-left: 0.25em solid #dfe2e5;
|
||||
}
|
||||
|
||||
body blockquote>:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body blockquote>:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #444d56;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #c6cbd1;
|
||||
border-bottom-color: #959da5;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #959da5;
|
||||
}
|
||||
|
||||
body h1,
|
||||
body h2,
|
||||
body h3,
|
||||
body h4,
|
||||
body h5,
|
||||
body h6 {
|
||||
/*margin-top: 24px;*/
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
body h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
body h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
body h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
body h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
body h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
body h6 {
|
||||
font-size: 0.85em;
|
||||
color: #6a737d;
|
||||
}
|
||||
|
||||
body ul,
|
||||
body ol {
|
||||
/*padding-left: 2em;*/
|
||||
}
|
||||
|
||||
body ul ul,
|
||||
body ul ol,
|
||||
body ol ol,
|
||||
body ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body li {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
body li>p {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
body li+li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
body dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body dl dt {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body dl dd {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
body table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
body table th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body table th,
|
||||
body table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #dfe2e5;
|
||||
}
|
||||
|
||||
body table tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #c6cbd1;
|
||||
}
|
||||
|
||||
body table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
body img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body img[align=right] {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
body img[align=left] {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
body code {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(27,31,35,0.05);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
body pre {
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
body pre>code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
body pre code {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
line-height: 10px;
|
||||
color: #444d56;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #d1d5da;
|
||||
border-bottom-color: #c6cbd1;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #c6cbd1;
|
||||
}
|
||||
|
||||
body hr {
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
Reference in New Issue
Block a user