vue3-rich-editor/dist/index.umd.js

A Vue 3 rich text editor component

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