vue-contenteditable

This plugin provides a element supporting v-model. It also provides some (optional) features, like preventing html input and paste, or new lines.

It is inpired by the nice (but limited by design) https://github.com/asconwe/vue-contenteditable-directive .

Contrary to vue-contenteditable-directive, this plugin has full support of v-model reactivity.

npm package : https://www.npmjs.com/package/vue-contenteditable

github repository : https://github.com/hl037/vue-contenteditable

Should you use a content editable ?

The response is generally "no".

But... there are edge cases where neither nor </code> could suit, for example when you need a dynamic object size to adapt to the user input text's size.</p><p class="my-3">------</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2></p><p class="my-3">NOTE : Versions 3.0.0+ are only compatible with VueJS v3+. For VueJS v2, please install the version 1.0.2.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">I recommand using pnpm + vite for any vue project. When using another package manager, you could encounter problems due to several Vue instances (errors like "Missing ref owner context"). Nevertheless, this package should work with any package manager.</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> pnpm add vue-contenteditable<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> yarn add vue-contenteditable<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> npm install --save vue-contenteditable<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The needed files are already provided in </code>dist/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, but if you want to re-build, simply run :</p><p class="my-3">Install the dependencies :<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />pnpm i<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Build and typescript declarations:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />pnpm build<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /> <script src="contenteditable.umd.js"></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">------</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Global registration</h2></p><p class="my-3">This is optionnal, and I would not do it myself, but you can register the </code>contenteditable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component globally so that you don't need to import it:</p><p class="my-3">In your </code>main.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> :</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import contenteditable from 'vue-contenteditable'<br />Vue.use(contenteditable)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage</h2></p><p class="my-3">For advance usages, please refer to the samples provided in the git repository. There are examples writen in js and ts, one using vue-cli, two using vite.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /><template><br /> <contenteditable tag="div" :contenteditable="isEditable" v-model="message" :no-nl="true" :no-html="true" @returned="enterPressed" /><br /></template><br /> <br /><script setup><br />import { defineProps, ref, computed, onMounted, watch } from 'vue';<br />import contenteditable from 'vue-contenteditable'; // Not needed it registered globally</p><p class="my-3">const isEditable = ref(true);<br />const message = ref("hello")</p><p class="my-3">function enterPressed(){<br /> alert('Enter Pressed');<br />}<br /></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /><template><br /> <contenteditable tag="div" :contenteditable="isEditable" v-model="message" :no-nl="true" :no-html="true" @returned="enterPressed" /><br /></template><br /> <br /><script><br />import contenteditable from 'vue-contenteditable'; // Not needed it registered globally<br />export default {<br /> components : {<br /> contenteditable<br /> }, // Not needed it registered globally<br /> data() {<br /> return {<br /> isEditable: true,<br /> message: "hello"<br /> }<br /> },<br /> methods : {<br /> enterPressed(){<br /> alert('Enter Pressed');<br /> }<br /> }<br />}<br /></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Prop name | Type | Default | Description<br />----------|------|---------|------------<br /></code>tag<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>"div"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Html element type (</code>p<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>div<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">...)<br /></code>v-model<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | | </code>v-model<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> as usually used with </code><input/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code><textarea/><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></code>contenteditable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Forwarded to DOM's </code>contenteditable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable.<br /></code>no-html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Prevent insertion (either typed or pasted) of html text<br /></code>no-nl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Prevent insertion of new-lines. Also activate </code>returned<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event emission</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>returned<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> When the user press <kbd>⏎</kbd> and </code>no-nl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is set, then it emits the </code>returned<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event with the current value (as a </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) as argument.</p><p class="my-3"> All js events on the element can be transparantly listened to (the sample projects provide an example).</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Changelogs</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br /> <br /> * Add String as contenteditable type (To support non-standard values)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"> * API <strong>breaking</strong> change : </code>noNL<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>noHTML<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> renamed to </code>noNl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>noHtml<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to enable using dashed prop names (</code>no-nl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>no-html` in templates).<br /> * Build with vite instead of vue-cli : simpler build and less dev dependencies<br /> * Smaller package (previous version bundled vue... Oops.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br /> <br /> * Vue 3 support<br /> * Typescript support</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">This code is provided as-is, under the terms of the MIT license (see License file for more details).</p><p class="my-3">A link to the original sources and contribution / pull request is welcome if you enjoy / use / contribute to this module ! :)</p><p class="my-3"></p><p class="my-3"></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2c:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@vitejs/plugin-vue\",{\"href\":\"/package/%40vitejs%2Fplugin-vue\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@vitejs/plugin-vue\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.3.3\"}]]}],[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.5.4\"}]]}],[\"$\",\"$L5\",\"vite\",{\"href\":\"/package/vite\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vite\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.9.9\"}]]}],[\"$\",\"$L5\",\"vue\",{\"href\":\"/package/vue\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vue\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.2.25\"}]]}],[\"$\",\"$L5\",\"vue-tsc\",{\"href\":\"/package/vue-tsc\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vue-tsc\"]}],\"$L2e\"]}]]}]}]\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.34.7\"}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>