adtec-core-package 2.5.3 → 2.5.4

package/src/components/RichTextEditor/RichTextEditor.vue

@@ -1,442 +1,442 @@
-<!--创建人 xux-->
-<!--说明: RichTextEditor  https://www.wangeditor.com/-->
-<!--创建时间: 2025/1/3 下午1:43-->
-<!--修改时间: 2025/1/3 下午1:43-->
-<template>
-  <el-flex>
-    <div
-      ref="divRef"
-      :style="{
-        height: '100%',
-        width: '100%',
-        fontSize: '14px',
-      }"
-    />
-  </el-flex>
-</template>
-<script setup lang="ts">
-import { AiEditor } from 'aieditor'
-import 'aieditor/dist/style.css'
-import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const divRef = ref()
-let aiEditor: AiEditor | null
-const props = withDefaults(
-  defineProps<{
-    /**
-     * html 内容
-     */
-    // modelValue: string
-    /**
-     * 工具栏显示
-     */
-    showToolbar?: boolean
-    /**
-     * 边框宽度
-     */
-    borderWidth?: string
-    /**
-     * 编辑器配置 IEditorConfig
-     */
-    editorConfig?: any
-    /**
-     * 是否编辑状态，一直生效（config中edit只用在初始化时生效）
-     */
-    isEdit?: boolean
-  }>(),
-  {
-    // modelValue: '',
-    showToolbar: true,
-    borderWidth: '1px',
-    editorConfig: {},
-  },
-)
-const model = defineModel({
-  type: [String, null, undefined],
-  required: false,
-  default: null
-})
-const text = defineModel('text', {
-  type: String,
-  required: false,
-})
-//字体对照表
-const fontSizes = [
-  { name: '八号', pt: 5, px: 5 },
-  { name: '七号', pt: 5.5, px: 6 },
-  { name: '小六', pt: 6.5, px: 8 },
-  { name: '六号', pt: 7.5, px: 9 },
-  { name: '小五', pt: 9, px: 11 },
-  { name: '五号', pt: 10.5, px: 12 },
-  { name: '小四', pt: 12, px: 14 },
-  { name: '四号', pt: 14, px: 16 },
-  { name: '小三', pt: 15, px: 18 },
-  { name: '三号', pt: 16, px: 19 },
-  { name: '小二', pt: 18, px: 21 },
-  { name: '二号', pt: 22, px: 26 },
-  { name: '小一', pt: 24, px: 28 },
-  { name: '一号', pt: 26, px: 30 },
-  { name: '小初', pt: 36, px: 42 },
-  { name: '初号', pt: 42, px: 49 },
-]
-function setDefaultPx(html: string) {
-  // 创建临时div用于解析HTML
-  const tempDiv = document.createElement('div')
-  tempDiv.innerHTML = html
-  // 获取所有p元素
-  const pElements = tempDiv.querySelectorAll('p')
-
-  pElements.forEach((p) => {
-    // 检查是否有内联样式设置了fontSize
-    const hasInlineFontSize = !!p.style.fontSize
-    // 只有当没有设置字体大小时才添加
-    if (!hasInlineFontSize) {
-      p.style.fontSize = '14px'
-    }
-  })
-  return tempDiv.innerHTML
-}
-function convertPxToPt(html: string) {
-  html = setDefaultPx(html)
-  const regex = /font-size: (\d+)px/g
-  return html.replace(regex, (match, pxValue) => {
-    const px = parseInt(pxValue, 10)
-    const entry = fontSizes.find((item) => item.px === px)
-    if (entry) {
-      return `font-size: ${entry.pt}pt`
-    }
-    return match
-  })
-}
-function convertPtToPx(html: string) {
-  const regex = /font-size: (\d+)pt/g
-  return html.replace(regex, (match, ptValue) => {
-    const pt = parseFloat(ptValue)
-    const entry = fontSizes.find((item) => item.pt === pt)
-    if (entry) {
-      return `font-size: ${entry.px}px`
-    }
-    return match
-  })
-}
-//默认的配置
-const defaultConfig = {
-  placeholder: '请输入内容...',
-  draggable: false, // 禁止拖拽
-  toolbarExcludeKeys: [
-    'eraser',
-    'link',
-    'code',
-    'attachment',
-    'code-block',
-    'video',
-    'ai',
-    'quote',
-    'emoji',
-  ],
-  textSelectionBubbleMenu: {
-    enable: true,
-    items: ['Bold', 'Italic', 'Underline', 'Strike', 'code', 'comment'],
-  },
-  image: {
-    uploaderEvent: {
-      onUploadBefore: (file, uploadUrl, headers) => {
-        if (file.size > 2 * 1024 * 1024) {
-          ElMessage.warning('图片大小不能超过2M')
-          return false
-        }
-      },
-      // onSuccess: (file, response) => {
-      //   console.log('onSuccess', file, response)
-      // }
-    },
-  },
-  htmlPasteConfig: {
-    pasteProcessor: (html) => {
-      // return html;
-      // console.log('html:', html, 'xxxxxx', removeAllFontFamilyStyles(html))
-      return removeAllFontFamilyStyles(html)
-    },
-  },
-  fontSize: {
-    defaultValue: ' ',
-    values: [
-      { name: '小四', value: 14 },
-      { name: '初号', value: 49 },
-      { name: '小初', value: 42 },
-      { name: '一号', value: 30 },
-      { name: '小一', value: 28 },
-      { name: '二号', value: 26 },
-      { name: '小二', value: 21 },
-      { name: '三号', value: 19 },
-      { name: '小三', value: 18 },
-      { name: '四号', value: 16 },
-      { name: '小四', value: 14 },
-      { name: '五号', value: 12 },
-      { name: '小五', value: 11 },
-      { name: '六号', value: 9 },
-      { name: '小六', value: 8 },
-      { name: '七号', value: 6 },
-      { name: '八号', value: 5 },
-    ],
-  },
-  onChange: (editor: AiEditor) => {
-    setFooter()
-    model.value = editor.getHtml()
-    text.value = editor.getText()
-    setTimeout(() => {
-      setContent()
-    }, 200)
-  },
-}
-
-/**
- * 修改样式
- */
-function setContent() {
-  let html = aiEditor!.getHtml()
-  html = calcImagesHeight(html)
-  model.value = convertPxToPt(html)
-}
-
-/**
- * 移除html字体相关设置
- * @param html
- */
-function removeAllFontFamilyStyles(html: string): string {
-  const tempDiv = document.createElement('div')
-  tempDiv.innerHTML = html
-
-  function processElement(element: Element) {
-    if (element.hasAttribute('style')) {
-      let style = element.getAttribute('style') || ''
-      // 规范化样式字符串：确保每个属性以分号结尾
-      style = normalizeStyleString(style)
-
-      // 使用简化的正则表达式移除字体相关属性（现在可以安全地假设每个属性后都有分号）
-      style = style.replace(
-        /(?:font-family|mso-(?:ascii|hansi|bidi|fareast|east-asian|font)-font-family)\s*:\s*[^;]+;/gi,
-        '',
-      )
-      // 清理空样式
-      style = style.trim()
-      if (style) {
-        element.setAttribute('style', style)
-      } else {
-        element.removeAttribute('style')
-      }
-    }
-
-    // 移除标签上的字体家族相关属性
-    const fontFamilyAttrs = [
-      'font-family',
-      'face',
-      'mso-hansi-font-family',
-      'mso-bidi-font-family',
-      'mso-ascii-font-family',
-      'mso-fareast-font-family',
-      'mso-east-asian-font-family',
-      'mso-font-font-family',
-    ]
-    fontFamilyAttrs.forEach((attr) => element.removeAttribute(attr))
-
-    // 递归处理子元素
-    Array.from(element.children).forEach((child) => processElement(child))
-  }
-
-  // 规范化样式字符串：确保每个属性以分号结尾
-  function normalizeStyleString(style: string): string {
-    // 移除首尾空格
-    style = style.trim()
-
-    // 如果样式为空，直接返回
-    if (!style) return ''
-
-    // 如果最后一个字符不是分号，添加分号
-    if (style.charAt(style.length - 1) !== ';') {
-      style += ';'
-    }
-
-    return style
-  }
-
-  Array.from(tempDiv.children).forEach((child) => processElement(child))
-  return tempDiv.innerHTML
-}
-/**
- * 计算富文本框中图片的高度并赋值
- */
-function calcImagesHeight(html: string) {
-  const map = new Map()
-  const imageElements = divRef.value.querySelectorAll('img.resize-obj')
-  if (imageElements.length > 0) {
-    imageElements.forEach((imageElement: any) => {
-      const width = imageElement.offsetWidth
-      const height = imageElement.offsetHeight
-      if (width > 1 && height > 1) {
-        map.set(
-          imageElement.src.length > 100 ? imageElement.src.substring(0, 100) : imageElement.src,
-          height,
-        )
-      }
-    })
-    for (const [key, value] of map) {
-      html = customStringReplacement(html, `${key}`, '>', `height="auto"`, `height="${value}"`)
-    }
-  }
-  return html
-}
-
-function customStringReplacement(
-  str: string,
-  startMarker: string,
-  endMarker: string,
-  target: string,
-  replacement: string,
-): string {
-  let result = ''
-  let currentIndex = 0
-
-  while (true) {
-    const startIndex = str.indexOf(startMarker, currentIndex)
-    if (startIndex === -1) {
-      result += str.slice(currentIndex)
-      break
-    }
-
-    const endIndex = str.indexOf(endMarker, startIndex + startMarker.length)
-    if (endIndex === -1) {
-      result += str.slice(currentIndex)
-      break
-    }
-
-    result += str.slice(currentIndex, startIndex + startMarker.length)
-    const middle = str.slice(startIndex + startMarker.length, endIndex)
-    const newMiddle = middle.replace(new RegExp(target, 'g'), replacement)
-    result += newMiddle
-    result += endMarker
-    currentIndex = endIndex + 1
-  }
-
-  return result
-}
-
-watch(
-  () => props.isEdit,
-  (val) => {
-    if (aiEditor) {
-      aiEditor.setEditable(val)
-      //头尾显隐
-      const footer = divRef.value?.querySelector('aie-footer') as HTMLElement
-      if (footer) {
-        footer.style.display = val ? '' : 'none'
-      }
-      const header = divRef.value?.querySelector('aie-header') as HTMLElement
-      if (header) {
-        header.style.display = val ? '' : 'none'
-      }
-    }
-  },
-  { immediate: true },
-)
-function initHtml(html: string) {
-  html = customStringReplacement(html, '<img', '>', 'height="[0-9]+"', 'height="auto"')
-  return convertPtToPx(html)
-}
-
-onMounted(() => {
-  const config = {
-    element: divRef.value as Element,
-    content: initHtml(model.value ?? ''),
-    ...defaultConfig,
-    ...props.editorConfig,
-    fontFamily: {
-      values: [
-        { name: '宋体', value: 'SimSun' },
-        { name: '仿宋', value: 'FangSong' },
-        { name: '黑体', value: 'SimHei' },
-        { name: '楷体', value: 'KaiTi' },
-        { name: '微软雅黑', value: 'Microsoft YaHei' },
-        { name: '方正仿宋简体_GBK', value: 'FangSong_GB2312' },
-        { name: 'Arial', value: 'Arial' },
-        { name: 'Times New Roman', value: 'Times New Roman' },
-      ],
-    },
-    onCreated: (editor: AiEditor) => {},
-  }
-  // 隐藏工具栏
-  if (!props.showToolbar) {
-    config.toolbarKeys = []
-  }
-  setTimeout(() => {
-    aiEditor = new AiEditor(config)
-    setTimeout(() => {
-      //当隐藏工具栏时，也隐藏 aie-footer/aie-header 元素
-      if (!props.showToolbar || props.editorConfig?.editable === false) {
-        const footer = divRef.value?.querySelector('aie-footer') as HTMLElement
-        if (footer) {
-          footer.style.display = 'none'
-        }
-        const header = divRef.value?.querySelector('aie-header') as HTMLElement
-        if (header) {
-          header.style.display = 'none'
-        }
-      }
-      setFooter()
-    }, 100)
-  }, 100)
-})
-
-const setFooter = () => {
-  const footer = divRef.value?.querySelector('aie-footer') as HTMLElement
-  if (footer) {
-    const footerSpan = footer.querySelector('span') as HTMLElement
-    if (footerSpan && footerSpan.textContent) {
-      footerSpan.textContent = footerSpan.textContent.replace(
-        'Powered by AiEditor, Characters',
-        '字数',
-      )
-    }
-  }
-}
-
-onUnmounted(() => {
-  aiEditor && aiEditor.destroy()
-})
-
-defineExpose({
-  getHtml: () => {
-    if (aiEditor) {
-      return aiEditor.getHtml()
-    } else {
-      return ''
-    }
-  },
-  getText: () => {
-    if (aiEditor) {
-      return aiEditor.getText()
-    } else {
-      return ''
-    }
-  },
-  setContent: (html: string,focus: boolean=false) => {
-    if (aiEditor) {
-      aiEditor.setContent(initHtml(html),focus)
-    }
-  },
-})
-</script>
-<style scoped lang="scss">
-:deep {
-  .aie-container {
-    border-width: v-bind(borderWidth);
-    border-color: #dcdfe6;
-  }
-  .aie-content {
-    p {
-      margin: 6px 0;
-    }
-  }
-}
-</style>
+<!--创建人 xux-->
+<!--说明: RichTextEditor  https://www.wangeditor.com/-->
+<!--创建时间: 2025/1/3 下午1:43-->
+<!--修改时间: 2025/1/3 下午1:43-->
+<template>
+  <el-flex>
+    <div
+      ref="divRef"
+      :style="{
+        height: '100%',
+        width: '100%',
+        fontSize: '14px',
+      }"
+    />
+  </el-flex>
+</template>
+<script setup lang="ts">
+import { AiEditor } from 'aieditor'
+import 'aieditor/dist/style.css'
+import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const divRef = ref()
+let aiEditor: AiEditor | null
+const props = withDefaults(
+  defineProps<{
+    /**
+     * html 内容
+     */
+    // modelValue: string
+    /**
+     * 工具栏显示
+     */
+    showToolbar?: boolean
+    /**
+     * 边框宽度
+     */
+    borderWidth?: string
+    /**
+     * 编辑器配置 IEditorConfig
+     */
+    editorConfig?: any
+    /**
+     * 是否编辑状态，一直生效（config中edit只用在初始化时生效）
+     */
+    isEdit?: boolean
+  }>(),
+  {
+    // modelValue: '',
+    showToolbar: true,
+    borderWidth: '1px',
+    editorConfig: {},
+  },
+)
+const model = defineModel({
+  type: [String, null, undefined],
+  required: false,
+  default: null
+})
+const text = defineModel('text', {
+  type: String,
+  required: false,
+})
+//字体对照表
+const fontSizes = [
+  { name: '八号', pt: 5, px: 5 },
+  { name: '七号', pt: 5.5, px: 6 },
+  { name: '小六', pt: 6.5, px: 8 },
+  { name: '六号', pt: 7.5, px: 9 },
+  { name: '小五', pt: 9, px: 11 },
+  { name: '五号', pt: 10.5, px: 12 },
+  { name: '小四', pt: 12, px: 14 },
+  { name: '四号', pt: 14, px: 16 },
+  { name: '小三', pt: 15, px: 18 },
+  { name: '三号', pt: 16, px: 19 },
+  { name: '小二', pt: 18, px: 21 },
+  { name: '二号', pt: 22, px: 26 },
+  { name: '小一', pt: 24, px: 28 },
+  { name: '一号', pt: 26, px: 30 },
+  { name: '小初', pt: 36, px: 42 },
+  { name: '初号', pt: 42, px: 49 },
+]
+function setDefaultPx(html: string) {
+  // 创建临时div用于解析HTML
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = html
+  // 获取所有p元素
+  const pElements = tempDiv.querySelectorAll('p')
+
+  pElements.forEach((p) => {
+    // 检查是否有内联样式设置了fontSize
+    const hasInlineFontSize = !!p.style.fontSize
+    // 只有当没有设置字体大小时才添加
+    if (!hasInlineFontSize) {
+      p.style.fontSize = '14px'
+    }
+  })
+  return tempDiv.innerHTML
+}
+function convertPxToPt(html: string) {
+  html = setDefaultPx(html)
+  const regex = /font-size: (\d+)px/g
+  return html.replace(regex, (match, pxValue) => {
+    const px = parseInt(pxValue, 10)
+    const entry = fontSizes.find((item) => item.px === px)
+    if (entry) {
+      return `font-size: ${entry.pt}pt`
+    }
+    return match
+  })
+}
+function convertPtToPx(html: string) {
+  const regex = /font-size: (\d+)pt/g
+  return html.replace(regex, (match, ptValue) => {
+    const pt = parseFloat(ptValue)
+    const entry = fontSizes.find((item) => item.pt === pt)
+    if (entry) {
+      return `font-size: ${entry.px}px`
+    }
+    return match
+  })
+}
+//默认的配置
+const defaultConfig = {
+  placeholder: '请输入内容...',
+  draggable: false, // 禁止拖拽
+  toolbarExcludeKeys: [
+    'eraser',
+    'link',
+    'code',
+    'attachment',
+    'code-block',
+    'video',
+    'ai',
+    'quote',
+    'emoji',
+  ],
+  textSelectionBubbleMenu: {
+    enable: true,
+    items: ['Bold', 'Italic', 'Underline', 'Strike', 'code', 'comment'],
+  },
+  image: {
+    uploaderEvent: {
+      onUploadBefore: (file, uploadUrl, headers) => {
+        if (file.size > 2 * 1024 * 1024) {
+          ElMessage.warning('图片大小不能超过2M')
+          return false
+        }
+      },
+      // onSuccess: (file, response) => {
+      //   console.log('onSuccess', file, response)
+      // }
+    },
+  },
+  htmlPasteConfig: {
+    pasteProcessor: (html) => {
+      // return html;
+      // console.log('html:', html, 'xxxxxx', removeAllFontFamilyStyles(html))
+      return removeAllFontFamilyStyles(html)
+    },
+  },
+  fontSize: {
+    defaultValue: ' ',
+    values: [
+      { name: '小四', value: 14 },
+      { name: '初号', value: 49 },
+      { name: '小初', value: 42 },
+      { name: '一号', value: 30 },
+      { name: '小一', value: 28 },
+      { name: '二号', value: 26 },
+      { name: '小二', value: 21 },
+      { name: '三号', value: 19 },
+      { name: '小三', value: 18 },
+      { name: '四号', value: 16 },
+      { name: '小四', value: 14 },
+      { name: '五号', value: 12 },
+      { name: '小五', value: 11 },
+      { name: '六号', value: 9 },
+      { name: '小六', value: 8 },
+      { name: '七号', value: 6 },
+      { name: '八号', value: 5 },
+    ],
+  },
+  onChange: (editor: AiEditor) => {
+    setFooter()
+    model.value = editor.getHtml()
+    text.value = editor.getText()
+    setTimeout(() => {
+      setContent()
+    }, 200)
+  },
+}
+
+/**
+ * 修改样式
+ */
+function setContent() {
+  let html = aiEditor!.getHtml()
+  html = calcImagesHeight(html)
+  model.value = convertPxToPt(html)
+}
+
+/**
+ * 移除html字体相关设置
+ * @param html
+ */
+function removeAllFontFamilyStyles(html: string): string {
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = html
+
+  function processElement(element: Element) {
+    if (element.hasAttribute('style')) {
+      let style = element.getAttribute('style') || ''
+      // 规范化样式字符串：确保每个属性以分号结尾
+      style = normalizeStyleString(style)
+
+      // 使用简化的正则表达式移除字体相关属性（现在可以安全地假设每个属性后都有分号）
+      style = style.replace(
+        /(?:font-family|mso-(?:ascii|hansi|bidi|fareast|east-asian|font)-font-family)\s*:\s*[^;]+;/gi,
+        '',
+      )
+      // 清理空样式
+      style = style.trim()
+      if (style) {
+        element.setAttribute('style', style)
+      } else {
+        element.removeAttribute('style')
+      }
+    }
+
+    // 移除标签上的字体家族相关属性
+    const fontFamilyAttrs = [
+      'font-family',
+      'face',
+      'mso-hansi-font-family',
+      'mso-bidi-font-family',
+      'mso-ascii-font-family',
+      'mso-fareast-font-family',
+      'mso-east-asian-font-family',
+      'mso-font-font-family',
+    ]
+    fontFamilyAttrs.forEach((attr) => element.removeAttribute(attr))
+
+    // 递归处理子元素
+    Array.from(element.children).forEach((child) => processElement(child))
+  }
+
+  // 规范化样式字符串：确保每个属性以分号结尾
+  function normalizeStyleString(style: string): string {
+    // 移除首尾空格
+    style = style.trim()
+
+    // 如果样式为空，直接返回
+    if (!style) return ''
+
+    // 如果最后一个字符不是分号，添加分号
+    if (style.charAt(style.length - 1) !== ';') {
+      style += ';'
+    }
+
+    return style
+  }
+
+  Array.from(tempDiv.children).forEach((child) => processElement(child))
+  return tempDiv.innerHTML
+}
+/**
+ * 计算富文本框中图片的高度并赋值
+ */
+function calcImagesHeight(html: string) {
+  const map = new Map()
+  const imageElements = divRef.value.querySelectorAll('img.resize-obj')
+  if (imageElements.length > 0) {
+    imageElements.forEach((imageElement: any) => {
+      const width = imageElement.offsetWidth
+      const height = imageElement.offsetHeight
+      if (width > 1 && height > 1) {
+        map.set(
+          imageElement.src.length > 100 ? imageElement.src.substring(0, 100) : imageElement.src,
+          height,
+        )
+      }
+    })
+    for (const [key, value] of map) {
+      html = customStringReplacement(html, `${key}`, '>', `height="auto"`, `height="${value}"`)
+    }
+  }
+  return html
+}
+
+function customStringReplacement(
+  str: string,
+  startMarker: string,
+  endMarker: string,
+  target: string,
+  replacement: string,
+): string {
+  let result = ''
+  let currentIndex = 0
+
+  while (true) {
+    const startIndex = str.indexOf(startMarker, currentIndex)
+    if (startIndex === -1) {
+      result += str.slice(currentIndex)
+      break
+    }
+
+    const endIndex = str.indexOf(endMarker, startIndex + startMarker.length)
+    if (endIndex === -1) {
+      result += str.slice(currentIndex)
+      break
+    }
+
+    result += str.slice(currentIndex, startIndex + startMarker.length)
+    const middle = str.slice(startIndex + startMarker.length, endIndex)
+    const newMiddle = middle.replace(new RegExp(target, 'g'), replacement)
+    result += newMiddle
+    result += endMarker
+    currentIndex = endIndex + 1
+  }
+
+  return result
+}
+
+watch(
+  () => props.isEdit,
+  (val) => {
+    if (aiEditor) {
+      aiEditor.setEditable(val)
+      //头尾显隐
+      const footer = divRef.value?.querySelector('aie-footer') as HTMLElement
+      if (footer) {
+        footer.style.display = val ? '' : 'none'
+      }
+      const header = divRef.value?.querySelector('aie-header') as HTMLElement
+      if (header) {
+        header.style.display = val ? '' : 'none'
+      }
+    }
+  },
+  { immediate: true },
+)
+function initHtml(html: string) {
+  html = customStringReplacement(html, '<img', '>', 'height="[0-9]+"', 'height="auto"')
+  return convertPtToPx(html)
+}
+
+onMounted(() => {
+  const config = {
+    element: divRef.value as Element,
+    content: initHtml(model.value ?? ''),
+    ...defaultConfig,
+    ...props.editorConfig,
+    fontFamily: {
+      values: [
+        { name: '宋体', value: 'SimSun' },
+        { name: '仿宋', value: 'FangSong' },
+        { name: '黑体', value: 'SimHei' },
+        { name: '楷体', value: 'KaiTi' },
+        { name: '微软雅黑', value: 'Microsoft YaHei' },
+        { name: '方正仿宋简体_GBK', value: 'FangSong_GB2312' },
+        { name: 'Arial', value: 'Arial' },
+        { name: 'Times New Roman', value: 'Times New Roman' },
+      ],
+    },
+    onCreated: (editor: AiEditor) => {},
+  }
+  // 隐藏工具栏
+  if (!props.showToolbar) {
+    config.toolbarKeys = []
+  }
+  setTimeout(() => {
+    aiEditor = new AiEditor(config)
+    setTimeout(() => {
+      //当隐藏工具栏时，也隐藏 aie-footer/aie-header 元素
+      if (!props.showToolbar || props.editorConfig?.editable === false) {
+        const footer = divRef.value?.querySelector('aie-footer') as HTMLElement
+        if (footer) {
+          footer.style.display = 'none'
+        }
+        const header = divRef.value?.querySelector('aie-header') as HTMLElement
+        if (header) {
+          header.style.display = 'none'
+        }
+      }
+      setFooter()
+    }, 100)
+  }, 100)
+})
+
+const setFooter = () => {
+  const footer = divRef.value?.querySelector('aie-footer') as HTMLElement
+  if (footer) {
+    const footerSpan = footer.querySelector('span') as HTMLElement
+    if (footerSpan && footerSpan.textContent) {
+      footerSpan.textContent = footerSpan.textContent.replace(
+        'Powered by AiEditor, Characters',
+        '字数',
+      )
+    }
+  }
+}
+
+onUnmounted(() => {
+  aiEditor && aiEditor.destroy()
+})
+
+defineExpose({
+  getHtml: () => {
+    if (aiEditor) {
+      return aiEditor.getHtml()
+    } else {
+      return ''
+    }
+  },
+  getText: () => {
+    if (aiEditor) {
+      return aiEditor.getText()
+    } else {
+      return ''
+    }
+  },
+  setContent: (html: string,focus: boolean=false) => {
+    if (aiEditor) {
+      aiEditor.setContent(initHtml(html),focus)
+    }
+  },
+})
+</script>
+<style scoped lang="scss">
+:deep {
+  .aie-container {
+    border-width: v-bind(borderWidth);
+    border-color: #dcdfe6;
+  }
+  .aie-content {
+    p {
+      margin: 6px 0;
+    }
+  }
+}
+</style>