首页 > 解决方案 > 为 HTML、XML、SVG 文件创建可共享的注释

问题描述

我正在寻找使用JS/Angular/NodeJS为以下内容创建注释的最佳方法。

 1. Annotating HTML - (comments, drawings, highlighting, etc)
 2. Annotating XML - (comments, drawings, highlighting, etc)
 3. Annotating SVG - (comments, drawings, highlighting, etc)

可以使用相关元素来完成实现,例如用于 HTML 注释的 HTML 元素等。

但实施必须有一个最好的方式

 1. a unique reference to a specific annotated object
 2. able to export annotated objects related data in any structure like JSON
 3. able to import exported data and append/create related annotations 
using the unique reference based on the X, Y positions

这样所有注释都可以在用户之间共享,并且用户可以将注释导入到同一个有效文档中。

对于上述要求,我需要考虑哪些最佳模式、策略和事项?如果有任何指导方针,图书馆存在,请分享链接。

但自定义实现是最首选的方式

谢谢

标签: javascripthtmlxmlsvgannotations

解决方案


如果您按照您所说的对 HTML、XML 和 SVG 文件进行注释、绘图和高亮显示,我建议您使用 HTML5 Canvas。如果只是注释和评论,我会说使用 DOM 元素并跟踪位置,但是在图片中添加绘图会使它复杂化。

如果这是我,并且我这样做是为了生产目的,我会有两种类型的编辑器。首先,我将拥有涵盖所有图像和 SVG 的图像注释,然后我将拥有使用可编辑 HTML 和 JavaScript 来跟踪用户操作和注释的文档注释。

您可能想要查看的一件事是 Dropbox Paper,这是一个 Web 应用程序,具有您列出的用于编辑文档的大部分功能。


推荐阅读