vue-hashtag-textarea

Highlight hashtags on Vue.js module

Features

• Highlight hastags in textarea
• Resize textarea automatically
• Notify inputting hashtag in realtime
• Support japanese.

Desktop	Mobile

Getting started

Download

Via npm

$ npm install vue-hashtag-textarea --save

Usage

ES6 modules

import VueHashtagTextarea from 'vue-hashtag-textarea';

Vue file

import VueHashtagTextarea from '/path/to/vue-hashtag-textarea.vue';

Hello world

<template>
  <div class="container">
    <vue-hashtag-textarea />
  <div>  
</template>

<script>
  import VueHashtagTextarea from 'vue-hashtag-textarea'
  export default {
    components: {
      VueHashtagTextarea,
    }
  }
</script>

Options

Supported Functions

replaceHashtagNodeContent(content)

Argument

• content : String

Description

Replace focused hashtag to new hashtag. Please note that the content shouled include hashtag "#" at the head of the word. In addition, if the caret in the textarea is not on one of hashtags, no hashtag is replaced.

Example

<template>
  <div class="container">
    <vue-hashtag-textarea
      ref="vueHashtagTextarea" />
  <div>  
</template>

<script>
  import VueHashtagTextarea from 'vue-hashtag-textarea'
  export default {
    components: {
      VueHashtagTextarea,
    },
    methods: {
      someEventTrigger() {
        this.$refs.vueHashtagTextarea.replaceHashtagNodeContent('#somehashtag ')
      }
    }
  }
</script>

Callback

onChangeHashtag(obj)

Argument

• obj : Object

Description

Everytime hashtags is inputed in vue-hashtag-textarea, values including whole hashtags and current focusing hashtag will be notified by this callback function. If caret is not at hashtag, this callback doesn't be fired.

Example

<template>
  <div class="container">
    <vue-hashtag-textarea
      v-on:onChangeHashtag="onChangeHashtag" />
  <div>  
</template>

<script>
  import VueHashtagTextarea from 'vue-hashtag-textarea'
  export default {
    methods: {
      onChangeHashtag(obj) {
        // NOTE: Everytime hashtags is inputed in vue-hashtag-textarea,
        //       values will be callbacked in this scope
      }
    }
  }
</script>

onSelectHashtag(content)

Argument

• content : String

Description

When hashtag element is selected, this callback function will be fired with the specific hashtag.

Example

<template>
  <div class="container">
    <vue-hashtag-textarea
      :option=option
      v-on:onSelectHashtag="onSelectHashtag" />
  <div>  
</template>

<script>
  import VueHashtagTextarea from 'vue-hashtag-textarea'
  export default {
    data() {
      return {
        option: {
          isEditMode: false
        }
      }
    },
    components: {
      VueHashtagTextarea,
    },
    methods: {
      onSelecthashtag(content) {
        // TODO:
      }
    }
  }
</script>

Browser support

Desktop

Mobile

NOTE

If debugging iOS devices on chrome dev tools, the layout will be failed. In that case, recommend to use Safari browser instead.

Quick Start

git clone https://github.com/mitsuyacider/vue-hashtag-textarea
cd vue-hashtag-textarea
npm install
vue serve example/App.vue

License

MIT