forked from pandao/editor.md
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfull.html
160 lines (137 loc) · 7.41 KB
/
full.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>完整示例 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.css" />
</head>
<body>
<div id="layout">
<header>
<h1>完整示例</h1>
<p>开启HTML标签识别和解析、TeX(基于KaTeX)、流程图和时序/序列图支持;</p>
</header>
<div class="btns">
<button id="show-btn">显示编辑器</button>
<button id="hide-btn">隐藏编辑器</button>
<button id="get-md-btn">获取Markdown(源码)</button>
<button id="get-html-btn">获取HTML(源码)</button>
<button id="watch-btn">开启实时预览</button>
<button id="unwatch-btn">关闭实时预览</button>
<button id="preview-btn">预览HTML(按ESC取消)</button>
<button id="fullscreen-btn">全屏(按ESC取消)</button>
<button id="show-toolbar-btn">显示工具栏</button>
<button id="close-toolbar-btn">关闭工具栏</button>
</div>
<div id="test-editormd"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
$.get('test.md', function(md){
testEditor = editormd("test-editormd", {
width: "90%",
height: 740,
path : '../lib/',
markdown : md,
saveHTMLToTextarea : true, // 保存HTML到Textarea
//watch : false, // 关闭实时预览
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览HTML的代码块高亮，默认开启
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",
onload : function() {
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
});
$("#show-btn").bind('click', function(){
testEditor.show();
});
$("#hide-btn").bind('click', function(){
testEditor.hide();
});
$("#get-md-btn").bind('click', function(){
alert(testEditor.getMarkdown());
});
$("#get-html-btn").bind('click', function() {
alert(testEditor.getHTML());
});
$("#watch-btn").bind('click', function() {
testEditor.watch();
});
$("#unwatch-btn").bind('click', function() {
testEditor.unwatch();
});
$("#preview-btn").bind('click', function() {
testEditor.previewing();
});
$("#fullscreen-btn").bind('click', function() {
testEditor.fullscreen();
});
$("#show-toolbar-btn").bind('click', function() {
testEditor.showToolbar();
});
$("#close-toolbar-btn").bind('click', function() {
testEditor.hideToolbar();
});
});
/*
// IE不支持
editormd.printAreaCount = 0;
editormd.printArea = function($obj) {
var prefix = "editormd-print-area-iframe";
var iframeId = prefix + editormd.printAreaCount;
if (editormd.printAreaCount > 0)
{
document.body.removeChild(document.getElementById(iframeId));
}
editormd.printAreaCount++;
var iframe = document.createElement("iframe");
iframe.id = prefix + editormd.printAreaCount;
iframe.style.cssText = "position:absolute;width:0px;height:0px;top:-999px;left:-999px;";
document.body.appendChild(iframe);
var iframeDocument = iframe.contentWindow.document;
var links = document.getElementsByTagName("link");
for (var i = 0, len = links.length; i < len; i++)
{
var rel = links[i].getAttribute("rel").toLowerCase();
if (rel === "stylesheet")
{
var css = "<link type=\"text/css\" rel=\"stylesheet\" href=\"" + links[i].getAttribute("href") + "\" >";
iframeDocument.write(css);
}
}
iframeDocument.write("<div class=\"" + $obj.className + "\">" + $obj.innerHTML + "</div>");
iframeDocument.close();
var iframeWindow = iframe.contentWindow;
iframeWindow.close();
iframeWindow.focus();
iframeWindow.print();
};
function preview() {
editormd.printArea(testEditor.previewContainer[0]);
}*/
</script>
</body>
</html>