grace-textarea's Introduction

grace-textarea

A composition api for textarea

Documentation • Change Log

Installing

# use pnpm
$ pnpm install grace-textarea

# use npm
$ npm install grace-textarea --save

# use yarn
$ yarn add grace-textarea

Usage

Simple use:

import Textarea from 'grace-textarea'

const element = document.getElementById('text-area')
const textarea = new Textarea(element)

textarea.insert('I am insert text')
textarea.moveToEnd() // move cursors to end

Using in vue3.x:

<template>
  <textarea name="textarea" ref="textareaRef"></textarea>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import GraceTextarea from 'grace-textarea'

const textareaRef = ref(null)
const textarea = new GraceTextarea(textareaRef)

onMounted(() => {
  textarea.insert('I am insert text')
  textarea.moveToEnd() // move cursors to end
})

defineExpose({
  textareaRef
})
</script>

Using in vue2.x:

<template>
  <textarea name="textarea" ref="textareaRef"></textarea>
</template>

<script>
export default {
  mounted() {
    const textarea = new GraceTextarea(this.$refs.textareaRef)

    textarea.insert('I am insert text')
    textarea.moveToEnd() // move cursors to end
  }
}
</script>

Using unpkg CDN:

<script src="https://unpkg.com/[email protected]/dist/index.global.prod.js"></script>
<script>
  const textarea = new GraceTextarea(document.getElementById('id'))
  // ...
</script>