【创新实训个人记录】9周-编辑器重构与嵌入到前端

Tasks list

• 变更组件思路—改为在DOM树中与SVG画布平级的组件
• 完成文档
  • 用户文档
  • 技术文档
  • 功能需求文档
• 实现前端嵌入
• LaTeX公式解析

组件重构

在上周实现的编辑器组件，为了测试和实现的方便而将其定义为文本矢量图的子组件

但是考虑到实际的使用，这种方式存在一些问题

• 工具栏与编辑框难以对应
• 生成文本矢量图时的逻辑需要额外考虑文本编辑器
• 由于编辑器限制在文本矢量图所在的div中，因此可能出现显示错误

因此需要更改文本编辑器在DOM树中的位置，参考draw.io，将其改为与整个画布SVG平级，因此需要修改各个方法的实现

<div>
	<svg>...</svg>
	<globalTextEditor />
</div>

未解决问题

• 显示右键菜单超出超出文字原本范围出现滚动条

• 文本编辑器框较小时出现滚动条

• v-if导致的必须在调用方法时使用setTime

  v-if不显示时是不渲染的，故不能调用其方法

• 初次唤醒文本框是焦点问题

编辑器的坐标与大小

在每次唤醒编辑器时，要求编辑器覆盖在被选中的文本矢量图，因此需要设定其坐标与大小

• 编辑器的大小

  可以通过style样式的height与width属性进行设置，使用v-bind将其与变量绑定，并在每次唤醒时重新设置即可。

  考虑到需要经常性修改宽高变量，将其定义在data中，并在methods中提供setter接口。

  需要用户获取到待修改的文本矢量图的宽高。

• 编辑器的坐标

  要设置编辑器所在div的位置，首先要修改其position，其属性关系到坐标的表示方法。

  由于在SVG中，x和y分别代表该图形距离矢量图左边缘与顶部的距离；而文本编辑器的父组件与画布矢量图相同，因此使用相对布局relative。

  同理使用v-bind将style中left和top属性与变量绑定，并在每次唤醒编辑器时调用setter设置其坐标，在methods中提供setter接口。

  需要用户获取到待修改的文本矢量图的坐标。

• 编辑器的内容

  每次唤醒编辑器时，需要设置编辑器内容，思路与之前相同。

  在methods中提供编辑器内容的setter接口。

上述过程都在唤醒编辑器时完成，因此需要向每个文本矢量图绑定事件监听函数，并完成上述过程

工具栏

将wangEditor的工具栏进行封装，显示为矩形的工具栏

使用

• 通过v-show控制显示
• 在唤醒时调用setEditor接口传入对应编辑器对象

未解决

• 工具栏形状

前提

为实现嵌入前端，需要具备以下条件

• 前端可创建文本矢量图（画布SVG中的文本框）

  <g>
      <forirgnObject>
          [表示文本的HTML语句]
      </forirgnObject>
  </g>
  

• 前端可向上述DOM对象绑定监听事件函数（eventListener）

• 前端导入组件及脚本

使用文档

TextEditor

与工具栏分离的富文本编辑器

• 基于wangEditor实现

使用方法

本组件用于编辑文本矢量图内容，监听到文本矢量图的某个事件（双击）时触发显示，编辑器失去焦点后隐藏。

• 因此在DOM树中应当与画布SVG同级

<div>
  <svg>...</svg>
  <GlobalTextEditor />
</div>

• 通过v-show属性实现隐藏与可见

实现方法

用户需要实现以下工作

• 组件的隐藏和渲染
  • v-show
• 文本矢量图触发事件监听函数
• 编辑器失焦事件监听函数
• 获取到被选中文本矢量图的内容、大小以及坐标

前提

• 需要向所有文本矢量图（画布SVG中的文本框）设置**ondbclick**事件
• 向文本编辑器组件TextEditor设置**editorBlur**的监听函数
• 导入editorListener.js文件
• 设置v-show属性控制可见性
• 设置ref属性以获取实例

监听函数

• ondbclick事件的监听函数

  调用editorWake方法，并设置v-show可见（将返回值赋给v-show属性）

• editorBlur事件的监听函数

  调用editorHide方法，并设置v-show不可见（将返回值赋给v-show属性）

js函数

editorWake(editor,toolbar,newHeight,newWidth,newContent,newLeft, newTop)

• editor

  文本编辑器实例，可以在设置ref属性后通过this.$refs获得

• toolbar

  文本工具栏实例，获取方法同上

• newHeight newWidth

  文本编辑器的宽高，应传入被选中的文本框的宽高

• newContent

  文本编辑器的内容，应传入被选中文本框中的HTML文本

• newLeft newTop

  文本编辑器的坐标（距左端和顶端的距离），应传入被选中文本框在画布SVG中的坐标（x，y）

• 返回值

  返回true

editorHide()

• 返回值

  返回false

唤醒组件

通过向文本矢量图组件绑定事件监听函数，函数触发时完成以下过程

• 设置组件可见
• 设置被编辑文本的HTML内容
• 设置编辑器宽高
• 设置编辑器坐标
• 向工具栏toolbar设置文本编辑器editor

组件休眠

通过绑定事件监听函数，编辑器失焦时隐藏组件

• 监听editorBlur事件
• 设置组件隐藏

接口

组件向外提供设置相关属性的接口，用于组件唤醒时的渲染

文本内容

setContent(String contentHTML)

编辑器宽高

setWidth(newWidth)

设置编辑器的宽度

setHeight(newHeight)

设置编辑器的高度

• 编辑器宽高应略大与文本所在div宽高

编辑器坐标

setLeft(newLeft)

设置编辑器的css:left属性

setTop(newTop)

设置编辑器的css:top属性

• 编辑器的position为absolute，因此应是相对于父组件中的坐标

获取编辑器实例

getEditor()

返回编辑器实例

Toolbal

将wangEditor的工具栏进行封装，显示为矩形的工具栏

问题

无法仅提供接口修改编辑器中文本属性，必须调用组件

使用方法

与文本编辑器同时显示和隐藏，在创建后需要调用文本编辑器的接口以显示二者绑定。可以将组件定义在任何位置，前提是必须能够获取到文本编辑器的实例。

• 设置v-show属性控制隐藏显示

• 在唤醒时调用setEditor()接口传入editor实例

  通过文本编辑器的getEditor()接口获取实例

前提

• 设置v-show属性控制可见性
• 设置ref属性以获取实例

监听函数

在editorWake方法中将其与文本编辑器绑定，因此无需额外实现

接口

设置对应文本编辑器

setEditor(editor)

传入文本编辑器的实例

• 需要在创建时传入文本编辑器的实例，才能够显示编辑器中文本的样式

工具栏宽度

setWidth(newWidt)

设置工具栏的宽度