Editable-div NPM

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	""