use-textarea

A combined api for editable html and textarea

Installing

# use pnpm
$ pnpm install use-textarea

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

# use yarn
$ yarn add use-textarea

Usage

1. Simple use:

import useTextarea from 'use-textarea'

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

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

2. Using in vue3.x:

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

<script setup>
import { ref, onMounted } from 'vue'
import useTextarea from 'use-textarea'

const textareaRef = ref(null)
const textarea = useTextarea(textareaRef)

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

defineExpose({
  textareaRef
})
</script>

3. Using in vue2.7.x:

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

<script>
import useTextarea from 'use-textarea'

export default {
  setup() {
    const textareaRef = ref(null)
    const textarea = useTextarea(textareaRef)

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

    return {
      textareaRef,
      textarea
    }
  }
}
</script>

4. Use CDN resource

<script src="https://unpkg.com/vue-demi@latest/lib/index.iife.js"></script>
<script src="https://unpkg.com/use-textarea@1.0.0/dist/index.global.prod.js"></script>
<script>
  const textarea = useTextarea(document.getElementById('id'))
  // ...
</script>

Support & Issues

Please open an issue here.

License

MIT