editable-div

Create an editable div element, supports vue components

About

When I need the content of the input box to perform certain actions such as highlighting, I usually use the input, textarea elements. But we can't easily get the selected text from these elements and manipulate it. So we can use the contenteditable attribute, if you have tried it then I am sure you should encounter a lot of input problems. So to solve these difficulties I have implemented it! It's not that hard, but it's convenient

instalation

Both vue2 and vue3 support

# or
pnpm add editable-div
# or
npm install editable-div
# or
yarn add editable-div

Usage

Local Registra

<script setup>
import { ref } from "vue";
import EditableDiv from "editable-div";
const content = ref("");
</script>

<template>
    <EditableDiv class="container" :content="content" :limit="10"></EditableDiv>
</template>
<style>
.container {
  background: #fff;
  height: 100px;
  width: 200px;
}
</style>

Global Registration

import { createApp } from 'vue'
import EditableDiv from "editable-div"  

createApp()
  .use(EditableDiv)
  .mount('#app')

Examples

more example information, please check the playground

Props

| Name | Description | Type | Default | |------------|---------------------------|---------| ------- | | canEdit | allow edit the element | Boolean | true | | limit | allow limit max char number | Number | 999999 | | content(*) | the element content (v-model) | String | (required) | | renderHtml | render html into the element | Boolean | false | | row | set the element row number (eg: like textarea row attributes) | Number | 1 | | type | set the element type: input or textarea (eg: default) | String | input | | autogrow | when set the element as textarea, it will decide autogrow container box height | Boolean | false | | wrapperClass | inject class | String | "" |

tips: Attributes marked with * must be passed

License

MIT License © 2021-PRESENT tzyito