[发明专利]一种基于Slate的编辑器块级光标定位方法

说明书

本发明提供一种基于Slate的编辑器块级光标定位方法，涉及WEB前端开发领域，所述基于Slate的编辑器块级光标定位方法包括如下步骤：S1，元素光标支持，根据实际需要，通过配置参数来设置指定元素可以具有前后光标S2，渲染Block‑Card组件；(1)渲染插件组件；(2)判断组件上的isBlockCard的布尔值，进而判断是否需要支持块级光标，支持则下一步，不支持则返回。本发明使用户可以单纯通过鼠标点击、键盘方向键等交互方式定位到块级元素的前后光标位置，进而完成更多交互操作，比如在元素上方插入空段落，比如按删除键删除整个表格等等，使交互体验完全能够承接Word文档的交互预期，让交互体验更加接近Word文档原生操作，降低了用户的学习成本，实用性较强。

技术领域

本发明涉及WEB前端开发领域，尤其涉及一种基于Slate的编辑器块级光标定位方法。

背景技术

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

Slate编辑器的定位方法所参照的模型是浏览器原生的DOM Selection，选区包含anchor和focus属性，anchor和focus都是使用Path路径数组+Offset节点内偏移量来描述节点的具体位置的，这种标识方式只能描述叶子节点(Text)的位置，对于表格、图片这类块级元素前后的位置无法直接描述，这对编辑器的交互体验会有很大的影响，位置无法描述位置就无法完成一些特定交互，这在Wrod中是基本的需求，现在主流的知识库产品大多通过产品的角度去规避这个问题，比如通过鼠标Hover到元素弹出交互菜单完成特定交互，这虽然可以解决问题，但无疑增加了用户的学习成本，不利于实际的使用。

发明内容

本发明的目的是为了解决现有技术中存在的缺点，而提出的一种基于Slate的编辑器块级光标定位方法。

为了实现上述目的，本发明采用了如下技术方案：一种基于Slate的编辑器块级光标定位方法，所述基于Slate的编辑器块级光标定位方法包括如下步骤：

S1，元素光标支持，根据实际需要，通过配置参数来设置指定元素可以具有前后光标；

S2，渲染Block-Card组件

(1)渲染插件组件；

(2)判断组件上的isBlockCard的布尔值，进而判断是否需要支持块级光标，支持则下一步，不支持则返回；

(3)渲染块级光标组件；

(4)将插件组件渲染的结果添加到Block-Card组件容器中；

S3，Slate选区兼容，在所述Block-Card组件触发聚焦事件时，通过对Block-Card组件属性状态的查询来让此焦点更改为非受控选区，进而避免Slate定位机制的同步异常；

S4，拦截处理，对用户的交互行为进行分类，若用户操作为回车、删除和移动光标的话，则进行交互处理，若用户操作为中文或英文输入的话，则进行输入处理。

进一步的，在S4中，所述回车的触发事件为Enter，所述删除的触发事件为Delete，所述移动光标的触发事件包括Arrow-Left、Arrow-Right、Arrow-Top和Arrow-Bottom。

进一步的，在S4中，所述交互处理具体为，重写扩展钩子函数来对回车、删除和移动光标进行处理。

进一步的，在S4中，所述输入处理包括中文处理和英文处理。