text-remark

JS Document annotation Base Library 文本注释标注基础库 See in github

How to use 如何使用

// init textRemark
const textRemark = new TextRemark({
  container: '#mark',
  text: 'Text annotation test',
  /*
  Remarks is the marked data information, which has four fields: start position(baseoffset), end position(extentoffset), type and JSON data.Where type will be added to CSS marked with DOM tag <span data-type="danger" data-index="0" class="text-remark-tag text-remark-danger">this metting</span>,Data can be obtained in the remark selected event of textremark
  */
 /*
  remarks为标注的数据信息，有四个字段，开始位置baseOffset、结束位置extentOffset、类型、json数据
  其中type会添加到标注dom标签的css上 <span data-type="danger" data-index="0" class="text-remark-tag text-remark-danger">此次会议</span>
  data在 textRemark的remark-selected事件中，可以拿到
 */

  remarks: [
    {
      baseOffset: 4,
      extentOffset: 8,
      type: 'danger',
      data: { text: 'this is a remark' }
    },
    {
      baseOffset: 694,
      extentOffset: 699,
      type: 'normal',
      data: { text: 'this is another remark' }
    }
  ]
})

Start demo

demo based vue. Download code，Enter the example directory
demo 基于 vue 完成。下载代码，进入 example 后

npm i
npm start

方法

| 方法 | 描述 | 其它 | | ----------------- | --------------------------------------- | ---------------------------------------------------------------- | | addRemark | 添加标注 addRemark(type, data = {}) | Data is saved in json,data 会保存到 json 中 | | removeRemark | 移出标注 removeRemark(index) | index 为索引号 | | updateRemark | 更新标注 updateRemark(index, data={}) | index 为索引号，data is a object data | | getJson | 获取组件 json 数据 {text:'',remarks:[]} | get json | | clearActive | 清除选中状态 clearActive() | 组件重写默认的选中状态，光标 blur 的时候无法清除，利用该方法清除 | | setSelectedRemark | 设置选中状态 setSelectedRemark(index) | 设置第几个 mark 为选中 | | updateShowText | 更新显示的文本 updateShowText() | 强制更新标注显示 |

事件

| 事件 | 描述 | 其它 | | --------------- | ------------------------------------------------------------- | ---------------------------------- | | remark-selected | textRemark.on('remark-selected', function(e){console.log(e)}) | 选中标记的 remark 时，会触发该方法 |