LanEditor/demo.html at master · EcjtuNet/LanEditor · GitHub

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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>LanEditor</title>
	<!-- <link rel="stylesheet" type="text/css" href="boots.css"> -->
	<link rel="stylesheet" type="text/css" href="LanEditor.css">
	<link rel="stylesheet" type="text/css" href="highlight/styles/monokai_sublime.css">
	<script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="LanEditor.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var lan = LanEditor.init({
				textelem: "editor",
				showelem: "show",
				PluginsMode: false
			});
			if(lan.status == false){
				alter(lan.message);
				return ;
			}else{
				// 默认保存LanEditor快速指南文件
				// 获取文件创建的时间
				var createTime = LanEditor.Time.GetTimestamp();
				// 文件名
				LanEditor.File.CurOpenFile.name = "LanEditor快速指南";
				// 创建时间
				LanEditor.File.CurOpenFile.time = createTime;
				// 保存文件
				LanEditor.File.SaveFile();
				// 渲染
				LanEditor.RenderHTML();
			}
		});
	</script>
	<style type="text/css">
		* {
		    margin: 0;
		    border: 0;
		}
		body {
		    position: absolute;
		    width: 100%;
		    min-height: 100%;
		    height: auto;
		}

		#edit {
		    position: absolute;
		    box-sizing: border-box;
		    width: 49%;
		    height: 100%;
		    left: 0px;
		    top: 0px;
		    border-right: 1px dashed #666;
		    padding: 5px;
		    overflow: hidden;
		}

		#editor {
		    padding: 5px;
		    width: 100%;
		    height: 100%;
		    position: relative;
		}
		#show {
		    position: absolute;
		    box-sizing: border-box;
		    width: 49%;
		    height: 100%;
		    overflow: auto;
		    right: 0px;
		    top: 0px;
		    padding: 5px;
		    font-size: 14px;
		    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
		    border-left: 1px dashed #666;
		}
	</style>
</head>
<body>
	<div id="edit">
		<textarea id="editor" name="editor">
##LanEditor快速指南

LanEditor是一个在线编辑器，它适合编写Markdown，并且提供即时预览。除此之外，它可以编辑任何文本文件。

它是免费的，并且所有代码开源。你可以使用提供的API对它进行二次开发或是个性化，而这一切都非常简单。

因为，LanEditor设计之初就是这样的！

* <a href='http://lanfly.github.io/laneditor/doc' target='_blank'>http://lanfly.github.io/laneditor/doc</a>

 这是LanEditor文档，你可以在这里详细的了解它。

* <a href='https://github.com/EcjtuNet/LanEditor' target='_blank'>https://github.com/EcjtuNet/LanEditor</a>

 这是LanEditor的github项目地址，你可以在这下载最新的代码。

##LanEditor有哪些功能？

1. 多文件管理,在多个文件之间轻松切换,随意编辑
2. 实时自动保存，保证信息不丢失
3. 永久保存,包含年月日-时分秒创建日期信息
4. 符号，缩进，关键词自动补全,自定义关键词
5. 个性化代码高亮和皮肤，全听你的
6. 关键字提示框光标跟随，动画效果
7. 简洁的菜单,可关闭|打开动画
8. markdown实时预览，可选择导出md和HTML两种格式

##如何开始？

本页面长期维护，所以你可以在任何时候打开页面编辑。

**注意！编辑的文件由你的浏览器保存在本地硬盘，它是永久保存的，除非你手动清除了。**

1. ####打开菜单

 * 在编辑区里按下```ESC```键，将会显示```文件菜单```，点击相应的文件名打开并编辑该文件。

 * 不用担心保存问题，LanEditor会```即时保存```你的每一次编辑。

 * 在菜单界面，再次按```ESC```键会关闭菜单，你可以继续编辑。

2. ####新建文件

 * 按下```ESC```打开菜单，在```输入框```里输入文件名，点击右边的```新建```按钮，此时文件列表就会多出一项。点击刚刚新建的文件名进行编辑。

 * 你可以点击文件名右边的```删除```按钮删除该文件。注意！删除操作没有确认提示，且无法恢复。

 * 鼠标放在文件名右边的```日期```按钮上，稍等片刻，将会显示文件详细的创建日期，包括年月日-时分秒。

3. ####下载文件

 * 点击文件名右边的```HTML```按钮，可以下载```带样式```的HTML文件。在弹出的对话框中输入文件名，确定即可。不必带上.html后缀名。

 * 点击```MD```按钮，将会下载```markdown```原文件。同样的，文件名不需带上.md后缀名。

4. ####选项设置

 * LanEditor的其中一个特点就是具有```关键字提示```和```自动补全```功能。此外，它还带有酷炫的动画效果。
 你可以选择关闭或打开这项功能。

 * 打开菜单，点击```选项设置```面板，点击相应的项可以打开或关闭该项功能。

 * 选项右边的开关为```蓝色```表示该功能处于打开状态，```灰色```表示处于关闭状态。

##特色功能

这些功能需要你的浏览器提供支持，```IE```系浏览器请不要尝试，因为我也不知道它将会出现怎样的怪异行为。

只要你的浏览器是现代的，且不那么古老，一般都可以很好的工作。

1. ####代码提示

 * LanEditor默认内置了HTML、CSS、JavaScript语言的代码提示。

 * 在英文状态下输入字符，LanEditor将会快速的查找语法库，并将匹配的结果集以提示框的形式出现。

 * 如果未找到匹配的结果，它什么也不会做。

 * 在出现提示框后，你可以使用```上下方向键```来选择项，按下```回车```将会自动帮你补全被选择的项。

2. ####符号补全和缩进

 * LanEditor会自动把你补全可以成对出现的符号、单引号、双引号。
 * 你只需输入一个左括号，它会自动帮你把右括号补全，并且将光标定位在括号中间。
 * LanEditor会自动帮你在新行缩进，缩进量和上一行相同。

3. ####代码高亮

使用

```text
 ```language
    //code here
 ```
```

将代码块包裹起来，language是语言的名字。LanEditor会调用highlight进行高亮渲染。就像下面这样：


```js
<script type="text/javascript">
    $(document).ready(function(){
        var lan = LanEditor.init({
            textelem: "editor",
            showelem: "show",
            PluginsMode: false
        });
        if(lan.status == false){
            alter(lan.message);
            return ;
        }
    });
</script>
```

##问题反馈
在使用中有任何问题，欢迎反馈给我。下面是我的联系方式：

* 邮件 [bluescode@outlook.com](mailto:bluescode@outlook.com)
* QQ 1260022720

请注明LanEditor

##捐助开发者

在兴趣的驱动下,写一个免费的东西，有欣喜，更多的是汗水，希望你们喜欢我的作品，同时也能支持一下。 当然，有钱捧个钱场（支付宝扫描下面的二维码），没钱捧个人场，谢谢各位。

![啊哦！这二维码被偷吃了，请通过QQ或邮件和我联系](http://lanfly.github.io/alipay.png)
		</textarea>
	</div>
	<div id="show">

	</div>

</body>
</html>