@ibiz-template/vue3-components 0.2.18-dev.2 → 0.3.0

package/dist/wang-editor-pmyVfXCg.js

@@ -1,2 +0,0 @@
-System.register(["vue","@wangeditor/editor-for-vue","qx-util","ramda","@ibiz-template/vue3-util","@ibiz-template/core"],function(N){"use strict";var c,d,i,u,m,f,s,h,g,v,C,p,b,y,E;return{setters:[function(o){c=o.defineComponent,d=o.shallowRef,i=o.ref,u=o.watch,m=o.onBeforeUnmount,f=o.onMounted,s=o.createVNode},function(o){h=o.Toolbar,g=o.Editor},function(o){v=o.getCookie},function(o){C=o.isNil},function(o){p=o.getHtmlProps,b=o.getEditorEmits,y=o.useNamespace},function(o){E=o.CoreConst}],execute:function(){const o=N("default",c({name:"IBizHtml",props:p(),emits:b(),setup(n,{emit:O}){const L=y("html"),F=n.controller,r=d(),a=i(""),P=i({Authorization:`Bearer ${v(E.TOKEN)}`}),k=i(""),U=i("");u(()=>n.data,e=>{if(e){const t=F.calcBaseUrl(e);k.value=t.uploadUrl,U.value=t.downloadUrl}},{immediate:!0,deep:!0});const x=(e,t)=>{if(t)return!0},H=e=>e,z={excludeKeys:["group-video"]},T={placeholder:F.placeHolder,readOnly:n.readonly,MENU_CONF:{uploadImage:{server:k.value,fieldName:"file",maxFileSize:10*1024*1024,maxNumberOfFiles:10,allowedFileTypes:[],headers:P.value,withCredentials:!0,onBeforeUpload(e){return e},onProgress(e){console.log("progress",e)},onSuccess(e,t){console.log(`${e.name} \u4E0A\u4F20\u6210\u529F`,t)},onFailed(e,t){console.log(`${e.name} \u4E0A\u4F20\u5931\u8D25`,t)},onError(e,t,l){console.log(`${e.name} \u4E0A\u4F20\u51FA\u9519`,t,l)},async customInsert(e,t){const l=U.value.replace("%fileId%",e.id),q=e.filename;t(l,q,"")}},insertLink:{checkLink:x,parseLinkUrl:H},editLink:{checkLink:x,parseLinkUrl:H}}};m(()=>{const e=r.value;e?.destroy()});const $=e=>{r.value=e,e.setHtml(a.value)},w=e=>{const t=e.getHtml(),l=t==="<p><br></p>"?"":t;l===n.value||l===""&&C(n.value)||O("change",l)},D=e=>{},I=e=>{},R=e=>{},_=(e,t)=>{alert(`\u3010\u81EA\u5B9A\u4E49\u63D0\u793A\u3011${t} - ${e}`)},M=(e,t,l)=>{l(!0)},S=e=>{const t=r.value;t?.insertText(e)},K=()=>{const e=r.value;e!=null&&console.log(e.getHtml())},A=()=>{const e=r.value;e?.disable()},B=()=>{const e=r.value;e?.enable()};return f(()=>{u(()=>n.value,(e,t)=>{e!==t&&(typeof n.value=="string"||e===null)&&(e===null?a.value="":a.value=e)},{immediate:!0}),u(()=>n.disabled,(e,t)=>{e!==t&&(e===!0?A():B())},{immediate:!0})}),{ns:L,editorRef:r,mode:"default",valueHtml:a,toolbarConfig:z,editorConfig:T,handleCreated:$,handleChange:w,handleDestroyed:D,handleFocus:I,handleBlur:R,customAlert:_,customPaste:M,insertText:S,printHtml:K,disable:A,enable:B}},render(){return s("div",{class:this.ns.b()},[s("div",{style:"border: 1px solid #ccc; margin-top: 10px"},[s(h,{editor:this.editorRef,"default-config":this.toolbarConfig,mode:this.mode,style:"border-bottom: 1px solid #ccc"},null),s(g,{modelValue:this.valueHtml,"onUpdate:modelValue":n=>this.valueHtml=n,"default-config":this.editorConfig,mode:this.mode,style:"height: 400px; overflow-y: hidden",onOnCreated:this.handleCreated,onOnChange:this.handleChange,onOnDestroyed:this.handleDestroyed,onOnFocus:this.handleFocus,onOnBlur:this.handleBlur,oncustomAlert:this.customAlert,oncustomPaste:this.customPaste},null)])])}}))}}});
-//# sourceMappingURL=wang-editor-pmyVfXCg.js.map

package/dist/wang-editor-pmyVfXCg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"wang-editor-pmyVfXCg.js","sources":["../src/editor/html/wang-editor/wang-editor.tsx"],"sourcesContent":["import {\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  onMounted,\n  watch,\n  Ref,\n  defineComponent,\n} from 'vue';\nimport { Editor, Toolbar } from '@wangeditor/editor-for-vue';\nimport { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';\nimport type { IDomEditor } from '@wangeditor/editor';\nimport { getCookie } from 'qx-util';\nimport { isNil } from 'ramda';\nimport {\n  getEditorEmits,\n  getHtmlProps,\n  useNamespace,\n} from '@ibiz-template/vue3-util';\nimport { CoreConst } from '@ibiz-template/core';\nimport { HtmlEditorController } from '../html-editor.controller';\nimport './wang-editor.scss';\n\ntype InsertFnType = (_url: string, _alt: string, _href: string) => void;\n\nconst IBizHtml = defineComponent({\n  name: 'IBizHtml',\n  props: getHtmlProps<HtmlEditorController>(),\n  emits: getEditorEmits(),\n  setup(props, { emit }) {\n    const ns = useNamespace('html');\n\n    const c = props.controller!;\n\n    // 编辑器实例，必须用 shallowRef，重要！\n    const editorRef = shallowRef();\n\n    // 内容 HTML\n    const valueHtml = ref('');\n\n    // 请求头\n    const headers: Ref<IData> = ref({\n      Authorization: `Bearer ${getCookie(CoreConst.TOKEN)}`,\n    });\n\n    // 上传文件路径\n    const uploadUrl: Ref<string> = ref('');\n\n    // 下载文件路径\n    const downloadUrl: Ref<string> = ref('');\n\n    // data响应式变更基础路径\n    watch(\n      () => props.data,\n      newVal => {\n        if (newVal) {\n          const urls = c.calcBaseUrl(newVal);\n          uploadUrl.value = urls.uploadUrl;\n          downloadUrl.value = urls.downloadUrl;\n        }\n      },\n      { immediate: true, deep: true },\n    );\n\n    // 自定义校验链接\n    const customCheckLinkFn = (\n      text: string,\n      url: string,\n    ): string | boolean | undefined => {\n      if (!url) {\n        return;\n      }\n      // if (url.indexOf('http') !== 0) {\n      //   return '链接必须以 http/https 开头';\n      // }\n      return true;\n\n      // 返回值有三种选择：\n      // 1. 返回 true ，说明检查通过，编辑器将正常插入链接\n      // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）\n      // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息\n    };\n\n    // 自定义转换链接 url\n    const customParseLinkUrl = (url: string): string => {\n      // if (url.indexOf('http') !== 0) {\n      //   return `http://${url}`;\n      // }\n      return url;\n    };\n\n    // 工具栏配置\n    const toolbarConfig: Partial<IToolbarConfig> = {\n      excludeKeys: ['group-video'],\n    };\n\n    // 编辑器配置\n    const editorConfig: Partial<IEditorConfig> = {\n      placeholder: c.placeHolder,\n      readOnly: props.readonly,\n      MENU_CONF: {\n        // 图片上传\n        uploadImage: {\n          // 上传地址\n          server: uploadUrl.value,\n\n          // form-data fieldName ，默认值 'wangeditor-uploaded-image'\n          fieldName: 'file',\n\n          // 单个文件的最大体积限制，默认为 2M\n          maxFileSize: 10 * 1024 * 1024, // 10M\n\n          // 最多可上传几个文件，默认为 100\n          maxNumberOfFiles: 10,\n\n          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []\n          allowedFileTypes: [],\n\n          // 自定义增加 http  header\n          headers: headers.value,\n\n          // 跨域是否传递 cookie ，默认为 false\n          withCredentials: true,\n\n          // 上传之前触发\n          onBeforeUpload(file: File) {\n            // TS 语法\n            // onBeforeUpload(file) {    // JS 语法\n            // file 选中的文件，格式如 { key: file }\n            return file;\n\n            // 可以 return\n            // 1. return file 或者 new 一个 file ，接下来将上传\n            // 2. return false ，不上传这个 file\n          },\n\n          // 上传进度的回调函数\n          onProgress(progress: number) {\n            console.log('progress', progress);\n          },\n\n          // 单个文件上传成功之后\n          onSuccess(file: File, res: IData) {\n            console.log(`${file.name} 上传成功`, res);\n          },\n\n          // 单个文件上传失败\n          onFailed(file: File, res: IData) {\n            console.log(`${file.name} 上传失败`, res);\n          },\n\n          // 上传错误，或者触发 timeout 超时\n          onError(file: File, err: IData, res: IData) {\n            console.log(`${file.name} 上传出错`, err, res);\n          },\n\n          // 自定义插入图片\n          async customInsert(res: IData, insertFn: InsertFnType) {\n            const url = downloadUrl.value.replace('%fileId%', res.id);\n            const alt = res.filename;\n            // 从 res 中找到 url alt href ，然后插入图片\n            insertFn(url, alt, '');\n          },\n        },\n        // 插入链接\n        insertLink: {\n          checkLink: customCheckLinkFn, // 也支持 async 函数\n          parseLinkUrl: customParseLinkUrl, // 也支持 async 函数\n        },\n        // 更新链接\n        editLink: {\n          checkLink: customCheckLinkFn, // 也支持 async 函数\n          parseLinkUrl: customParseLinkUrl, // 也支持 async 函数\n        },\n      },\n    };\n\n    // 组件销毁时，也及时销毁编辑器，重要！\n    onBeforeUnmount(() => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n\n      editor.destroy();\n    });\n\n    // 编辑器回调函数\n    // 编辑器创建完毕时的回调函数\n    const handleCreated = (editor: IDomEditor) => {\n      editorRef.value = editor; // 记录 editor 实例，重要！\n      editor.setHtml(valueHtml.value);\n      // 配置菜单\n      // setTimeout(() => {\n      //   const toolbar = DomEditor.getToolbar(editor);\n      //   const curToolbarConfig = toolbar?.getConfig();\n      //   console.log(curToolbarConfig?.toolbarKeys); // 当前菜单排序和分组\n      // }, 3000);\n    };\n    // 编辑器内容、选区变化时的回调函数\n    const handleChange = (editor: IDomEditor) => {\n      // console.log('change:', editor.getHtml());\n      const html = editor.getHtml();\n      // wangEditor初始值抛空字符串给后台\n      const emitValue = html === '<p><br></p>' ? '' : html;\n      if (\n        emitValue === props.value ||\n        (emitValue === '' && isNil(props.value))\n      ) {\n        return;\n      }\n      emit('change', emitValue);\n    };\n    // 编辑器销毁时的回调函数。调用 editor.destroy() 即可销毁编辑器\n    const handleDestroyed = (_editor: IDomEditor) => {\n      // console.log('destroyed', _editor);\n    };\n    // 编辑器 focus 时的回调函数\n    const handleFocus = (_editor: IDomEditor) => {\n      // console.log('focus', _editor);\n    };\n    // 编辑器 blur 时的回调函数。\n    const handleBlur = (_editor: IDomEditor) => {\n      // console.log('blur', _editor);\n    };\n    // 自定义编辑器 alert\n    const customAlert = (info: string, type: string) => {\n      // eslint-disable-next-line no-alert\n      alert(`【自定义提示】${type} - ${info}`);\n    };\n    // 自定义粘贴。可阻止编辑器的默认粘贴，实现自己的粘贴逻辑\n    const customPaste = (\n      editor: IDomEditor,\n      event: ClipboardEvent,\n      callback: (_n: boolean) => void,\n    ) => {\n      // 返回值（注意，vue 事件的返回值，不能用 return）\n      // callback(false); // 返回 false ，阻止默认粘贴行为\n      callback(true); // 返回 true ，继续默认的粘贴行为\n    };\n\n    // 插入文本\n    const insertText = (str: string) => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n\n      editor.insertText(str);\n    };\n\n    // 获取非格式化的 html\n    const printHtml = () => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n      console.log(editor.getHtml());\n    };\n\n    // 禁用编辑器\n    const disable = () => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n      editor.disable();\n    };\n\n    // 取消禁用编辑器\n    const enable = () => {\n      const editor = editorRef.value;\n      if (editor == null) return;\n      editor.enable();\n    };\n\n    onMounted(() => {\n      // 监听值变化赋值\n      watch(\n        () => props.value,\n        (newVal, oldVal) => {\n          if (\n            newVal !== oldVal &&\n            (typeof props.value === 'string' || newVal === null)\n          ) {\n            if (newVal === null) {\n              valueHtml.value = '';\n            } else {\n              valueHtml.value = newVal as string;\n            }\n          }\n        },\n        { immediate: true },\n      );\n\n      // 监听disabled禁用\n      watch(\n        () => props.disabled,\n        (newVal, oldVal) => {\n          if (newVal !== oldVal) {\n            if (newVal === true) {\n              disable();\n            } else {\n              enable();\n            }\n          }\n        },\n        { immediate: true },\n      );\n    });\n\n    return {\n      ns,\n      editorRef,\n      mode: 'default',\n      valueHtml,\n      toolbarConfig,\n      editorConfig,\n      handleCreated,\n      handleChange,\n      handleDestroyed,\n      handleFocus,\n      handleBlur,\n      customAlert,\n      customPaste,\n      insertText,\n      printHtml,\n      disable,\n      enable,\n    };\n  },\n  render() {\n    return (\n      <div class={this.ns.b()}>\n        <div style='border: 1px solid #ccc; margin-top: 10px'>\n          <Toolbar\n            editor={this.editorRef}\n            default-config={this.toolbarConfig}\n            mode={this.mode}\n            style='border-bottom: 1px solid #ccc'\n          />\n          <Editor\n            v-model={this.valueHtml}\n            default-config={this.editorConfig}\n            mode={this.mode}\n            style='height: 400px; overflow-y: hidden'\n            onOnCreated={this.handleCreated}\n            onOnChange={this.handleChange}\n            onOnDestroyed={this.handleDestroyed}\n            onOnFocus={this.handleFocus}\n            onOnBlur={this.handleBlur}\n            oncustomAlert={this.customAlert}\n            oncustomPaste={this.customPaste}\n          />\n        </div>\n      </div>\n    );\n  },\n});\n\nexport default IBizHtml;\n"],"names":["name","IBizHtml","exports","defineComponent","props","emits","getEditorEmits","setup","emit","c","useNamespace","editorRef","shallowRef","getCookie","CoreConst","downloadUrl","ref","watch","headers","newVal","Authorization","urls","customCheckLinkFn","text","url","uploadUrl","customParseLinkUrl","toolbarConfig","editorConfig","file","progress","res","uploadImage","err","fieldName","insertFn","alt","maxNumberOfFiles","allowedFileTypes","onBeforeUnmount","onProgress","editor","onSuccess","valueHtml","onFailed","html","emitValue","onError","isNil","handleDestroyed","_editor","handleFocus","handleBlur","customAlert","info","type","insertLink","checkLink","customPaste","event","callback","str","printHtml","disable","enable","handleCreated","onMounted","oldVal","handleChange","alert","insertText","_createVNode","console","Editor","$event"],"mappings":"8fA0BEA,MAAIC,EAAYC,EAAA,UAAAC,EAAA,CAChBC,KAAK,WACLC,MAAOC,EAAc,EACrBC,QAAa,EAAEC,MAAAA,EAAAA,CAAQ,KAAAA,CACrB,EAAA,CAEA,MAAMC,EAASC,EAAY,MAAA,iBAE3BC,EAAAC,IACMD,EAAYC,EAAU,EAAA,OAE5B,cAAA,UAAAC,EAAAC,EAAA,KAAA,CAAA,EACA,CAAA,UAEAC,EAAAC,EAAA,EAAA,EACAC,EAAMC,IAAAA,EAAsBF,KAAIG,GAAA,CAC9BC,GAAAA,EAAAA,CACA,MAAAC,EAAAZ,EAAA,YAAAU,CAAA,sBAEFJ,EAAA,MAAAM,EAAA,WACA,IAEA,UAAA,GACA,KAA8B,KAE9B,MAAAC,EAAA,CAAAC,EAAAC,IAAA,CACAP,GACQb,EAIFqB,MAAAA,EACAV,EACFW,EAAAF,GAEFA,EAAuBG,EAAE,CAC1B,YAAA,CAAA,aAAA,GAEDC,EAAA,CACA,0BAIE,SAAUxB,EAAA,SACR,UAAA,CAEF,YAAA,CAEA,OAAAqB,EAAA,uBAIA,YAAA,GAAA,KAAA,KAGD,iBAAA,GAED,iBAAA,CAAA,EAEE,QAAAP,EAAA,MAEA,gBAAA,GAED,eAAAW,EAAA,SAED,EAEa,WAAgBC,EAAA,CAC5B,QAAA,IAAA,WAAAA,CAAA,GAGKF,YAAuCG,EAAA,CAChC,QAAG,IAAY,GAAAF,EAAA,IAAA,4BAAAE,CAAA,CAClB,EAEN,SAAAF,EAAAE,EAAA,CACAC,QAAa,IAAA,GAAAH,EAAA,IAAA,4BAAAE,CAAA,CACX,EAGA,QAAAF,EAAAI,EAAAF,EAAA,CACAG,YAAiB,GAAAL,EAAA,IAAA,4BAAAI,EAAAF,CAAA,CAEjB,EAC+B,MAAA,aAAAA,EAAAI,EAAA,0CAE/BC,EAAAL,EAAA,SACAM,EAAAA,EAAgBD,EAAI,EAAA,CAEpB,CACAE,aAGgB,CAEhB,UAAAhB,EAGA,aAAAI,CAEE,EAEA,SAAA,CACA,UAAWJ,EAEX,aAAAI,CAEA,IAGFa,EAAA,IAAA,OACUC,EAACV,EAAkB,MAI7BW,GAAA,QAAA,CACAC,CAAAA,UACiBb,GAAU,GAC1B,MAAAY,EAEDA,EAAA,QAAAE,EAAA,KAAA,CACAC,IACiBf,GAAU,OAC1BgB,EAAAJ,EAAA,UAEDK,EAAAD,IAAA,cAAA,GAAAA,EACAE,IAAoBd,SAAwBa,IAAA,IAAAE,EAAA5C,EAAA,KAAA,GAI5CI,EAAA,SAAAsC,CAAA,CACA,EACEG,EAAuBC,GAAM,CAC7B,EACAC,EAAAD,GAAA,CACAf,EACFiB,EAAAF,GAAA,GAEFG,EAAA,CAAAC,EAAAC,IAAA,CACAC,MAAAA,6CAAYD,CAAA,MAAAD,CAAA,EAAA,CACVG,EAA8BC,EAAA,CAAAjB,EAAAkB,EAAAC,IAAA,GAClB,EAAA,SAEd,MAAAnB,EAAA9B,EAAA,MAEgC8B,GAAA,WAAAoB,CAAA,GAEhCC,EAAA,IAAA,CACF,MAAArB,EAAA9B,EAAA,MACD8B,GAAA,MAED,QAAA,IAAAA,EAAA,QAAA,CAAA,CACAF,EACEwB,EAAY,IAAY,CACxB,MAAItB,EAAU9B,EAAM,kBAKtB,EACAqD,EAAA,IAAA,CACMC,MAAAA,EAAAA,EAAiBxB,MAGrBA,GAAA,OAAA,CACA,EACA,OAAAyB,EAAA,IAAA,CACAjD,EAAA,IAAAb,EAAA,MAAA,CAAAe,EAAAgD,IAAA,CACAhD,IAAAgD,IAAA,OAAA/D,EAAA,OAAA,UAAAe,IAAA,QACAA,IAAA,KACDwB,EAAA,MAAA,GAEKyB,EAAY,MAAI3B,EAGpB,EAAA,CACMK,UAAAA,EACN,CAAA,EAIE7B,EAAA,IAAAb,EAAA,SAAA,CAAAe,EAAAgD,IAAA,CACFhD,IAAAgD,IACKhD,IAAU2B,GAChBiB,IAEKd,IAGN,EAAA,CACME,UAAAA,EACJ,CAAA,EACD,EACD,CACMC,GAAAA,EACJ,UAAAzC,EACD,KAAA,UACD,UAAAgC,EACA,cAAAhB,EACE,aAAAC,EACAyC,cAAAA,EACD,aAAAD,EACD,gBAAAnB,EACMS,YAAAA,EAKJ,WAAAN,EACA,YAAAC,EACAO,YAAAA,EACD,WAAAU,cAED,QAAAP,EACMO,OAAAA,CACJ,GAGA7B,QAAAA,CACF,OAAC8B,EAAA,MAAA,kBAED,EAAA,CAAAA,EAAA,MAAA,CACMT,MAAAA,0CACJ,EAAA,CAAAS,EAAe5D,EAAS,CACxB,OAAU,KAAI,UACd6D,iBAAkB,KAAQ,cAC3B,KAAA,KAAA,0CAED,EAAA,IAAA,EAAAD,EAAAE,EAAA,CACMV,WAAUA,KAAM,UACpB,sBAAwBW,GAAM,KAAA,UAAAA,EAC9B,iBAAkB,KAAE,aACpBjC,KAAc,KAAA,KACf,MAAA,mEAED,WAAA,KAAA,aACMuB,cAAe,KAAA,gBACnB,UAAY,KAAY,YACxB,SAAc,KAAA,WACdvB,cAAe,KAAA,YAChB,cAAA,KAAA,WAEDyB,EAAAA,IAAAA,CAAAA,CAAS,CAAC,CAAM,CACd"}