Skip to content

Commit

Permalink
rebuild
Browse files Browse the repository at this point in the history
  • Loading branch information
su committed Jun 19, 2018
1 parent 9d49d3f commit d6a5627
Show file tree
Hide file tree
Showing 9 changed files with 129 additions and 751 deletions.
0 laymd/Parser.js → Parser.js
View file
File renamed without changes.
56 changes: 53 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,61 @@
</head>
<body style="padding: 15px;">
<div>
<div id="demo"></div>
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">长输入框</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">短输入框</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期选择</label>
<div class="layui-input-block">
<input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">行内表单</label>
<div class="layui-input-inline">
<input type="text" name="number" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
</div>

<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>

<div class="layui-form-item" pane="">
<div id="demo"></div>
</div>

<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
</div>
</form>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="laymd/Parser.js"></script>
<script src="Parser.js"></script>
<script>
layui.use(['layer', 'laymd'], function(){
var $ = layui.$,
Expand All @@ -24,7 +74,7 @@
var md = laymd.init('demo', {});

md.on('change', function () {
$('iframe').contents().find('body').html(parser.makeHtml(md.getText()));
this.setPreview(parser.makeHtml(md.getText()));
});
});
</script>
Expand Down
47 changes: 29 additions & 18 deletions laymd.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,10 @@
display: block;
border: 1px solid #e6e6e6;
box-sizing: border-box;
background-color: #fff;
}

.layui-laymd-full {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1992;
.layui-form-item[pane] .layui-laymd {
border: none;
}

.layui-laymd-tool {
Expand All @@ -33,14 +27,15 @@
height: 20px;
line-height: 20px;
padding: 3px 5px;
color: #777;
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;
}
Expand All @@ -52,8 +47,23 @@
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;
Expand All @@ -63,6 +73,7 @@
.layui-laymd-area textarea {
resize: none;
width: 100%;
height: 100%;
box-sizing: border-box;
vertical-align: middle;
padding: 10px;
Expand All @@ -71,30 +82,30 @@
font-family: Consolas, "Microsoft Sans Serif", sans-serif;
font-size: 16px;
outline: none;
z-index: 1993;
word-wrap: break-word;
word-break: break-all;
}

.layui-laymd-full textarea {
width: 50%;
}

.layui-laymd-area iframe {
border: none;
outline: none;
width: 100%;
padding: 10px;
height: 100%;
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
display: none;
}

.layui-laymd-full textarea {
width: 50%;
height: 100%!important;
background-color: #fff;
}

.layui-laymd-full iframe {
display: block;
display: block!important;
width: 50%;
left: 50%;
height: 100%!important;
border-left: 1px solid #e6e6e6;
}
47 changes: 0 additions & 47 deletions laymd.html
View file

This file was deleted.

51 changes: 47 additions & 4 deletions laymd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ layui.define(['jquery'], function(exports) {
'|',
'table', 'quote', 'toc', 'img',
'|',
'full'
'full', 'preview'
],
height: 280
};
Expand Down Expand Up @@ -51,8 +51,16 @@ layui.define(['jquery'], function(exports) {
].join(''));

//设置编辑框和预览框
EL.$textArea = EL.$div.find('textarea').css('height', config.height).attr('name', EL.$div.attr('name') || EL.$div.prop('id'));
EL.$iframe = EL.$div.find('iframe').css('height', config.height);
EL.$div.find('.layui-laymd-area').height(config.height);
EL.$textArea = EL.$div.find('textarea').attr('name', EL.$div.attr('name') || EL.$div.prop('id'));
EL.$iframe = EL.$div.find('iframe');

//设置预览默认样式
EL.$iframe.contents().find('head').append([
'<style>',
'',
'</style>'
].join(''));

//获取DOM
var textArea = EL.$textArea[0];
Expand Down Expand Up @@ -275,6 +283,29 @@ layui.define(['jquery'], function(exports) {
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
});
};
};

//所有工具
Expand Down Expand Up @@ -303,7 +334,8 @@ layui.define(['jquery'], function(exports) {
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>'
full: '<i class="laymd-tool-full" title="全屏" laymd-event="full">↗</i>',
preview: '<i class="laymd-tool-preview" title="预览" laymd-event="preview">√</i>'
};

//热键数组
Expand Down Expand Up @@ -531,9 +563,20 @@ layui.define(['jquery'], function(exports) {
if (EL.$div.hasClass('layui-laymd-full')) {
EL.$div.removeClass('layui-laymd-full');
element && $(element).text('↗');
EL.$div.find('i.laymd-tool-preview').show();
} else {
EL.$div.addClass('layui-laymd-full');
element && $(element).text('↙');
EL.$div.find('i.laymd-tool-preview').hide();
}
},
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');
}
}
};
Expand Down
77 changes: 0 additions & 77 deletions laymd/laymd.css
View file

This file was deleted.

Loading

0 comments on commit d6a5627

Please sign in to comment.