# editorAnnotate

**Repository Path**: ahanflw_admin/editorAnnotate

## Basic Information

- **Project Name**: editorAnnotate
- **Description**: skyeyeAnnotate是一款基于jQuery封装的HTML文章批注插件，帮助开发者轻松实现类似word的文本批注。我们需要在一个或多个网页中添加批注信息的时候这个插件可以简化我们许多工作。使用者可以随意选择文本进行批注以及批注回复，只是批注历史查看等功能。支持客户合同批注、试卷批阅等多种场景。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 36
- **Created**: 2020-08-02
- **Last Updated**: 2022-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# editorAnnotate

#### 介绍
skyeyeAnnotate是一款基于jQuery封装的HTML文章批注插件，帮助开发者轻松实现类似word的文本批注。我们需要在一个或多个网页中添加批注信息的时候这个插件可以简化我们许多工作。使用者可以随意选择文本进行批注以及批注回复，支持批注历史查看等功能。支持客户合同批注、试卷批阅等多种场景。

#### 软件架构
基于jQuery封装的HTML批注插件。

#### 演示地址
http://www.jq22.com/demo/editorAnnotate202008032310/

#### 安装教程
导入前端开发工具，运行index.html即可。

#### 交流
- 该插件目前处于初始阶段，不断更新和维护
- [企业版信息以及价格表](https://docs.qq.com/doc/DQlRxcVRMWWVjbU1i?_from=1&disableReturnList=1)
- [开源版项目文档](https://gitee.com/doc_wei01/skyeye/blob/master/%E9%A1%B9%E7%9B%AE%E6%96%87%E6%A1%A3.md)
- `企业版所有功能部署包`以及`设计思路`获取方式：扫码进入知识星球
- 作者本人承诺，知识星球人数达到1000人，即开放所有功能模块源代码(仅供星球内部成员使用)

### 演示视频

- 视频一：[多桌面任务](https://www.bilibili.com/video/BV1yb41127oB/)
- 视频二：[聊天](https://www.bilibili.com/video/BV11b41127FV)
- 视频三：[日程](https://www.bilibili.com/video/BV1vb411i75M)
- 视频四：[ERP + 生产 202007版](https://www.bilibili.com/video/BV1yA411e7mm)
- 视频五：[ERP + 生产 202109升级模块](https://www.bilibili.com/video/BV1vR4y1p7ka)

### 联系作者

| 作者微信/或者搜索 wzq_598748873 | QQ交流群/或者搜索 1016439713 | 企业版设计思路知识星球 | 扫码进微信群畅聊(禁止发广告)                                                                                                                                                |
| ------ | ---- | ---- |----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ![](https://gitee.com/doc_wei01/skyeye/raw/company_server/web/src/main/resources/template/tpl/common/%E5%BE%AE%E4%BF%A1.jpg) | ![](https://gitee.com/doc_wei01/skyeye/raw/company_server/web/src/main/resources/template/tpl/common/skyeye%E7%B3%BB%E5%88%97QQ%E7%BE%A4%E8%81%8A%E4%BA%8C%E7%BB%B4%E7%A0%81.png)| ![](https://gitee.com/doc_wei01/skyeye/raw/company_server/web/src/main/resources/template/tpl/common/%E7%9F%A5%E8%AF%86%E6%98%9F%E7%90%83.png) | ![](https://gitee.com/doc_wei01/skyeye/raw/company_server/web/src/main/resources/template/tpl/common/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220626095834.jpg) |

#### 文档参数
|key|参数|含义|
| ------------- | ------------- | ------------- |
|id|默认：null|初始化对象|
|width|默认：240|批注盒子默认宽度|
|userName|默认：skyeye|添加批注的用户的名称|
|userImage|默认：skyeye-editor/images/no-userphoto.png|添加批注的用户的logo|
|data|默认：[]|默认回显的数据|
|selectedElem|默认：null|当前选中的文本对象，`只供插件运行时使用`|
|addIconSrc|默认：skyeye-editor/images/add-icon.png|新增批注时展示的图标|
|whetherLoadData|默认：false|是否已经加载数据，根据数据的数量进行判断，`只供插件运行时使用`|
|resetContentBox|默认：true|是否重置内容对象宽度|
|annotateId|默认：null|批注盒子的id|
|addAnnotate|默认：true|是否可以添加新的批注
|edit|默认：true|是否可以编辑

#### 插件方法
|方法|入参介绍|含义|
| ------------- | ------------- | ------------- |
|$(dom).skyeyeAnnotate()|入参见上面文档参数|插件初始化方法|
|$(dom).getAnnotateData()|-|获取当前内容对象所有的批注数据|

#### 使用方法

```
// 初始化
var annotate = $("#container").skyeyeAnnotate({});
// 获取数据
var data = annotate.getAnnotateData();
```

#### 效果图
![输入图片说明](https://images.gitee.com/uploads/images/2020/0731/223527_99e760f7_1541735.png "屏幕截图.png")