@mention #hashtag And URL Highlighter – vue-highlights

Description:

vue-highlights is a Vue.js component that enables @metion, #hashtag, and URL highlighting in a contenteditable element.

Basic Usage:

1. Import and register the component.

import Vue from 'vue'
import VueHighlights, { autoLink, autoHighlight } from 'vue-highlights'
Vue.component(VueHighlights.name, VueHighlights)

2. Add the component to the app template.

<vue-highlights
  v-model="text"
/>
export default {
  name: 'MyComponent',
  data () {
    return {
      text: text
    }
  }
}

3. Available component props.

extractUrlsWithoutProtocol: {
  type: Boolean,
  default: true
},
caretColor: {
  type: String,
  default: '#ccc'
},
placeholder: {
  type: String,
  default: `What's Happening?`
},
value: String

Preview:

Download Details:

Author: pggalaviz

Live Demo: https://pggalaviz.github.io/vue-highlights/#/

Download Link: https://github.com/pggalaviz/vue-highlights/archive/refs/heads/master.zip

Official Website: https://github.com/pggalaviz/vue-highlights

Install & Download:

# Yarn
$ yarn add vue-highlights

# NPM
$ npm i vue-highlights

You Might Be Interested In:

Add Comment