Package Exports

vue-hashtag-textarea

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-hashtag-textarea) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Options	Type	Description	Default
defaultContent	String	insert initial text	''
textColor	String	ordinary text color	black
font	String	wave height	14px "Noto Sans Japanese", sans-serif
hashtagBackgroundColor	String	background color on hashtag	transparent
hashtagColor	String	hashtag color	#ff0000
placeholder	String	placeholder on empty	Sentence for placeholder #place #holder
isEditMode	Boolean	true: enable to edit but cannot select hashtag false: enable to select hashtag but cannot edit	true

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

Values	Type	Description
target	String	focusing hashtag
hashtags	Array	hashtag list in the sentence

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

Chrome	Safari	IE / Edge	Firefox	Opera
72+	12+	?	65+	?

Mobile

Android webview	Chrome for Android	Safari on iOS	Edge Mobile	Firefox for Android	Opera for Android	Samsung Internet
?	?	12+	?	?	?	?

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