master

分支 (1)

管理

管理

master

editorAnnotate
/
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title></title>
		<link href="skyeye-editor/css/skyeye-annotate.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div id="container">
			<div class="file_content markdown-body">
				<h1>
<a id="editorannotate" class="anchor" href="#editorannotate"></a>editorAnnotate</h1>
				<h4>
<a id="介绍" class="anchor" href="#%E4%BB%8B%E7%BB%8D"></a>介绍</h4>
				<p>skyeyeAnnotate是一款基于jQuery封装的HTML文章批注插件，帮助开发者轻松实现类似word的文本批注。我们需要在一个或多个网页中添加批注信息的时候这个插件可以简化我们许多工作。使用者可以随意选择文本进行批注以及批注回复，支持批注历史查看等功能。支持客户合同批注、试卷批阅等多种场景。</p>
				<h4>
<a id="软件架构" class="anchor" href="#%E8%BD%AF%E4%BB%B6%E6%9E%B6%E6%9E%84"></a>软件架构</h4>
				<p>基于jQuery封装的HTML批注插件。</p>
				<h4>
<a id="演示地址" class="anchor" href="#%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80"></a>演示地址</h4>
				<p>
					<a href="http://www.jq22.com/demo/editorAnnotate202008032310/" rel="nofollow">http://www.jq22.com/demo/editorAnnotate202008032310/</a>
				</p>
				<h4>
<a id="安装教程" class="anchor" href="#%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B"></a>安装教程</h4>
				<p>导入前端开发工具，运行index.html即可。</p>
				<h4>
<a id="交流" class="anchor" href="#%E4%BA%A4%E6%B5%81"></a>交流</h4>
				<ul>
					<li>该插件目前处于初始阶段，不断更新和维护</li>
					<li>如果问题请进去反馈或者题issues</li>
					<li>有问题请提Issues，优先回答Issues问题</li>
					<li>需要进微信群的，进微信群需要支付五元费用(加我拉你进群，wzq_598748873)，为了防止发广告的等，望谅解。</li>
					<li>别加了我微信说这说那的</li>
				</ul>
				<h4>
<a id="文档参数" class="anchor" href="#%E6%96%87%E6%A1%A3%E5%8F%82%E6%95%B0"></a>文档参数</h4>
				<table>
					<thead>
						<tr>
							<th>key</th>
							<th>参数</th>
							<th>含义</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>id</td>
							<td>默认：null</td>
							<td>初始化对象</td>
						</tr>
						<tr>
							<td>width</td>
							<td>默认：240</td>
							<td>批注盒子默认宽度</td>
						</tr>
						<tr>
							<td>userName</td>
							<td>默认：skyeye</td>
							<td>添加批注的用户的名称</td>
						</tr>
						<tr>
							<td>userImage</td>
							<td>默认：skyeye-editor/images/no-userphoto.png</td>
							<td>添加批注的用户的logo</td>
						</tr>
						<tr>
							<td>data</td>
							<td>默认：[]</td>
							<td>默认回显的数据</td>
						</tr>
						<tr>
							<td>selectedElem</td>
							<td>默认：null</td>
							<td>当前选中的文本对象，<code>只供插件运行时使用</code>
							</td>
						</tr>
						<tr>
							<td>addIconSrc</td>
							<td>默认：skyeye-editor/images/add-icon.png</td>
							<td>新增批注时展示的图标</td>
						</tr>
						<tr>
							<td>whetherLoadData</td>
							<td>默认：false</td>
							<td>是否已经加载数据，根据数据的数量进行判断，<code>只供插件运行时使用</code>
							</td>
						</tr>
						<tr>
							<td>resetContentBox</td>
							<td>默认：true</td>
							<td>是否重置内容对象宽度</td>
						</tr>
						<tr>
							<td>annotateId</td>
							<td>默认：null</td>
							<td>批注盒子的id</td>
						</tr>
					</tbody>
				</table>
				<h4>
<a id="插件方法" class="anchor" href="#%E6%8F%92%E4%BB%B6%E6%96%B9%E6%B3%95"></a>插件方法</h4>
				<table>
					<thead>
						<tr>
							<th>方法</th>
							<th>入参介绍</th>
							<th>含义</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>$(dom).skyeyeAnnotate()</td>
							<td>入参见上面文档参数</td>
							<td>插件初始化方法</td>
						</tr>
						<tr>
							<td>$(dom).getAnnotateData()</td>
							<td>-</td>
							<td>获取当前内容对象所有的批注数据</td>
						</tr>
					</tbody>
				</table>
				<h4>
<a id="使用方法" class="anchor" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"></a>使用方法</h4>
				<div class="monokai">
					<div class="highlight"><pre><span id="LC1" class="line">// 初始化</span>
<span id="LC2" class="line">var annotate = $("#container").skyeyeAnnotate({});</span>
<span id="LC3" class="line">// 获取数据</span>
<span id="LC4" class="line">var data = annotate.getAnnotateData();</span></pre></div>
				</div>
				<h4>
<a id="效果图" class="anchor" href="#%E6%95%88%E6%9E%9C%E5%9B%BE"></a>效果图</h4>
				<p><img src="https://images.gitee.com/uploads/images/2020/0731/223527_99e760f7_1541735.png" style="width: 150px;" alt="输入图片说明" title="屏幕截图.png"></p>
				<h3>
<a id="捐助" class="anchor" href="#%E6%8D%90%E5%8A%A9"></a>捐助</h3>
				<p>如果您觉得我们的开源软件对你有所帮助，请扫下方二维码打赏我们一杯咖啡。</p>
				<table>
					<thead>
						<tr>
							<th>支付宝</th>
							<th>微信</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><img src="https://images.gitee.com/uploads/images/2019/1016/094014_96f92c56_1541735.png" style="width: 150px;" alt="      " title="微信截图_20191016093832.png"></td>
							<td><img src="https://images.gitee.com/uploads/images/2019/1016/094025_65ba24f0_1541735.png" style="width: 150px;" alt="     " title="微信截图_20191016093850.png"></td>
						</tr>
					</tbody>
				</table>
			</div>
			<button id="getData">获取数据</button>
		</div>
		<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="skyeye-editor/js/rangy-core.js"></script>
		<script type="text/javascript" src="skyeye-editor/js/rangy-cssclassapplier.js"></script>
		<script type="text/javascript" src="skyeye-editor/js/skyeye-annotate.js"></script>
		<script type="text/javascript">
			$(function() {
				var annotate = $("#container").skyeyeAnnotate({
					data: [
					    {
					        "selectText":"nnotate介绍",
					        "annoTateContent":"驱蚊器翁",
					        "annoId":"1291659754392732",
					        "zIndex":1,
					        "startAdd":"7",
					        "endAdd":"16",
					        "textLength":"0",
					        "insId":"1607489683589",
					        "userImage":"skyeye-editor/images/no-userphoto.png",
					        "userName":"skyeye",
					        "createDate":"2020-12-09 12:54:43",
					        "marginTop":46
					    },
					    {
					        "selectText":"以及批注回复，支持批注历史查看等功能。支持客户合同批注、试卷批阅等多种场景。软件架",
					        "annoTateContent":"奥术大师多",
					        "annoId":"7808926659864837",
					        "zIndex":4,
					        "startAdd":"128",
					        "endAdd":"170",
					        "textLength":"0",
					        "insId":"1607489687147",
					        "userImage":"skyeye-editor/images/no-userphoto.png",
					        "userName":"skyeye",
					        "createDate":"2020-12-09 12:54:47",
					        "marginTop":167
					    },
					    {
					        "selectText":"skyeye添加批注",
					        "annoTateContent":"test",
					        "annoId":"6763125142302167",
					        "zIndex":7,
					        "startAdd":"464",
					        "endAdd":"474",
					        "textLength":"0",
					        "insId":"1607494941921",
					        "userImage":"skyeye-editor/images/no-userphoto.png",
					        "userName":"skyeye",
					        "createDate":"2020-12-09 14:22:21",
					        "marginTop":734
					    }
					]
				});

				$("body").on("click", "#getData", function(e) {
					var data = annotate.getAnnotateData();
					console.log(JSON.stringify(data))
				});

				//				console.log(annotate)
			});
		</script>
	</body>

</html>