emeditor snippet

EmEditor代码片段介绍

编辑器的重要性

• 编辑器对提高我们的工作效率有很大帮助

• 每个人都有自己用得最顺手的编辑器

• 我最喜欢也一直在用的编辑器是小巧快速

的EmEditor，它最大的特点是快

• 今天希望通过一个实例，给大家分享代码

片段插件的用法

利用代码片段编码

•怎么做到的？


• EmEditor中有一个插件叫“代码片段”，

可以自定义习惯的代码片段。

• 对我们来说<a href=“#”></a>是灰常

灰常常用的代码片段，所以我自定义

了这个代码片段。


• <a href="#">$0</a>

• $0是一个变量，表示最后一个占位符

• 其它占位符包括$1,$2,$3……$n

• 代码片段触发后，光标会在各个占位符中依次

激活。对于上述代码片段来说，只有一个占位

符，所以会在之后跳转到$0所

在的位置。


• <img src="$1" alt="$2" />$0

• 这样的话，每次按下tab，光标会

按照$1,$2,$0的顺序跳转，因为

$0是终结，所以一定要放在最后

一个，$0之后不会继续跳转


• <img src="$1" alt="${2:图片替代文字}" />$0

• 这里给$2加上了一个默认值“图片替代文字”，也就是

说：

– 1.代码片段的时候会在$2处输出默认值

– 2.光标跳到占位符$2的时候会选择默认值

– 这跟<img src=“$1” alt=“$2图片替代文字” />$0是不

同的

• 

• $0

• 

• 你一定注意到了，这个代码片段中有两个相同的占位符$1

• 两个相同的占位符是被同时编辑的！

• 代码片段的占位符很强大是不是？

• 还有更强大的！

• 

• $0

• 

• 这就是我实际中在用的HTML注释代码片段，

在刚才的基础上加了一点点东西：${SelText}，

这是一个变量，代表输出代码片段被触发的时

候选中的文本。


• 刚才我们所有的代码片段都是

在HTML文件夹中创建，默认

的作用范围是HTML，也就是

说只有在编辑HTML的时候会

触发代码片段。


• 由于CSS中也有注释块的需求，并且语法

和HTML不同，所以我们要在CSS文件夹

中再创建一个注释块。

• 我认为在CSS中创建注释块跟HTML中创

建注释块是同一个功能的“重载”，所以使

用了相同的名称和触发条件：se


• 看看我们现在都用代码片段干了些啥？

– 两次按键输出一个a链接

– 四次按键输出一个img图片（如果你的需求中有大量的图片，你可以把按键次

数缩减到两次，比如设置触发代码为i）

– 三次按键输出一个块状注释（HTML和CSS都有效）

你也可以编辑自己的代码片段！可能你暂时无法记住这些复杂（其实非常简单）

的“变量”，那么说说我们非常常见的一句代码

display:inline-block;*display:inline;zoom:1;

由于IE6/7对于inline-block的不支持，我们每次都要输入这些代码。

我做了一个代码片段来完成任务，相信你也能做到：


• 等等！我需要为每个HTML元素都

设置代码片段？

• 不需要哦~~大部分HTML标签都是成对出

现的（非自闭和），可以通过一个快速的

方式一劳永逸。


• 太难么？其实不难，琢磨半个小

时就能完全弄清除这些变量是怎

么工作的。

• 太简单？？好吧，这里是代码片

段支持的所有变量：


• 代码片段是我坚持使用和推荐

EmEditor的主要原因。

• 其他编辑器也提供了很多快速编码的

方法，但EmEditor通过它优秀的细节

和强大的自定义功能占据上风。


• 觉得代码片段的编辑窗占用编

辑区域？可以在插件属性中设

置在后台运行，这样启动

EmEditor就启动了代码片段。

谢谢大家！

emeditor snippet

Documents