Create an editable div element, supports vue components
Create an editable div element, supports vue2 & vue3 (🚀powered by vue-demi)
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
Both vue2 and vue3 support
# or
pnpm add editable-div
# or
npm install editable-div
# or
yarn add editable-div<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>
import { createApp } from 'vue'
import EditableDiv from "editable-div"
createApp()
.use(EditableDiv)
.mount('#app')Only two lines of code are needed
like the native input or textarea element
Can automatically extend
you can do whatever you want in there (eg: Enhance your text by highlighting it.)
more example information, please check the playground
| 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