与常见的编辑器不同,本编辑器有两种模式:
- 普通模式。键盘友好,用户可以通过快捷键(通常就是一个字符键)执行各种操作,如:复制、移动、删除、章节缩进、本地保存、源码导出、撤销或重做等。同时,这也是从下方主面板区插入各种内容的模式。
- 修订模式。对录入的内容作小量修改时使用,此时回车键被严格限制,以兼容不同浏览器对
contenteditable元素的Enter行为。该模式有时也称为微编辑模式。考虑便捷性,该模式下也支持创建同类或逻辑新行的能力。
进入修订模式很简单:选中目标元素,键入热键M,或右击鼠标打开上下文菜单,点选修改条目进入。
全局热键
本编辑器的操作设计借鉴于大名鼎鼎的Vim,普通模式下通过热键完成大部分操作,内容录入主要从下方主面板上的内容标签页完成。
编辑器有两个聚焦区域:
- 编辑器。即编辑器自身整个界面(全局),单击编辑器任意位置即可。
- 内容区。显示文章内容的中间区域。部分与文章内容紧密相关的操作需要此处聚焦。单击内容区任意元素或顶部的工具栏、或者按压全局热键F8也可以完成。
当全局区域聚焦时(编辑器载入后自动完成),全局热键即可使用,当内容区聚焦时,内容区热键即有效。如果内容区的热键没有覆盖全局热键,内容区聚焦也同样就是全局聚焦。
几个基本的全局热键如下:
- F4:大纲面板隐显切换。
- F3:下方功能区主面板隐显切换。
- F2:焦取独立:暂存当前已选取成员(不含焦点),单选焦点元素。再次按键则恢复暂存的选取。
- F1:右侧帮助面板隐显切换。
- F6:内容区底部焦点元素DOM路径提示栏隐显切换。
- F7:打开插件对话框(按ESC键可取消)。
- F8:内容区聚焦。
- F9:当前在显主面板(大纲、功能区、帮助)状态切换,方便用户充分预览内容区。
- F10:当前窗口最大化切换。
单击:鼠标单击选取目标元素,如果单击的同时按住 Ctrl 键则为多选/切换选取。- M:进入修订(Modify)模式,修改目标元素内的内容。按回车(Enter)键确认。
- U / R:各种撤销(
Undo)与重做(Redo)。 - Ctrl+S:保存文章内容到浏览器本地,重新打开或刷新页面即会自动载入。
- ESC:各种取消。支持
选取集、上下文菜单、内联创建菜单、模态框、修订模式、前置数字设置、录入框平铺等取消。注意:选取集取消会进入编辑历史栈(可撤销)。
普通模式
编辑器初始的常规状态即为普通模式。此时无法对文本进行编辑,但可以对内容进行各种控制。
- 选取:鼠标单击选中目标元素,按 Ctrl 键单击可多选或切换选取。另外还有一些扩展选取的快捷方式。被选中的多个目标元素称为选取集,它们是接下来各种操作的目标对象。
- 移动:将选取集元素移动到焦点元素之前、之后或内部。如果源元素不是目标位置合法的类型,会自动转换。平级移动非常简单(Alt + ↑ 或 Alt + ↓),也不需要转换。
- 克隆:将选取集元素克隆并插入到焦点元素之前、之后或内部,位置不合法时也会自动转换。原地克隆也很简单,键入热键C即可,同时也支持前置数字指定克隆的份数。
- 删除:大部分元素可以按Delete键直接删除,但拥有固定结构(如表格)的内部元素不可以。删除操作会智能判断目标类型,不能直接删除的只会移除其内容(而不是目标本身)。当然,你也可以强制删除它。
- 缩进:仅适用章节片区。对选中的章节单元进行升级或降级。
- 录入:从下方主面板的内容标签页里可以录入各种内容单元,这也是编辑器主要的内容导入方式。内容单元有自己的结构逻辑,在什么位置可以插入什么单元,会在左侧的条目选单上体现。
- 转换:对特定类型的单元可以进行类型转换,比如将多个段落转换为列表、无序列表转为有序列表等。选中一个或多个同类目标,右击弹出上下文菜单即可找到转换子菜单。
- 创建:在一个文本行上用鼠标划选后,会弹出内联单元创建菜单,单击目标条目或热键即可创建内联单元。
焦点元素
选取集是元素按选中的先后顺序加入集合的,通常最后添加的元素拥有焦点。焦点是为了方便元素选取而设计的一个热点,大部分选取操作就是针对焦点元素而来。拥有焦点的元素即是焦点元素。
焦点可以在任意元素间移动,通过鼠标单击点选,或者键入方向键来实现。这里的焦点与浏览器DOM元素焦点并不是同一个东西,为了与之相区别,我们可以视之为一种选取焦点。但下面为简单起见,统一称之为焦点。
焦点移动
选取焦点可通过键盘上的几个方向键移动,移动分为两个维度:
- 兄弟/平级:在DOM树的同级元素方向上,即兄弟元素间移动。
- 父子/纵向:在DOM树的纵深方向上,即父子元素间的跨层级移动。
借鉴Vim中的便捷方向键hjkl(左下上右),以及DOM节点树的逻辑,方向键含义如下:
- ↑/K: 平级移动,定位到前一个(
prev)兄弟元素。支持数字指定移动距离,默认值1(即前一个兄弟元素),特殊值0表示头部首个兄弟元素。 - ↓/J: 平级移动,定位到下一个(
next)兄弟元素。支持数字指定移动距离,默认值1(即下一个兄弟元素),特殊值0表示末尾最后一个兄弟元素。 - ←/H:纵向移动,定位到父元素(父级方向)。支持数字指定移动层级,默认值
1(即父元素)。 - →/L:纵向移动,定位到子元素(子级方向),支持数字指定子元素位置下标,默认值
0(即首个子元素),负值表示从末尾算起(-1为最后一个子元素)。
Tab:普通模式下,在当前选取集成员间按选取顺序移动焦点。加按Shift则逆向移动。
附:顶元素
顶元素是一个虚拟的根元素,方便用户快速定位到经常操作的目标。热键T可以将焦点移动到当前焦点元素的顶元素上。
- 对于内联单元来说,顶元素是其所在行块的内容行元素。如
<p>、<li>、<dd>和<td>等。 - 对于行块单元内的中间结构元素来说,其顶元素为单元自身的根元素。如
<tr>的顶元素为<table>,<li>的顶元素为其所在的<ol>或<ul>等。 - 对于内联单元内的结构元素来说,其顶元素即是该内联单元本身。如
<rt>的顶元素为<ruby>,SVG系子元素的顶元素为其所属根容器<svg>。
元素选取
鼠标点选
通过鼠标单击的方式可以定位焦点元素并实现选取或取消选取。
- 单选:
单击。鼠标单击目标元素即选中目标,但之前的选取会被取消。 - 多选:Ctrl+
单击。目标元素会被添加到当前选取集内。如果目标已经是被选取的,则会取消选取(切换)。 - 聚焦:Alt+
单击。仅将选取焦点移动到目标元素上,没有选取作用。这在某些需要定位的操作中很有用。
下面的鼠标选取有一定的智能性,与焦点元素有关。
- 跨选:Shift+
单击。与焦点元素同级,跨选到目标元素之处的全部兄弟元素。鼠标指向的目标元素(event.target)可能并不与焦点元素同级,但会自动提升至同级。跨选是同态逻辑(见下)。 - 浮选:Shift+Ctrl+
单击。以焦点元素所在层级为参考,对目标元素的同层级容器元素执行切换选取。
下面的鼠标选取与焦点元素无关。
- 父多选:Alt+Ctrl+
单击。选取或取消选取鼠标单击的目标元素的父元素。这在定位<tr>元素时很有用。 - 父单选:Alt+Ctrl+Shift+
单击。类似父选,但会取消之前的全部选取。 - 父聚焦:Alt+Shift+
单击。仅将选取焦点移动到单击目标的父元素上,不影响当前选取集。
按键选取
如果焦点元素已经存在(鼠标点选),通过简单的键盘按键,我们可以实现更多的操作。
- Enter:单选。单选当前焦点元素,如果当前焦点元素已为单选则无效果。类似于鼠标
单击。 - Space:选取切换。焦点元素选取或取消选取。不影响其它已选取元素,类似
Ctrl+单击的效果。 - Shift + 箭头键:单选游走。移动焦点的同时改选到目标元素,其它选取被取消,类似鼠标
单击的效果。
选取扩展
在现有选取集的基础上,通过简单的键位操作可以将选取集进行扩展。扩展以当前焦点元素为参考,键位定义如下:
下面的扩展与焦点元素状态有关,会执行同态操作。
- A:
All,定位全部兄弟元素,使得它们与焦点元素的状态相同。焦点不变。 - E:
Element,定位同类的兄弟元素(相同标签),使之与焦点元素状态相同。焦点不变。 - Shift+E:定位叔伯元素(父元素的兄弟元素)内的相同标签子元素,使之与焦点元素状态相同。焦点不变。这在选取同一父章节下的子章节的标题时很有用,或者选取表格中的列头(
<th>)时有用。 - Alt+Shift+E:定位叔伯元素中标签相同且所在位置也相同的子元素,使之与焦点元素状态相同。焦点不变。这在选取表格中的一列时很有用。或者选取一个列表中每一行的首个子元素(如果标签相同)时有用。
下面的热键在移动焦点的同时会执行同态操作。
- Ctrl+Shift+↑/K:同级向前(
previous)扩展,支持前置数字指定扩展距离。焦点会移动到最终的元素上。 - Ctrl+Shift+↓/J:同级向后(
next)扩展,支持同上。
下面的热键在移动焦点的同时会执行选取操作。注:纵深方向上没有同态逻辑,因为选取成员不能相互包含。
- Ctrl+Shift+←/H:向上移动焦点到父元素上,同时选取父元素。支持数字指定距离。
- Ctrl+Shift+→/L:向下移动焦点到子元素上,同时选取子元素。支持数字指定目标子元素的位置下标(从
0开始),支持负数从末尾算起。 - Ctrl+Shift+T:移动焦点到当前焦点元素的顶元素(
Top)上并选取。
下面的操作与焦点元素状态无关,为固定的选取和取消选取逻辑。
- V:同级反选。针对焦点元素所在层级,已选取的元素取消选取,未选取的元素选取。焦点不变。
- W:宽选内容子。向下检索焦点元素内全部内容根元素,将之添加到选取集。焦点移动到首个成员(以体现视觉变化)。
- Shift+W:同上宽选逻辑,但新的内容子元素插入到选取集头部而非末尾。焦点移动到首个成员。
- Q:排他选取。取消焦点元素之外的同级已选取,保留焦点元素的选取(若未选取则自动选取)。
- Shift+Q:全局排他选取。取消焦点元素之外全部已选取,保留焦点元素的选取或自动选取。
- ESC:取消全部选取和焦点元素的选取焦点(注:可撤销)。
虚焦点支持
大部分的选取操作都是基于焦点元素,但焦点元素只有一个。对于需要批量操作的场景,这并不友好,因此这里引入了虚焦点的设计。
虚焦点是把选取集内的每一个成员都视为焦点元素,然后执行特定的操作。支持虚焦点的操作并不多,并且只有选取而没有同态的逻辑。因为每一个成员都变成了焦点,所以这里有一些限制:
- 仅适用部分简单的选取,比如E选取同级同类元素,复杂的叔伯元素选取(Shift + E)则不适用。
- 平级操作时(如E)选取集内的成员不能互为兄弟元素,即每个成员只能是其父元素内的唯一选取。纵向操作(W)则无此约束。
通常,支持虚焦点的操作会辅以 Alt 键(注:对应的普通扩展选取辅助键为 Ctrl)。可用的操作共8个。
平级类
- Alt+A:选取同级全部兄弟元素。参考节点为当前选取集各个成员,下同。
- Alt+E:选取同级全部同类元素。
- Alt+Shift+↑/K:向前(previous)扩选同级兄弟元素,支持数字指定距离。
- Alt+Shift+↓/J:向后(next)扩选同级兄弟元素,支持数字指定距离。
纵深类
向下选取时元素各自独立,向上改选时共同的父级元素会被自动去重。
- Alt+W:向下扩展到内容元素。参考节点为当前选取集各个成员,下同。
- Alt+Shift+←/H:向上选取父级元素,支持数字指定距离。
- Alt+Shift+→/L:向下(内)选取子元素,支持数字指定目标子元素的位置下标。支持负数从末尾算起。
- Alt+Shift+T:向上选取顶元素。
路径辅助选取
在编辑器内容区的底部会显示当前焦点元素的DOM树路径,用鼠标单击其中任何一段,即可选取相应的元素。路径提供了清晰的节点树层次,可用于精确选取。
从路径上添加选取也可以是切换方式,按住Ctrl键单击即为切换,无辅助键则为简单多选。如果只需要从路径上聚焦目标元素,可按住Alt单击。注意此时只是改变焦点,路径序列并不会重构。
选取集排序
元素的选取方式非常多也很灵活,但选取集内部成员的顺序有时是很重要的,比如合并、移动插入或者系统级的复制/粘贴等。除了通过仔细的按顺序选取外,如果要让选取集成员按DOM节点流排序,可以用如下热键完成。
- 正序:S。选取集按DOM节点流排序,焦点定位到排序后的首个成员。
- 逆序:Shift + S。选取集按DOM节点树逆序排序,焦点定位规则同上(DOM上看为最后一个元素)。
编辑操作
与选取类操作以焦点元素为中心不同,编辑操作的目标就是整个选取集成员。但焦点元素在这里有另外的用途——定位操作关联的目标。借鉴于Vim的操作便捷性,这里大部分的操作也都采用单个键位(或加辅助键)完成。
普通编辑
- 删除:Delete。删除选取集内的元素,有一定智能性,部分不可单独删除的不会删除(如:
<td>、<rb>等)。 - 内容删除:Shift + Delete。删除选取集元素内的可编辑内容(即内容元素里的内容),不含元素自身。
- 强制删除:Alt + Shift + Delete。删除选取集内的任意元素,包括结构中不应被删除的子元素。有一定破坏性。
- 撤消:U。Undo,撤销当前操作的选取或编辑。
- 重做:R。Redo,重做被撤销的操作。
- 逆序:X。将选取集内的同级兄弟元素逆序重排(移动),未选取的同级元素会保持原位置。
- 合并:Z。将选取集内的元素的内容按选取顺序合并为一,首个选取的元素为容器,仅适用于内容元素。
- 规范合并:Alt + Z。对整个内容区规范化(
normalize合并相邻的文本节点)。通常不需要。这是一种DOM优化,在执行搜索命令时有用,因为搜索会以文本节点为边界,相邻的文字如果属于不同节点,则不能成词。
- 分组克隆:C。以选取集内相邻的元素为分组,整体克隆并插入原组之后(
after)。选取集更新为新插入的元素。特例:如果选取集只有一个成员,支持数字指定克隆数量。 - 各别克隆:Shift + C。对选取集内的每一个成员独自克隆并插入其后(
after)。选取集更新为新插入的元素。
- 转为大写:Ctrl + U。将选取集元素的文本全部转换为大写,如果加按Alt键,仅首段文本内的首个匹配转换。
- 转为小写:Ctrl + L。将选取集元素的文本全部转换为小写。
以下操作与焦点元素有关。
- 向内填充:F。将选取集成员移动填充到焦点元素之内(
fill)。焦点元素不应当被选取。若源为非法子元素(结构限制),会自动提取其内容创建目标位置的默认子元素。 - 克隆填充:Shift + F。将选取集成员克隆填充到焦点元素之内(
fill)。焦点元素可以作为数据源。非法子元素规转换则同上。 - 向内添加:D。将选取集成员移动添加到焦点元素内末尾(
append)。焦点元素不应当被选取。非法子元素转换规则同上。 - 克隆添加:Shift + D。将选取集成员克隆添加到焦点元素内末尾(
append)。焦点元素可以作为数据源。非法子元素转换规则同上。
- 移动前插入:I。将选取集成员移动并插入到焦点元素之前(
before)。不可被删除的元素会移除其内容,焦点元素不可选取,非法元素转换规则同前。 - 克隆前插入:Shift + I。将选取集成员克隆并插入到焦点元素之前(
before)。焦点元素可以作为数据源,非法元素转换规则同前。 - 移动后插入:B。将选取集成员移动并插入到焦点元素之后(
after)。不可删除规则同上,焦点元素不可选取,非法元素转换规则同前。 - 克隆后插入:Shift + B。将选取集成员克隆并插入到焦点元素之后(
after)。焦点元素可以作为数据源,非法元素转换规则同前。
移动与缩进
移动与缩进是编辑中常见的操作,这里的移动是元素自身的移动,但受限于内容单元固有的HTML结构,这里的移动仅限于兄弟元素之间的平级移动。
缩进的操作只适用于章节,针对章节(s1-s5)或片区(section)单元。包含升级和降级两种操作。
注意下面的箭头键是真实的箭头键(也可以是 hjkl)。
- 向前移动: Alt + ↑。选取集成员在各自父元素内平级移动,支持数字指定距离,超出范围会导致部分或全部逆序插入。
0值表示端部,有汇聚插入的效果。 - 向后移动: Alt + ↓。数字支持同上,移动行为类似(方向不同)。
- 前移到头部:Alt + Shift + ↑。选取集成员在各自父元素内平级移动到头部,与
0值效果相同。 - 后移到尾部:Alt + Shift + ↓。同上类似但移动方向不同。
- 章节升级: Alt + ←。章节或片区左缩进,升级之后会排列到当前父片区之后(
after)。注:这种层级递升不一定必然表现出视觉差异。 - 章节降级: Alt + →。章节或片区右缩进,会在原地创建一个空的片区容器来包含被降级的片区。
进入微编辑
可以对元素内容进行简单的修订(Modify),这通过进入一种微编辑的状态实现。这种修订仅适用于内容元素。有多个选取元素时,微编辑可按选取元素的顺序逐个进入。
编辑完成后按Enter或Tab键确认并退出。如果是Tab且选取集内还有元素,则切换到下一个成员。
- M:进入微编辑,光标定位到单击点。如果单击点不在元素内,进入后为全选状态。
- Shift+M:进入微编辑,光标定位到元素内容的末端。
- Enter:确认当前修订(退出微编辑)。
- Tab:确认当前修订。如果有多个选取,按选取顺序进入到下一个元素的修订。
定位移动
有时侯需要内容处于准确的平面位置,通常是设置其绝对样式(position:absolute以及left或top值)。这种定位方法需要用户了解一些CSS知识,如对容器设置position:relative样式。
如果容器已经设置了position:relative,元素自身设置了position:absolute,通过下面的操作就可以简单调整位置。
注意下面的箭头键是真实的箭头键(而不是 hjkl)。
- Ctrl+←:向左移动1像素。加按Shift则以10像素为单位。
- Ctrl+→:向右移动1像素。加按Shift键同上。
- Ctrl+↑:向上移动1像素。加按Shift键同上。
- Ctrl+↓:向下移动1像素。加按Shift键同上。
复制和粘贴事件
普通模式下支持系统级(浏览器)的复制、剪切和粘贴操作,操作目标为当前选取集元素。
- 复制:提取选取集元素的文本内容(
textContent)到剪贴板,若有多个选取,内容以换行符分隔。 - 剪切:规则同复制,但同时会删除元素本身,如果元素可以被删除的话。
- 粘贴:以换行符切分剪贴板里的文本内容,分别添加到选取集元素或其根内容元素内。如果选取集只有一个成员,内容不会切分。粘贴默认为填充覆盖方式,加按Shift键为末尾追加(
append)方式。
杂项功能
- P:打开目标单元的属性编辑框。注:从右击鼠标弹出的上下文菜单中也可以。
- Alt+P:导出选取单元或全文内容源码,会自动打开导出对话框。
- Alt+Shift+P:导出全文内容源码,同时会在适当的位置插入文章目录(大纲)。与选取元素无关。
- Ctrl+S:内容源码本地暂存(
localStorage)。注:刷新页面会自动导入之前保存的内容。 - G:章节跳转。根据键入的章节序列(如:
3.12.5),将目标章节滚动到当前视口。注:需内容区聚焦。
样式刷
样式标签栏有一个样式刷按钮,可以对选取集内的元素应用焦点元素的样式。这种操作并不像普通编辑器(如Word)里那样,用刷子去同步样式,而是反过来先选取元素,再定位同步的样式源(选取焦点)。
虽然内联的样式很容易设置,但文档编写者应当注意,这些内联的样式是一种硬编码,并不方便应用外部共享的样式。
录入面板
与普通编辑器的原地输入不同,本设计的内容录入主要通过内容面板来实现。
因为文章的内容单元有结构性限制,内容只能出现在合法的位置(比如<caption>只能在表格内),所以录入面板的创建方式更合理,这样可以很方便地限定在什么位置创建什么内容。
目标位置用选取集元素来标识,新的内容可以插入到该位置之前、之后或内部。如果选取了多个元素,可插入项目是各个目标可插入项目的交集,而内容也会同时插入到各个目标位置处。
快捷键
文本框<textarea>
- Alt+F:录入框最大化切换(相对于面板)。注:也可以按ESC键取消最大化。
- Ctrl+Enter:直接提交插入,效果同单击
插入按钮。焦点会保持在录入框内。 - Alt+Ctrl+Enter:同上直接提交。但如果录入框已最大化,会恢复到普通状态。
表格单元<th|td>
- Enter:切换到当前列的下一个单元格。
- Shift+↓:同上当前列向下切换。
- Shift+↑:切换到当前列的上一个单元格。
- Shift+Enter:插入换行符(浏览器自身功能保留)。
- Ctrl+V:浏览器粘贴功能,但内容以换行符分段,从当前单元格开始向后连续填充。
- Shift+Ctrl+V 保留浏览器普通方式粘贴(纯文本)。
代码框<pre._code>
录入代码的文本框支持一些简单的友好编辑行为:比如回车自动缩进,初始粘贴自动去除多余缩进,Tab键自动插入多个空格(一个缩进),而退格键Backspace则自动删除一个缩进等。
因为代码框拦截了Enter键的行为,所以前面普通文本框里的快捷提交功能就没有了。你需要明确点按插入按钮来完成提交。
修订模式
内容元素的contenteditable特性被设置为true时即进入了修订模式。因为浏览器处理contenteditable元素的差异较大,所以这里进行了严格约束,编辑范围也被严格限制。这种模式应当仅用于简单的文本修改和新行创建。
约束主要体现在对Enter键的限制上:
- Enter:确认当前修订并退出。
- Shift+Enter:插入一个换行
<br>元素,在<pre>元素内会插入一个换行字符\n。注:浏览器自身功能。 - Ctrl+Enter:新建一个同类空行,原行自动确认。适用于段落类和列表项元素
<li>,<dt>,<dd>。 - Alt+Enter:新建一个逻辑空行,原行自动确认。适用诸如
<dt>之后的<dd>,或者<summary>之后的<p>等。 - Tab:完成当前修订并切换到下一个选取的元素。如果没有其它已选取的元素,则同Enter。
- ESC:取消当前修订并退出微编辑。
对于代码元素<code>,如果元素上有语言定义(data-lang),完成后自动解析语法高亮。
属性框
如果选中的元素有属性可修改,键入热键P可以打开属性编辑框。也可以从上下文菜单中点选属性条目打开。如果选中多个同类元素,打开的属性修改将应用到多个目标上。
操作单个目标时,修改的属性会逐一应用:文本框内的空串会使该属性被移除。
操作多个目标时,如果各个目标的某属性的值不一样,则出现不确定(indeterminate)态。如果不确定态的条目未作改变,则对应属性则保持原样。不确定态的控件表现约定如下:
- 文本框:包含
<input:text>和<textarea>两种,无值时表示不确定态。 - 单选按钮:同一组单选按钮没有任一按钮被选中时,表示不确定态。
- 复选按钮:浏览器支持其不确定态的特殊外观(可能是小方框内一个短横线)。
- 条目选单:即
<select>元素,类似单选按钮组,没有任一条目被选中时为不确定态。
命令行
编辑器底部状态栏上的文本输入条即是命令行,在这里可以执行一些高级操作。命令行支持简单的历史搜索:键入Tab键会显示上一次执行的命令,在此基础上键入上下箭头键可以在历史栈中游历。
命令行支持5种指令类型,分别由5个特殊字符标识:
- >: 选取。命令行内容为
CSS选择器,可在当前选取集或全局范围(内容区)内检索选取目标元素。 - |: 过滤。命令行内容为过滤条件,可对当前选取集执行过滤。
- /: 搜索。命令行内容为搜索的目标文本,在选取集或全局搜索范围搜索目标文本并标记。
- :: 命令。命令行内容为编辑器支持的命令,主要是一些基本的工具函数。
- =: 计算。将命令行内容视为
JS表达式,执行简单的计算并返回到命令行回显。
命令行有全局的热键可以直达:键入代表指令类型的特殊字符即可,这会自动切换命令行指令类型,并将输入焦点定位到命令行中。当然用鼠标单击命令行前的特殊字符框也可以实现切换。
选取(>)
在当前选取集范围内检索目标选择器匹配的元素。支持二阶检索选择器:斜线分隔向上和向下选择器,焦点元素为起点。如果没有已选取的元素,则在全局范围(内容区)内检索。
过滤(|)
以当前选取集为总集,过滤出目标元素集。支持选择器、数组定位以及过滤函数的筛选形式。
String:普通CSS选择器。(String):不匹配选择器,类似$.not(...)。注意以小括号包围。(/.../imsu):正则表达式(匹配节点文本内容)。注意同上。[n:m]:冒号分隔的数组下标范围(空格可选),如:[5:10]、[5:]等。[x,y,z]:数组下标定位选取,如:[0,3,4]。{expr}:花括号包围的过滤表达式(无return),命名形参:(v, i, c)。如:{i%2}选取偶数成员。
搜索(/)
对已选取的集合执行文本搜索,并把结果标记为特殊的<mark>元素。如果当前无选取,则以内容区为范围。
文本搜索以文本节点为上下文,因此跨节点的文本无法组词。如果必要,你可以执行一次节点合并操作(Alt + Z),以避免无意中断开了连续的文本。这种简化有它的合理性:既然文本被断开了,它们就不应当成为一个词组。
搜索词默认为字符串,容错引号包围。同时也支持正则表达。
Hello:普通文本,回车后执行检索。键入'Hello'也效果相同。abc/xyz/ok:普通文本,文本内的斜线只是普通字符。"/[a-z]/i":字符串包围的普通文本。这也是搜索正则表达式本身的方式。
/[0-9a-f]/i:正则表达式,由前置的/标示出来。/[0-9a-f]+:缺少结尾的/,视为一个普通的字符串。/[\w.$-]+/:合法的正则表达式。/[0-9a-f]/:搜索词中的空格不会被自动清除,因此这不是一个合法的正则表达式。
命令(:)
支持几个基本的工具命令:
plug-ins:插件安装。plug-del:插件移除。help:开启帮助窗口并定位到指定的关键字条目。config:显示&设置系统配置。replace:替换选取集文本,仅适用内容元素。两个实参时用法参考String.replace()。
计算(=)
用户的输入会直接在顶层(window)执行,用户需要注意代码的安全性,不应当在表达式中修改DOM树结构!
其它
表格的容错编辑
通过特性编辑面板,用户可以修改表格单元格的rowspan和colspan特性,因此对于了解HTML的用户来说,他们可以自由构建不规整的表格结构。编辑器不阻止用户删除或插入独立的单元格。
这种能力是用户自己的,如果克隆表格行(<tr>),编辑器并不会检查单元格的这两个特性值。
兼容性依赖
修订模式下需要浏览器的document.execCommand支持,以实现从外部插入内容时,可以直接沿用浏览器自身的Undo和Redo功能。这简化了编码复杂性。