https://github.com/ashubham/markee

Visual text selection
https://github.com/ashubham/markee

caret cursor highlight selection

Last synced: 12 months ago
JSON representation

Visual text selection

• Host: GitHub
• URL: https://github.com/ashubham/markee
• Owner: ashubham
• License: mit
• Created: 2018-02-03T05:26:31.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-02-15T23:34:08.000Z (about 7 years ago)
• Last Synced: 2025-04-28T23:44:47.520Z (12 months ago)
• Topics: caret, cursor, highlight, selection
• Language: TypeScript
• Homepage:
• Size: 580 KB
• Stars: 25
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![](https://github.com/ashubham/markee/raw/master/assets/Markee.gif)

# Markee

[![Build Status](https://travis-ci.org/ashubham/markee.svg?branch=master)](https://travis-ci.org/ashubham/markee)

[![npm version](https://badge.fury.io/js/markee.svg)](https://badge.fury.io/js/markee)

- [Demo](https://codepen.io/ashubham/pen/yveGyq?editors=0110) 

## Features

- Pure Javascript (Uses No JQuery or Frameworks).

    - But can be used with any.

- Lightweight

- Typescript (Types included).

- Fully customizable using CSS.

- Works in Chrome, Safari, IE, Firefox.

## Simple usage

```html



```

```javascript

import Markee from 'markee';


let el = document.getElementById('input');

let markee = new Markee(el /* Target element */, {

	initialText: 'You can simply highlight, what you wish using these handles!',

	onMarked: (text, startIdx, endIdx) => {

        // Callback when some one changes the 

        // marked selection.

		console.log(text, startIdx, endIdx);

	}

});

```

## Options

```typescript

let markee = new Markee(el, {

    initialText: '',  // text to be made markeeable.

    startIdx: 0,      // Start of initial selection.

    endIdx: 1,        // End of initial selection.

    

    /* The callback which is called when a user changes the marked selection. */

    onMarked: (text: string,  // selected text.

        startIdx: number,     // index of the start.

        endIdx: number),      // index of the end.

    

    onDrag: (beginMarker: HTMLElement,

             endMarker: HTMLElement), // Called when a handle is dragged.

    

    markerClass: 'marker',      // CSS class for drag handle.

    tokenClass: 'token',        // CSS class for text token.

    beginClass: 'begin',        // CSS class for the begin marker.

    endClass: 'end',            // CSS class for the end marker.

    selectedClass: 'selected',  // CSS class for the marked selection.

    draggedClass: 'dragged',    // CSS class for the drag handle when being dragged.

})

```