vue-contenteditable
Version:
This plugin provides a `<contenteditable/>` element supporting `v-model`. It also provides some (optional) features, like preventing html input and paste, or new lines.
4 lines (3 loc) • 1.54 kB
JavaScript
(function(t,i){typeof exports=="object"&&typeof module!="undefined"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(t=typeof globalThis!="undefined"?globalThis:t||self,t.contenteditable=i(t.Vue))})(this,function(t){"use strict";return t.defineComponent({__name:"contenteditable",props:{tag:String,contenteditable:{type:[Boolean,String],default:!0},modelValue:String,noHtml:{type:Boolean,default:!0},noNl:{type:Boolean,default:!1}},emits:{returned:String,"update:modelValue":String},setup(r,{emit:c}){const o=r;function d(e,n,l){return e.split(n).join(l)}const a=t.ref();function f(){return o.noHtml?a.value.innerText:a.value.innerHTML}function u(e){o.noHtml?a.value.innerText=e:a.value.innerHTML=e}function p(e){c("update:modelValue",f())}function s(e){e.preventDefault();let n=(e.originalEvent||e).clipboardData.getData("text/plain");o.noNl&&(n=d(n,`\r
`," "),n=d(n,`
`," "),n=d(n,"\r"," ")),window.document.execCommand("insertText",!1,n)}function m(e){e.key=="Enter"&&o.noNl&&(e.preventDefault(),c("returned",f()))}return t.onMounted(()=>{var e;u((e=o.modelValue)!=null?e:"")}),t.watch(()=>o.modelValue,(e,n)=>{e!=f()&&u(e!=null?e:"")}),t.watch(()=>o.noHtml,(e,n)=>{var l;u((l=o.modelValue)!=null?l:"")}),t.watch(()=>o.tag,(e,n)=>{var l;u((l=o.modelValue)!=null?l:"")},{flush:"post"}),(e,n)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(r.tag),{contenteditable:r.contenteditable,onInput:p,onBlur:p,onPaste:s,onKeypress:m,ref_key:"element",ref:a},null,40,["contenteditable"]))}})});