vue3-rich-editor
Version:
A Vue 3 rich text editor component
2 lines (1 loc) • 4.63 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),A={class:"rich-text-editor"},R={class:"toolbar"},q=["value"],D=["innerHTML"],L=n.defineComponent({__name:"Vue3RichEditor",props:{value:{}},emits:["update-html"],setup(d,{emit:f}){const m=f;let l=null;const p=[8,9,10,11,12,14,16,18,20,24,28,32,36,48,72];function S(t){m("update-html",t.target.innerHTML)}function r(){const t=window.getSelection();t&&t.rangeCount>0&&(l=t.getRangeAt(0))}function i(){if(!l)return;const t=window.getSelection();t&&(t.removeAllRanges(),t.addRange(l))}function v(){if(!l)return;const t=l.cloneContents();if(!t||!t.firstChild)return;const e=document.createElement("span");e.style.fontSize="0",e.appendChild(t),l.deleteContents(),l.insertNode(e),l.selectNode(e)}function x(t){const e=t.target;if(!e.value)return;const o=parseFloat(e.value);isNaN(o)||o<=0||E(o)}function E(t){i(),v(),i(),document.queryCommandSupported("styleWithCSS")&&document.execCommand("styleWithCSS",!1,"true"),document.execCommand("fontSize",!1,"7");const e=document.querySelector(".editor");e&&(e.querySelectorAll('font[size="7"]').forEach(o=>{o.removeAttribute("size"),o.style.fontSize=t+"px"}),e.querySelectorAll('span[style*="font-size"]').forEach(o=>{const c=o.style.fontSize.toLowerCase().trim();(c.includes("large")||c.includes("small"))&&(o.style.fontSize=t+"px")}))}function g(t,e){i();const o=t.target;o.value&&(document.queryCommandSupported("styleWithCSS")&&document.execCommand("styleWithCSS",!1,"true"),e==="color"?document.execCommand("foreColor",!1,o.value):document.queryCommandSupported("hiliteColor")?document.execCommand("hiliteColor",!1,o.value):document.execCommand("backColor",!1,o.value))}function b(){i(),document.execCommand("bold",!1)}function N(){i(),document.execCommand("italic",!1)}function V(){i(),document.execCommand("underline",!1)}function w(){i(),document.execCommand("strikeThrough",!1)}function C(t){switch(i(),t){case"left":document.execCommand("justifyLeft",!1);break;case"center":document.execCommand("justifyCenter",!1);break;case"right":document.execCommand("justifyRight",!1);break}}const k=["color","background-color","font-size","font-style","font-weight","text-decoration"];function M(t){const e=t.querySelectorAll("*");Array.from(e).forEach(o=>{const c=o,a=document.createElement("div");for(k.forEach(s=>{const u=c.style[s];u&&(a.style.cssText+=`${s}: ${u};`)});c.firstChild;)a.appendChild(c.firstChild);c.replaceWith(a)})}function z(t){t.preventDefault();const e=t.clipboardData;if(!e)return;const o=e.getData("text/html")||e.getData("text/plain"),a=new DOMParser().parseFromString(o,"text/html");M(a.body);const s=window.getSelection();if(s&&s.rangeCount>0){const u=s.getRangeAt(0);u.deleteContents();const h=document.createDocumentFragment();Array.from(a.body.childNodes).forEach(T=>h.appendChild(T)),u.insertNode(h)}}return(t,e)=>(n.openBlock(),n.createElementBlock("div",A,[n.createElementVNode("div",R,[n.createElementVNode("label",null,[e[5]||(e[5]=n.createTextVNode(" 文字顏色： ")),n.createElementVNode("input",{type:"color",onMousedown:r,onInput:e[0]||(e[0]=o=>g(o,"color"))},null,32)]),n.createElementVNode("label",null,[e[6]||(e[6]=n.createTextVNode(" 背景顏色： ")),n.createElementVNode("input",{type:"color",onMousedown:r,onInput:e[1]||(e[1]=o=>g(o,"background-color"))},null,32)]),n.createElementVNode("label",null,[e[7]||(e[7]=n.createTextVNode(" 字體大小： ")),n.createElementVNode("select",{onMousedown:n.withModifiers(r,["stop"]),onChange:x},[(n.openBlock(),n.createElementBlock(n.Fragment,null,n.renderList(p,o=>n.createElementVNode("option",{key:o,value:o},n.toDisplayString(o)+"px",9,q)),64))],32)]),n.createElementVNode("button",{onMousedown:r,onClick:b},"粗體",32),n.createElementVNode("button",{onMousedown:r,onClick:N},"斜體",32),n.createElementVNode("button",{onMousedown:r,onClick:V},"下劃線",32),n.createElementVNode("button",{onMousedown:r,onClick:w},"刪除線",32),n.createElementVNode("button",{onMousedown:r,onClick:e[2]||(e[2]=o=>C("left"))},"靠左",32),n.createElementVNode("button",{onMousedown:r,onClick:e[3]||(e[3]=o=>C("center"))},"置中",32),n.createElementVNode("button",{onMousedown:r,onClick:e[4]||(e[4]=o=>C("right"))},"靠右",32)]),n.createElementVNode("div",{class:"editor",contenteditable:"true",innerHTML:t.value,onInput:S,onPaste:z,style:{"min-height":"120px"}},null,40,D)]))}}),F=(d,f)=>{const m=d.__vccOpts||d;for(const[l,p]of f)m[l]=p;return m},y=F(L,[["__scopeId","data-v-b6f7478c"]]),_={install(d){d.component("Vue3RichEditor",y)}};exports.Vue3RichEditor=y;exports.default=_;