adtec-core-package 2.0.0 → 2.0.2

package/src/components/RichTextEditor/RichTextEditor.vue

@@ -1,383 +1,383 @@
-<!--创建人 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%',
-      }"
-    />
-  </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, required: true })
-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 convertPxToPt(html: string) {
-  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 > 1024 * 1024) {
-          ElMessage.warning("图片大小不能超过1M")
-          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,
-    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) => {
-    if (aiEditor) {
-      aiEditor.setContent(initHtml(html))
-    }
-  },
-})
-</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%',
+      }"
+    />
+  </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, required: true })
+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 convertPxToPt(html: string) {
+  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 > 1024 * 1024) {
+          ElMessage.warning("图片大小不能超过1M")
+          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,
+    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) => {
+    if (aiEditor) {
+      aiEditor.setContent(initHtml(html))
+    }
+  },
+})
+</script>
+<style scoped lang="scss">
+:deep {
+  .aie-container {
+    border-width: v-bind(borderWidth);
+    border-color: #dcdfe6;
+  }
+  .aie-content {
+    p {
+      margin: 6px 0;
+    }
+  }
+}
+</style>