All Projects → luoqiling → mark.js

luoqiling / mark.js

Licence: other
mark.js用于标记选中的文字,自定义插入标签

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to mark.js

angular-gulp-starter
Simple dev/prod build for Angular (2+) using gulp, systemjs, rollup, ngc (AOT), scss, Visual Studio
Stars: ✭ 18 (-33.33%)
Mutual labels:  gulp, rollup
bymattlee-11ty-starter
A starter boilerplate powered by 11ty, Sanity, Gulp, Tailwind CSS, rollup.js, Alpine.js and Highway.
Stars: ✭ 27 (+0%)
Mutual labels:  gulp, rollup
postcss-font-grabber
A postcss plugin, it grabs remote font files and update your CSS, just like that.
Stars: ✭ 26 (-3.7%)
Mutual labels:  gulp, rollup
fly-helper
It's a Tool library, method collection
Stars: ✭ 21 (-22.22%)
Mutual labels:  gulp, rollup
Front End Tooling Recipes
Collection of pre-configured front-end tooling setups for common uses.
Stars: ✭ 176 (+551.85%)
Mutual labels:  gulp, rollup
gw-starter-kit
PEPELAC - Современный инструментарий для вёрстки и создания статичных сайтов с использованием Webpack
Stars: ✭ 30 (+11.11%)
Mutual labels:  gulp
is-my-train-delayed
An Angular web app built on Heroku with Node & Express. Shows information about delayed trains, and displays that in an easily consumable manner.
Stars: ✭ 15 (-44.44%)
Mutual labels:  gulp
rollit
🌯 Zero config js library bundling using rollup with support for Vue
Stars: ✭ 24 (-11.11%)
Mutual labels:  rollup
yunle-template-gatsby
yunle-cli 前端开发模板- gatsby 专为静态SEO页面开发
Stars: ✭ 13 (-51.85%)
Mutual labels:  gulp
motion-hooks
A simple Hooks wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
Stars: ✭ 93 (+244.44%)
Mutual labels:  rollup
rollup-plugin-lit-css
Moved to https://github.com/bennypowers/lit-css
Stars: ✭ 35 (+29.63%)
Mutual labels:  rollup
sage-starter
The best starter theme with a modern front-end development workflow. Based on Sage, HTML5 Boilerplate, gulp, Bower, and Bootstrap.
Stars: ✭ 42 (+55.56%)
Mutual labels:  gulp
luya-kickstarter-bootstrap4
LUYA boilerplate to kickstart projects with Bootstrap 4.
Stars: ✭ 13 (-51.85%)
Mutual labels:  gulp
nativescript-vue-rollup-template
A NativeScript template ready to roll with Vue.js and .vue files.
Stars: ✭ 39 (+44.44%)
Mutual labels:  rollup
balm
🃏 An universal Front-End workflow for webapps
Stars: ✭ 26 (-3.7%)
Mutual labels:  gulp
angularJS
这个仓库提供git使用教程 gulp使用教程 angularJS入门->进阶 的教程
Stars: ✭ 61 (+125.93%)
Mutual labels:  gulp
gulp
Gulp Türkçe Çeviri
Stars: ✭ 37 (+37.04%)
Mutual labels:  gulp
gulp-reporter
Error report for: CSSLint/EditorConfig/ESLint/HTMLHint/JSCS/JSHint/PostCSS/Standard/TSLint/XO
Stars: ✭ 17 (-37.04%)
Mutual labels:  gulp
fliphub
the easiest app builder
Stars: ✭ 30 (+11.11%)
Mutual labels:  rollup
website-template
静的Webサイト制作を少しモダンにするためのテンプレート
Stars: ✭ 62 (+129.63%)
Mutual labels:  gulp

mark.js

简介

mark.js可用于标记选中的文字,目前提供的标记类型有文字涂改、文字缺漏、文字删除和文字互换。

结合工具draw可以标记文章中的图片和视频。

预览

校对(PC端/移动端):请狠狠地点这里

自定义插入标签(PC端):请狠狠地点这里

示例

const m = new Mark(document.querySelector('xxx'), {
  tagName: 'mark'
})

// 自动标记
m.automark(dataList)

// 文字涂改、文字缺漏
const data = m.mark('modify')

// 文字删除
const data = m.mark('delete')

// 文字互换
const data = m.mark('exchange', { points })

标记数据

{
  content: string       // 选中文字
  startOffset: number   // 光标起点
  endOffset: number     // 光标结点
  length: number        // 选中文字的长度
  points: number[]      // 选中文字的互换位置
  key: string           // 唯一标识
  type: string          // 标记类型
}

命令行

# 本地运行
yarn serve

# 构建开发环境包
yarn build:dev

# 构建生产环境包
yarn build

# 代码格式检查并自动修复
yarn lint
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].