From f54bc71dc76f69301158af857d7bc1a05bd904d9 Mon Sep 17 00:00:00 2001
From: ncqwer <1732031236@qq.com>
Date: Mon, 1 Apr 2024 15:25:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=8E=B0=E5=9C=A8=E7=B2=98=E8=B4=B4bas?=
 =?UTF-8?q?e64=E6=A0=BC=E5=BC=8F=E7=9A=84=E5=9B=BE=E7=89=87=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=E4=BC=9A=E5=85=88=E6=8A=8Abase64=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=85=88=E4=B8=8A=E4=BC=A0=E5=88=B0=E6=8C=87?=
 =?UTF-8?q?=E5=AE=9A=E6=9C=8D=E5=8A=A1=E5=99=A8=E5=90=8E=E5=9C=A8=E6=89=A7?=
 =?UTF-8?q?=E8=A1=8C=E7=B2=98=E8=B4=B4=E6=8C=87=E4=BB=A4=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cw/cw_text_power_library/CHANGELOG.md     |   8 +
 .../cw-wang-editor/docs/examples.md           | 182 +++--
 .../components/cw-wang-editor/index.vue       | 634 ++++++++++--------
 .../components/cw-wang-editor/processHTML.js  |  27 +
 packages/cw/cw_text_power_library/manifest    |   6 +-
 .../cw/cw_text_power_library/package.json     |   4 +-
 6 files changed, 502 insertions(+), 359 deletions(-)
 create mode 100644 packages/cw/cw_text_power_library/CHANGELOG.md
 create mode 100644 packages/cw/cw_text_power_library/components/cw-wang-editor/processHTML.js

diff --git a/packages/cw/cw_text_power_library/CHANGELOG.md b/packages/cw/cw_text_power_library/CHANGELOG.md
new file mode 100644
index 00000000..f1a6322b
--- /dev/null
+++ b/packages/cw/cw_text_power_library/CHANGELOG.md
@@ -0,0 +1,8 @@
+## 1.1.6
+
+Associated Task: [#278603](https://projectmanage.netease-official.lcap.163yun.com/dashboard/TaskDetail?id=2786032954278656)
+
+### ✨Features
+
+- [60094da](https://github.com/vusion/cloud-ui-materials/commit/60094dad3f3ad4538558d691aa9331ef4a636b63) Thanks [ncqwer](https://github.com/ncqwer) ! - 现在粘贴base64格式的图片的时候会先把base64的图片先上传到指定服务器后在执行粘贴指令。
+
diff --git a/packages/cw/cw_text_power_library/components/cw-wang-editor/docs/examples.md b/packages/cw/cw_text_power_library/components/cw-wang-editor/docs/examples.md
index 07f396b3..c73a99ec 100644
--- a/packages/cw/cw_text_power_library/components/cw-wang-editor/docs/examples.md
+++ b/packages/cw/cw_text_power_library/components/cw-wang-editor/docs/examples.md
@@ -2,29 +2,77 @@
 
 ```vue
 <template>
-  <div>
-    {{ value }}
-    <cw-wang-editor :value.sync="value"></cw-wang-editor>
-  </div>
+    <div>
+        {{ value }}
+        <cw-wang-editor :value.sync="value" ref="editor"></cw-wang-editor>
+        <u-button
+            @click="handleClick"
+            :style="{
+                backgroundImage: `url(${base64})`,
+                backgroundSize: 'cover',
+            }">
+            hhh
+        </u-button>
+    </div>
 </template>
 <script>
 export default {
-  data() {
-    return {
-      readOnly: true,
-      value: "",
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.value = "123";
-    }, 2000);
-  },
-  methods: {
-    handleReadOnly() {
-      this.readOnly = !this.readOnly;
+    data() {
+        return {
+            readOnly: true,
+            value: '',
+            base64: undefined,
+        };
+    },
+    mounted() {
+        setTimeout(() => {
+            this.value = '123';
+        }, 2000);
+    },
+    methods: {
+        handleReadOnly() {
+            this.readOnly = !this.readOnly;
+        },
+        async handleClick() {
+            const [fileHandle] = await window.showOpenFilePicker();
+            const file = await fileHandle.getFile();
+            const dataURL = await new Promise((res) => {
+                const reader = new FileReader();
+                reader.onload = (e) => res(e.target.result);
+                reader.readAsDataURL(file);
+            });
+            this.base64 = dataURL;
+            navigator.clipboard.write([
+                new ClipboardItem({
+                    'text/html': new Blob(
+                        [
+                            `<img src="${dataURL}"></img><div style="background-image: url(${dataURL}); background-size:cover">hhh</div>`,
+                        ],
+                        {
+                            type: 'text/html',
+                        }
+                    ),
+                    'text/plain': new Blob([dataURL], {
+                        type: 'text/plain',
+                    }),
+                }),
+            ]);
+        },
+        async handleClick1() {
+            const src = this.$refs.editor.getMockData();
+            navigator.clipboard.write([
+                new ClipboardItem({
+                    'text/html': new Blob([src], {
+                        type: 'text/html',
+                    }),
+                    'text/plain': new Blob([src], {
+                        type: 'text/plain',
+                    }),
+                }),
+            ]);
+            this.$refs.editor.exportToDocx();
+        },
     },
-  },
 };
 </script>
 ```
@@ -33,9 +81,8 @@ export default {
 
 ```html
 <cw-wang-editor
-  value="<p>hello</p><img src='https://p3-passport.byteimg.com/img/user-avatar/834687b5e4137f4d998a95be7330f543~180x180.awebp'"
-  uploadImgServer="/upload/test"
-></cw-wang-editor>
+    value="<p>hello</p><img src='https://p3-passport.byteimg.com/img/user-avatar/834687b5e4137f4d998a95be7330f543~180x180.awebp'"
+    uploadImgServer="/upload/test"></cw-wang-editor>
 ```
 
 ### 只读模式
@@ -44,27 +91,26 @@ export default {
 
 ```vue
 <template>
-  <div>
-    <cw-wang-editor
-      :readOnly="readOnly"
-      value="<p>hello</p><img src='https://p3-passport.byteimg.com/img/user-avatar/834687b5e4137f4d998a95be7330f543~180x180.awebp'>"
-    ></cw-wang-editor>
-    <u-button @click="handleReadOnly">切换</u-button>
-  </div>
+    <div>
+        <cw-wang-editor
+            :readOnly="readOnly"
+            value="<p>hello</p><img src='https://p3-passport.byteimg.com/img/user-avatar/834687b5e4137f4d998a95be7330f543~180x180.awebp'>"></cw-wang-editor>
+        <u-button @click="handleReadOnly">切换</u-button>
+    </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      readOnly: true,
-    };
-  },
-  methods: {
-    handleReadOnly() {
-      this.readOnly = !this.readOnly;
+    data() {
+        return {
+            readOnly: true,
+        };
+    },
+    methods: {
+        handleReadOnly() {
+            this.readOnly = !this.readOnly;
+        },
     },
-  },
 };
 </script>
 ```
@@ -73,42 +119,40 @@ export default {
 
 ```vue
 <template>
-  <u-form ref="form" gap="large">
-    <u-form-item
-      :required="true"
-      layout="block"
-      rules="required"
-      label="业务口径"
-    >
-      <cw-wang-editor
-        :value.sync="value"
-        :editorStyle="editorStyle"
-      ></cw-wang-editor>
-    </u-form-item>
-    <u-form-item layout="block">
-      <u-button @click="onClick">验证</u-button>
-    </u-form-item>
-  </u-form>
+    <u-form ref="form" gap="large">
+        <u-form-item
+            :required="true"
+            layout="block"
+            rules="required"
+            label="业务口径">
+            <cw-wang-editor
+                :value.sync="value"
+                :editorStyle="editorStyle"></cw-wang-editor>
+        </u-form-item>
+        <u-form-item layout="block">
+            <u-button @click="onClick">验证</u-button>
+        </u-form-item>
+    </u-form>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      value: "",
-      editorStyle: "height: 300px",
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.value = "我有内容了";
-    }, 1000);
-  },
-  methods: {
-    async onClick() {
-      const valid = await this.$refs.form.validate();
+    data() {
+        return {
+            value: '',
+            editorStyle: 'height: 300px',
+        };
+    },
+    mounted() {
+        setTimeout(() => {
+            this.value = '我有内容了';
+        }, 1000);
+    },
+    methods: {
+        async onClick() {
+            const valid = await this.$refs.form.validate();
+        },
     },
-  },
 };
 </script>
 ```
diff --git a/packages/cw/cw_text_power_library/components/cw-wang-editor/index.vue b/packages/cw/cw_text_power_library/components/cw-wang-editor/index.vue
index fa9a4c20..0327ac98 100644
--- a/packages/cw/cw_text_power_library/components/cw-wang-editor/index.vue
+++ b/packages/cw/cw_text_power_library/components/cw-wang-editor/index.vue
@@ -1,328 +1,392 @@
 <template>
-  <div :class="{ [$style.root]: true, [$style.border]: !readOnly }" ref="root">
-    <toolbar
-      ref="toolbar"
-      style="border-bottom: 1px solid #ccc"
-      :editor="editor"
-      :default-config="toolbarConfig"
-      :mode="mode"
-      v-show="!readOnly"
-    ></toolbar>
-    <!-- v-viewer下所有图片能够进行放大操作 -->
-    <div v-viewer="{ movable: false, zIndex: 8000 }">
-      <editor
-        ref="editor"
-        :style="rootStyle"
-        v-model="currentValue"
-        :default-config="editorConfig"
-        :mode="mode"
-        @onCreated="onCreated"
-        @onChange="onChange"
-        @onFocus="onFocus"
-        @onBlur="onBlur"
-      ></editor>
+    <div
+        :class="{ [$style.root]: true, [$style.border]: !readOnly }"
+        ref="root">
+        <toolbar
+            ref="toolbar"
+            style="border-bottom: 1px solid #ccc"
+            :editor="editor"
+            :default-config="toolbarConfig"
+            :mode="mode"
+            v-show="!readOnly"></toolbar>
+        <!-- v-viewer下所有图片能够进行放大操作 -->
+        <div v-viewer="{ movable: false, zIndex: 8000 }">
+            <editor
+                ref="editor"
+                :style="rootStyle"
+                v-model="currentValue"
+                :default-config="editorConfig"
+                :mode="mode"
+                @onCreated="onCreated"
+                @onChange="onChange"
+                @onFocus="onFocus"
+                @onBlur="onBlur"
+                @customPaste="customPaste"></editor>
+        </div>
     </div>
-  </div>
 </template>
 <script>
-import { MField } from "../../widgets/m-field";
-import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
-import "@wangeditor/editor/dist/css/style.css";
-import "viewerjs/dist/viewer.css";
-import whiteListOption from "../../utils/whiteListTag";
-import Viewer from "v-viewer";
-import Vue from "vue";
-import xss from "xss";
-import { imageTypes, videoTypes } from "./constant";
+import { MField } from '../../widgets/m-field';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import '@wangeditor/editor/dist/css/style.css';
+import 'viewerjs/dist/viewer.css';
+import whiteListOption from '../../utils/whiteListTag';
+import Viewer from 'v-viewer';
+import Vue from 'vue';
+import xss from 'xss';
+import { imageTypes, videoTypes } from './constant';
+import { processHTML } from './processHTML.js';
 const myxss = new xss.FilterXSS({ whiteList: whiteListOption });
 Vue.use(Viewer);
 
 export default {
-  name: "cw-wang-editor",
-  components: { Editor, Toolbar },
-  mixins: [MField],
-  props: {
-    value: String,
-    readOnly: Boolean,
-    scroll: { type: Boolean, default: true },
-    placeholder: String,
-    editorStyle: { type: String, default: "" },
-    uploadImgServer: { type: String, default: "" },
-    accept: { type: String, default: ".png,.jpg,.jpeg,.webp" },
-    acceptVideo: {
-      type: String,
-      default: ".mp4,.avi,.mov,.wmv,.mkv,.flv,.mpeg,.rmvb,.3gp,.webm",
-    },
-  },
-  data() {
-    const vm = this;
-    return {
-      currentValue: myxss.process(vm.value),
-      editor: null,
-      toolbarConfig: {
-        excludeKeys: ["fullScreen", "codeBlock", "insertImage"],
-      },
-      mode: "default", // or 'simple',
-      defaultHeight: "",
-      editorHeight: {
-        height: vm.scroll ? "180px" : null,
-        "min-height": vm.scroll ? null : "180px",
-      },
-    };
-  },
-  computed: {
-    rootStyle() {
-      return {
-        ...this.editorHeight,
-        ...this.parseStyleAttr(this.editorStyle),
-      };
+    name: 'cw-wang-editor',
+    components: { Editor, Toolbar },
+    mixins: [MField],
+    props: {
+        value: String,
+        readOnly: Boolean,
+        scroll: { type: Boolean, default: true },
+        placeholder: String,
+        editorStyle: { type: String, default: '' },
+        uploadImgServer: { type: String, default: '' },
+        accept: { type: String, default: '.png,.jpg,.jpeg,.webp' },
+        acceptVideo: {
+            type: String,
+            default: '.mp4,.avi,.mov,.wmv,.mkv,.flv,.mpeg,.rmvb,.3gp,.webm',
+        },
     },
-    acceptList() {
-      return this.accept.split(",");
+    data() {
+        const vm = this;
+        return {
+            currentValue: myxss.process(vm.value),
+            editor: null,
+            toolbarConfig: {
+                excludeKeys: ['fullScreen', 'codeBlock', 'insertImage'],
+            },
+            mode: 'default', // or 'simple',
+            defaultHeight: '',
+            editorHeight: {
+                height: vm.scroll ? '180px' : null,
+                'min-height': vm.scroll ? null : '180px',
+            },
+        };
     },
-    acceptEditorList() {
-      return this.accept
-        .split(",")
-        .map((item) => `image/${item.substring(1, item.length)}`);
+    computed: {
+        rootStyle() {
+            return {
+                ...this.editorHeight,
+                ...this.parseStyleAttr(this.editorStyle),
+            };
+        },
+        acceptList() {
+            return this.accept.split(',');
+        },
+        acceptEditorList() {
+            return this.accept
+                .split(',')
+                .map((item) => `image/${item.substring(1, item.length)}`);
+        },
+        acceptVideoList() {
+            return this.acceptVideo.split(',');
+        },
+        acceptVideoEditorList() {
+            return this.acceptVideo
+                .split(',')
+                .map((item) => `video/${item.substring(1, item.length)}`);
+        },
+        editorConfig() {
+            const authorization = this.getCookie('authorization');
+            const headers = authorization
+                ? { Authorization: authorization }
+                : {};
+            const MENU_CONF = {};
+            Object.assign(
+                MENU_CONF,
+                {
+                    uploadImage: this.accept
+                        ? {
+                              server:
+                                  this.uploadImgServer ||
+                                  '/gateway/lowcode/api/v1/app/upload',
+                              fieldName: 'file',
+                              maxFileSize: 50 * 1024 * 1024, // 50M
+                              // 自定义增加 http header
+                              headers,
+                              // 自定义插入图片
+                              onBeforeUpload: (file) => {
+                                  const type =
+                                      Object.values(file)[0].type.split('/')[1];
+                                  if (
+                                      !this.acceptList.includes('.' + type) ||
+                                      !imageTypes.includes(type)
+                                  ) {
+                                      this.$emit('upload-fail', {
+                                          value: `不支持上传${type}类型的图片文件`,
+                                      });
+                                      return false;
+                                  }
+                                  return file;
+                              },
+                              customInsert: (res, insertFn) => {
+                                  const url = res.result;
+                                  insertFn(url);
+                              },
+                              meta: {
+                                  viaOriginURL: true,
+                              },
+                              allowedFileTypes: this.acceptEditorList,
+                              disable: true,
+                          }
+                        : null,
+                },
+                {
+                    uploadVideo: {
+                        server: this.acceptVideo
+                            ? this.uploadImgServer ||
+                              '/gateway/lowcode/api/v1/app/upload'
+                            : null,
+                        fieldName: 'file',
+                        maxFileSize: 1000 * 1024 * 1024, // 1000M
+                        // 自定义增加 http  header
+                        headers,
+                        onBeforeUpload: (file) => {
+                            const type =
+                                Object.values(file)[0].type.split('/')[1];
+                            if (
+                                !this.acceptVideoList.includes('.' + type) ||
+                                !videoTypes.includes(type)
+                            ) {
+                                this.$emit('upload-fail', {
+                                    value: `不支持上传${type}类型的视频文件`,
+                                });
+                                return false;
+                            }
+                        },
+                        // 自定义插入视频
+                        customInsert(res, insertFn) {
+                            const url = res.result;
+                            insertFn(url);
+                        },
+                        meta: {
+                            viaOriginURL: true,
+                        },
+                        allowedFileTypes: this.acceptVideoEditorList,
+                    },
+                }
+            );
+            console.log('MENU_CONF', MENU_CONF);
+            return {
+                readOnly: this.readOnly,
+                scroll: this.scroll,
+                placeholder: this.placeholder,
+                autoFocus: false,
+                MENU_CONF,
+            };
+        },
     },
-    acceptVideoList() {
-      return this.acceptVideo.split(",");
+    watch: {
+        readOnly(val) {
+            val ? this.editor.disable() : this.editor.enable();
+        },
+        value(value) {
+            if (value !== this.currentValue) {
+                this.currentValue = myxss.process(value);
+            }
+        },
+        currentValue(value) {
+            this.$emit('update:value', value);
+        },
     },
-    acceptVideoEditorList() {
-      return this.acceptVideo
-        .split(",")
-        .map((item) => `video/${item.substring(1, item.length)}`);
+    beforeDestroy() {
+        const { editor } = this;
+        if (editor === null) return;
+        // 组件销毁时，及时销毁编辑器
+        editor.destroy();
     },
-    editorConfig() {
-      const authorization = this.getCookie("authorization");
-      const headers = authorization ? { Authorization: authorization } : {};
-      const MENU_CONF = {};
-      Object.assign(
-        MENU_CONF,
-        {
-          uploadImage: this.accept
-            ? {
-                server:
-                  this.uploadImgServer || "/gateway/lowcode/api/v1/app/upload",
-                fieldName: "file",
-                maxFileSize: 50 * 1024 * 1024, // 50M
-                // 自定义增加 http header
-                headers,
-                // 自定义插入图片
-                onBeforeUpload: (file) => {
-                  const type = Object.values(file)[0].type.split("/")[1];
-                  if (
-                    !this.acceptList.includes("." + type) ||
-                    !imageTypes.includes(type)
-                  ) {
-                    this.$emit("upload-fail", {
-                      value: `不支持上传${type}类型的图片文件`,
-                    });
-                    return false;
-                  }
-                  return file;
-                },
-                customInsert: (res, insertFn) => {
-                  const url = res.result;
-                  insertFn(url);
-                },
-                meta: {
-                  viaOriginURL: true,
-                },
-                allowedFileTypes: this.acceptEditorList,
-                disable: true,
-              }
-            : null,
+    methods: {
+        async customUplodeForPasteImage(dataURL) {
+            // return dataURL;
+            const authorization = this.getCookie('authorization');
+            const headers = authorization
+                ? { Authorization: authorization }
+                : {};
+            // dataURL => blob
+            const [typeStr, baseStr] = dataURL.split(';');
+            const type = typeStr.split(':')[1];
+            const base64 = baseStr.split(',')[1];
+            const byteCharacters = atob(base64);
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const blob = new Blob([byteArray], { type });
+
+            // todo: size check and mime type check
+
+            // upload
+            const formData = new FormData();
+            formData.append('file', blob);
+
+            const url = await fetch(
+                this.uploadImgServer || '/gateway/lowcode/api/v1/app/upload',
+                {
+                    method: 'POST',
+                    headers,
+                    body: formData,
+                }
+            )
+                .then((res) => res.json())
+                .then((v) => v.result);
+            return url;
         },
-        {
-          uploadVideo: {
-            server: this.acceptVideo
-              ? this.uploadImgServer || "/gateway/lowcode/api/v1/app/upload"
-              : null,
-            fieldName: "file",
-            maxFileSize: 1000 * 1024 * 1024, // 1000M
-            // 自定义增加 http  header
-            headers,
-            onBeforeUpload: (file) => {
-              const type = Object.values(file)[0].type.split("/")[1];
-              if (
-                !this.acceptVideoList.includes("." + type) ||
-                !videoTypes.includes(type)
-              ) {
-                this.$emit("upload-fail", {
-                  value: `不支持上传${type}类型的视频文件`,
+        customPaste(editor, event) {
+            const html = event.clipboardData.getData('text/html'); // 获取粘贴的 html
+            if (html) {
+                processHTML(html, async (x) => {
+                    return this.customUplodeForPasteImage(x);
+                }).then((domBody) => {
+                    const str = new XMLSerializer().serializeToString(domBody);
+                    editor.dangerouslyInsertHtml(str);
                 });
+                event.preventDefault();
                 return false;
-              }
-            },
-            // 自定义插入视频
-            customInsert(res, insertFn) {
-              const url = res.result;
-              insertFn(url);
-            },
-            meta: {
-              viaOriginURL: true,
-            },
-            allowedFileTypes: this.acceptVideoEditorList,
-          },
-        }
-      );
-      console.log("MENU_CONF", MENU_CONF);
-      return {
-        readOnly: this.readOnly,
-        scroll: this.scroll,
-        placeholder: this.placeholder,
-        autoFocus: false,
-        MENU_CONF,
-      };
-    },
-  },
-  watch: {
-    readOnly(val) {
-      val ? this.editor.disable() : this.editor.enable();
-    },
-    value(value) {
-      if (value !== this.currentValue) {
-        this.currentValue = myxss.process(value);
-      }
-    },
-    currentValue(value) {
-      this.$emit("update:value", value);
-    },
-  },
-  beforeDestroy() {
-    const { editor } = this;
-    if (editor === null) return;
-    // 组件销毁时，及时销毁编辑器
-    editor.destroy();
-  },
-  methods: {
-    onCreated(editor) {
-      // 一定要用 Object.seal() ，否则会报错
-      this.editor = Object.seal(editor);
-      let height = this.$refs.root.style.height;
-      setTimeout(() => {
-        if (height) {
-          const toolHeight =
-            this.$refs.toolbar.$el.getBoundingClientRect().height;
-          height = this.removePX(height);
-          this.editorHeight.height = height - toolHeight - 2 + "px";
-          // 部分场景在编辑器内，删除高度会导致页面反复重新渲染，所以在编辑器下不删除高度
-          if (!this.$env.VUE_APP_DESIGNER) {
-            this.$refs.root.style.removeProperty("height");
-          }
-        }
-        this.defaultHeight = this.editorHeight.height || "";
-        if (!this.scroll) {
-          this.setHeight();
-        }
-      });
-    },
-    onChange(editor) {
-      // 添加min-height时，container容器小于editor编辑器高度，click事件需精确触发，体验较差。所以当container容器大于editor编辑器高度时再添加min-height属性
-      if (!this.scroll) {
-        this.setHeight();
-      }
-      // 内容为空时不重复赋值，防止表单错误校验
-      if (editor.isEmpty() && !this.currentValue && this.currentValue !== 0)
-        return;
-      const value = editor.isEmpty() ? "" : editor.getHtml();
-      const currentValue = myxss.process(value);
-      this.$emit("change", { value: currentValue, editor });
-      this.$emit("input", currentValue);
-    },
-    onFocus(editor) {
-      this.$emit("focus", { value: this.currentValue, editor });
-      if (!this.accept) {
-        this.$nextTick(() => {
-          this.$el
-            .querySelector('[data-menu-key="group-image"]')
-            .parentNode.classList.add("no-accept-disabled");
-        });
-      }
-      if (!this.acceptVideo) {
-        this.$nextTick(() => {
-          this.$el
-            .querySelector('[data-menu-key="group-video"]')
-            .parentNode.classList.add("no-accept-disabled");
-        });
-      }
-    },
-    onBlur(editor) {
-      this.$emit("blur", { value: this.currentValue, editor });
-    },
-    getCookie(cname) {
-      const name = `${cname}=`;
-      const ca = document.cookie.split(";");
-      for (let i = 0; i < ca.length; i++) {
-        const c = ca[i].trim();
-        if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
-      }
-      return "";
-    },
-    parseStyleAttr(styleStr) {
-      const styleObj = styleStr.split(/;/gim).reduce((obj, item) => {
-        const arrs = item.trim().split(/:/gim);
-        if (arrs.length > 1) {
-          obj[arrs[0].trim()] = arrs[1].trim();
-        }
-        return obj;
-      }, {});
+            } else {
+                return true;
+            }
+        },
+        onCreated(editor) {
+            // 一定要用 Object.seal() ，否则会报错
+            this.editor = Object.seal(editor);
+            let height = this.$refs.root.style.height;
+            setTimeout(() => {
+                if (height) {
+                    const toolHeight =
+                        this.$refs.toolbar.$el.getBoundingClientRect().height;
+                    height = this.removePX(height);
+                    this.editorHeight.height = height - toolHeight - 2 + 'px';
+                    // 部分场景在编辑器内，删除高度会导致页面反复重新渲染，所以在编辑器下不删除高度
+                    if (!this.$env.VUE_APP_DESIGNER) {
+                        this.$refs.root.style.removeProperty('height');
+                    }
+                }
+                this.defaultHeight = this.editorHeight.height || '';
+                if (!this.scroll) {
+                    this.setHeight();
+                }
+            });
+        },
+        onChange(editor) {
+            // 添加min-height时，container容器小于editor编辑器高度，click事件需精确触发，体验较差。所以当container容器大于editor编辑器高度时再添加min-height属性
+            if (!this.scroll) {
+                this.setHeight();
+            }
+            // 内容为空时不重复赋值，防止表单错误校验
+            if (
+                editor.isEmpty() &&
+                !this.currentValue &&
+                this.currentValue !== 0
+            )
+                return;
+            const value = editor.isEmpty() ? '' : editor.getHtml();
+            const currentValue = myxss.process(value);
+            this.$emit('change', { value: currentValue, editor });
+            this.$emit('input', currentValue);
+        },
+        onFocus(editor) {
+            this.$emit('focus', { value: this.currentValue, editor });
+            if (!this.accept) {
+                this.$nextTick(() => {
+                    this.$el
+                        .querySelector('[data-menu-key="group-image"]')
+                        .parentNode.classList.add('no-accept-disabled');
+                });
+            }
+            if (!this.acceptVideo) {
+                this.$nextTick(() => {
+                    this.$el
+                        .querySelector('[data-menu-key="group-video"]')
+                        .parentNode.classList.add('no-accept-disabled');
+                });
+            }
+        },
+        onBlur(editor) {
+            this.$emit('blur', { value: this.currentValue, editor });
+        },
+        getCookie(cname) {
+            const name = `${cname}=`;
+            const ca = document.cookie.split(';');
+            for (let i = 0; i < ca.length; i++) {
+                const c = ca[i].trim();
+                if (c.indexOf(name) === 0)
+                    return c.substring(name.length, c.length);
+            }
+            return '';
+        },
+        parseStyleAttr(styleStr) {
+            const styleObj = styleStr.split(/;/gim).reduce((obj, item) => {
+                const arrs = item.trim().split(/:/gim);
+                if (arrs.length > 1) {
+                    obj[arrs[0].trim()] = arrs[1].trim();
+                }
+                return obj;
+            }, {});
 
-      return styleObj;
-    },
-    removePX(str) {
-      return str.substring(0, str.length - 2);
-    },
-    setHeight() {
-      const textareaNode = this.$refs.editor.$el.querySelector(
-        "[data-slate-editor]"
-      );
-      const currentheight = textareaNode.getBoundingClientRect().height;
-      const height = this.editorHeight.height || "";
-      if (height && currentheight > this.removePX(height)) {
-        this.editorHeight["min-height"] = this.editorHeight.height;
-        this.editorHeight.height = null;
-      } else if (currentheight <= this.removePX(this.defaultHeight)) {
-        this.editorHeight.height = this.defaultHeight;
-      }
+            return styleObj;
+        },
+        removePX(str) {
+            return str.substring(0, str.length - 2);
+        },
+        setHeight() {
+            const textareaNode = this.$refs.editor.$el.querySelector(
+                '[data-slate-editor]'
+            );
+            const currentheight = textareaNode.getBoundingClientRect().height;
+            const height = this.editorHeight.height || '';
+            if (height && currentheight > this.removePX(height)) {
+                this.editorHeight['min-height'] = this.editorHeight.height;
+                this.editorHeight.height = null;
+            } else if (currentheight <= this.removePX(this.defaultHeight)) {
+                this.editorHeight.height = this.defaultHeight;
+            }
+        },
     },
-  },
 };
 </script>
 
 <style module>
 .root {
-  z-index: 1000;
+    z-index: 1000;
 }
 
 .border {
-  border: 1px solid #ccc;
+    border: 1px solid #ccc;
 }
 </style>
 <style>
 .w-e-text-container img {
-  min-height: unset !important;
-  min-width: unset !important;
-  display: block;
-  height: fit-content;
-  width: fit-content;
+    min-height: unset !important;
+    min-width: unset !important;
+    display: block;
+    height: fit-content;
+    width: fit-content;
 }
 .w-e-image-container {
-  max-width: 100%;
+    max-width: 100%;
 }
 .w-e-textarea-video-container {
-  max-width: 100%;
+    max-width: 100%;
 }
 .no-accept-disabled {
-  cursor: not-allowed;
-  pointer-events: none;
+    cursor: not-allowed;
+    pointer-events: none;
 }
 
 .no-accept-disabled svg {
-  fill: var(--w-e-toolbar-disabled-color) !important;
+    fill: var(--w-e-toolbar-disabled-color) !important;
 }
 .w-e-text-container [data-slate-editor] {
-  word-break: break-word;
+    word-break: break-word;
 }
 </style>
diff --git a/packages/cw/cw_text_power_library/components/cw-wang-editor/processHTML.js b/packages/cw/cw_text_power_library/components/cw-wang-editor/processHTML.js
new file mode 100644
index 00000000..dea88306
--- /dev/null
+++ b/packages/cw/cw_text_power_library/components/cw-wang-editor/processHTML.js
@@ -0,0 +1,27 @@
+export const traverseNode = (node, fn) => {
+    fn(node);
+    return Array.from(node.childNodes).forEach((n) => traverseNode(n, fn));
+};
+
+export const processHTML = async (html, upload) => {
+    const domBody = new DOMParser().parseFromString(html, 'text/html').body;
+    const needUploadImgs = [];
+    traverseNode(domBody, (node) => {
+        if (node instanceof HTMLImageElement) {
+            const src = node.getAttribute('src');
+            if (src.startsWith('data:image')) {
+                needUploadImgs.push({
+                    node,
+                    src,
+                });
+            }
+        }
+    });
+    await Promise.all(
+        needUploadImgs.map(async ({ node, src }) => {
+            const realSrc = await upload(src);
+            node.setAttribute('src', realSrc);
+        })
+    );
+    return domBody;
+};
diff --git a/packages/cw/cw_text_power_library/manifest b/packages/cw/cw_text_power_library/manifest
index 9c159541..f65f642e 100644
--- a/packages/cw/cw_text_power_library/manifest
+++ b/packages/cw/cw_text_power_library/manifest
@@ -1,6 +1,6 @@
 Plugin-Version: 1.0.0
 Library-Type: Frontend
 Metadata-File: usage.json
-packages/extension/cw_text_power_library@1.1.4/dist-theme/demo.html: dist-theme/demo.html
-packages/extension/cw_text_power_library@1.1.4/dist-theme/index.js: dist-theme/index.js
-packages/extension/cw_text_power_library@1.1.4/dist-theme/index.js.map: dist-theme/index.js.map
+packages/extension/cw_text_power_library@1.1.6/dist-theme/demo.html: dist-theme/demo.html
+packages/extension/cw_text_power_library@1.1.6/dist-theme/index.js: dist-theme/index.js
+packages/extension/cw_text_power_library@1.1.6/dist-theme/index.js.map: dist-theme/index.js.map
\ No newline at end of file
diff --git a/packages/cw/cw_text_power_library/package.json b/packages/cw/cw_text_power_library/package.json
index 819fcbdf..c52d7964 100644
--- a/packages/cw/cw_text_power_library/package.json
+++ b/packages/cw/cw_text_power_library/package.json
@@ -2,7 +2,7 @@
   "name": "cw_text_power_library",
   "title": "文本功能依赖库",
   "description": "",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "main": "./index.js",
   "author": "",
   "repository": "",
@@ -56,4 +56,4 @@
   "template": {
     "inited": true
   }
-}
+}
\ No newline at end of file