编辑器操作详解

与常见的编辑器不同,本编辑器有两种模式:

  1. 普通模式。键盘友好,用户可以通过快捷键(通常就是一个字符键)执行各种操作,如:复制、移动、删除、章节缩进、本地保存、源码导出、撤销或重做等。同时,这也是从下方主面板区插入各种内容的模式。
  2. 修订模式。对录入的内容作小量修改时使用,此时回车键被严格限制,以兼容不同浏览器对contenteditable元素的Enter行为。该模式有时也称为微编辑模式。考虑便捷性,该模式下也支持创建同类或逻辑新行的能力。

进入修订模式很简单:选中目标元素,键入热键M,或右击鼠标打开上下文菜单,点选修改条目进入。

全局热键

本编辑器的操作设计借鉴于大名鼎鼎的Vim,普通模式下通过热键完成大部分操作,内容录入主要从下方主面板上的内容标签页完成。

编辑器有两个聚焦区域

  1. 编辑器。即编辑器自身整个界面(全局),单击编辑器任意位置即可。
  2. 内容区。显示文章内容的中间区域。部分与文章内容紧密相关的操作需要此处聚焦。单击内容区任意元素或顶部的工具栏、或者按压全局热键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 + 箭头键单选游走。移动焦点的同时改选到目标元素,其它选取被取消,类似鼠标单击的效果。

选取扩展

在现有选取集的基础上,通过简单的键位操作可以将选取集进行扩展。扩展以当前焦点元素为参考,键位定义如下:

下面的扩展与焦点元素状态有关,会执行同态操作。

  • AAll,定位全部兄弟元素,使得它们与焦点元素的状态相同。焦点不变。
  • EElement,定位同类的兄弟元素(相同标签),使之与焦点元素状态相同。焦点不变。
  • 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取消全部选取和焦点元素的选取焦点(:可撤销)。

虚焦点支持

大部分的选取操作都是基于焦点元素,但焦点元素只有一个。对于需要批量操作的场景,这并不友好,因此这里引入了虚焦点的设计。

虚焦点是把选取集内的每一个成员都视为焦点元素,然后执行特定的操作。支持虚焦点的操作并不多,并且只有选取而没有同态的逻辑。因为每一个成员都变成了焦点,所以这里有一些限制:

  1. 仅适用部分简单的选取,比如E选取同级同类元素,复杂的叔伯元素选取(Shift + E)则不适用。
  2. 平级操作时(如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),这通过进入一种微编辑的状态实现。这种修订仅适用于内容元素。有多个选取元素时,微编辑可按选取元素的顺序逐个进入。

编辑完成后按EnterTab键确认并退出。如果是Tab且选取集内还有元素,则切换到下一个成员。

  • M:进入微编辑,光标定位到单击点。如果单击点不在元素内,进入后为全选状态。
  • Shift+M:进入微编辑,光标定位到元素内容的末端。
  • Enter:确认当前修订(退出微编辑)。
  • Tab:确认当前修订。如果有多个选取,按选取顺序进入到下一个元素的修订。

定位移动

有时侯需要内容处于准确的平面位置,通常是设置其绝对样式(position:absolute以及lefttop值)。这种定位方法需要用户了解一些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树结构!

其它

表格的容错编辑

通过特性编辑面板,用户可以修改表格单元格的rowspancolspan特性,因此对于了解HTML的用户来说,他们可以自由构建不规整的表格结构。编辑器不阻止用户删除插入独立的单元格。

这种能力是用户自己的,如果克隆表格行(<tr>),编辑器并不会检查单元格的这两个特性值。

兼容性依赖

修订模式下需要浏览器的document.execCommand支持,以实现从外部插入内容时,可以直接沿用浏览器自身的UndoRedo功能。这简化了编码复杂性。