fix:第一初始

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.dockerignore

@@ -0,0 +1,21 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.eslintcache
+report.html
+
+yarn.lock
+npm-debug.log*
+.pnpm-error.log*
+.pnpm-debug.log
+tests/**/coverage/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+tsconfig.tsbuildinfo

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.env

@@ -0,0 +1,5 @@
+# 平台本地运行端口号
+VITE_PORT = 8848
+
+# 是否隐藏首页 隐藏 true 不隐藏 false （勿删除，VITE_HIDE_HOME只需在.env文件配置）
+VITE_HIDE_HOME = false

.env.development

@@ -0,0 +1,8 @@
+# 平台本地运行端口号
+VITE_PORT = 8848
+
+# 开发环境读取配置文件路径
+VITE_PUBLIC_PATH = /
+
+# 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
+VITE_ROUTER_HISTORY = "hash"

.env.production

@@ -0,0 +1,13 @@
+# 线上环境平台打包路径
+VITE_PUBLIC_PATH = /
+
+# 线上环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
+VITE_ROUTER_HISTORY = "hash"
+
+# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
+VITE_CDN = false
+
+# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
+# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+# 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+VITE_COMPRESSION = "none"

.env.staging

@@ -0,0 +1,16 @@
+# 预发布也需要生产环境的行为
+# https://cn.vitejs.dev/guide/env-and-mode.html#modes
+# NODE_ENV = development
+
+VITE_PUBLIC_PATH = /
+
+# 预发布环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
+VITE_ROUTER_HISTORY = "hash"
+
+# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
+VITE_CDN = true
+
+# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
+# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+# 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+VITE_COMPRESSION = "none"

.gitignore

@@ -0,0 +1,22 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.eslintcache
+report.html
+vite.config.*.timestamp*
+
+yarn.lock
+npm-debug.log*
+.pnpm-error.log*
+.pnpm-debug.log
+tests/**/coverage/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+tsconfig.tsbuildinfo

.history/src/views/applicationMange/form_20250103134819.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+import { menuGateWayTypeOptions } from "./utils/enums";
+import { Delete, Plus, CirclePlus, Close } from "@element-plus/icons-vue";
+import useForm from "./utils/useForm";
+// import dynamicForm from "./components/dynamicForm.vue";
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    name: "",
+    code: "",
+    remark: "",
+    gatewayType: 0
+  })
+});
+
+const ruleFormRef = ref();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+const { dataList } = useForm();
+const imageUrl = ref(null);
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-position="top"
+    label-width="110px"
+  >
+    <el-form-item label="应用名称" prop="name">
+      <el-input
+        v-model="newFormInline.gatewayName"
+        clearable
+        placeholder="请填写模板名称"
+      />
+    </el-form-item>
+    <el-form-item label="应用描述">
+      <el-input
+        v-model="newFormInline.remark"
+        placeholder="请输入"
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item label="应用图标">
+      <el-upload
+        class="avatar-uploader"
+        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+        :show-file-list="false"
+      >
+        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+      </el-upload>
+    </el-form-item>
+    <el-form-item label="应用状态" prop="code" label-position="left">
+      <el-switch v-model="newFormInline.status" />
+    </el-form-item>
+    <el-form-item label="应用标签">
+      <el-input-tag
+        placeholder="Please input"
+        aria-label="Please click the Enter key after input"
+      />
+    </el-form-item>
+    <el-form-item label="是否允许用户从消息列表中移除">
+      <el-switch v-model="newFormInline.status" />
+    </el-form-item>
+    <el-form-item label="跳转方式">
+      <el-radio-group v-model="newFormInline.status">
+        <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
+        <el-radio value="Value 1">消息列表</el-radio>
+        <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
+        <el-radio label="Label 2 & Value 2">第三方页面</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="提醒接口配置" />
+    <div class="three-form">
+      <el-form-item label="请求地址">
+        <div class="form-item">
+          <el-select
+            v-model="newFormInline.gatewayType"
+            placeholder="请选择状态"
+            clearable
+            style="width: 30%"
+          >
+            <el-option
+              v-for="(item, index) in menuGateWayTypeOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-input v-model="newFormInline.remark" placeholder="请输入" />
+          <el-button type="primary"> 查询 </el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label="添加参数:" prop="code" label-position="left">
+        <el-switch v-model="newFormInline.status" />
+      </el-form-item>
+      <el-form-item label="添加请求头:" prop="code" label-position="left">
+        <el-switch v-model="newFormInline.status" />
+      </el-form-item>
+      <el-form-item label="添加X-Id-Token:" prop="code" label-position="left">
+        <el-switch v-model="newFormInline.status" />
+      </el-form-item>
+      <el-form-item label="接口返回">
+        <el-input
+          v-model="newFormInline.remark"
+          placeholder="请输入"
+          type="textarea"
+        />
+      </el-form-item>
+      <el-form-item label="绑定参数" prop="name" />
+      <el-form-item label="提醒数" prop="name">
+        <el-input
+          v-model="newFormInline.gatewayName"
+          clearable
+          placeholder="请填写模板名称"
+        />
+      </el-form-item>
+      <el-form-item label="最新消息" prop="name">
+        <el-input
+          v-model="newFormInline.gatewayName"
+          clearable
+          placeholder="请填写模板名称"
+        />
+      </el-form-item>
+      <el-form-item label="最新时间" prop="name">
+        <el-input
+          v-model="newFormInline.gatewayName"
+          clearable
+          placeholder="请填写模板名称"
+        />
+      </el-form-item>
+      <el-form-item label="PC端跳转连接" prop="name">
+        <el-input
+          v-model="newFormInline.gatewayName"
+          clearable
+          placeholder="请填写模板名称"
+        />
+      </el-form-item>
+    </div>
+    <!-- <dynamicForm
+      v-if="dataList[newFormInline.parameterDefineId]"
+      :records="dataList[newFormInline.parameterDefineId]"
+    /> -->
+  </el-form>
+</template>
+<style>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+.form-item {
+  display: flex;
+  width: 100%;
+  gap: 5px;
+}
+.three-form {
+  padding-left: 50px;
+}
+</style>

.history/src/views/applicationMange/form_20250103134825.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+import { menuGateWayTypeOptions } from "./utils/enums";
+import { Delete, Plus, CirclePlus, Close } from "@element-plus/icons-vue";
+import useForm from "./utils/useForm";
+// import dynamicForm from "./components/dynamicForm.vue";
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    name: "",
+    code: "",
+    remark: "",
+    gatewayType: 0
+  })
+});
+
+const ruleFormRef = ref();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+const { dataList } = useForm();
+const imageUrl = ref(null);
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-position="top"
+    label-width="110px"
+  >
+    <el-form-item label="应用名称" prop="name">
+      <el-input
+        v-model="newFormInline.gatewayName"
+        clearable
+        placeholder="请填写模板名称"
+      />
+    </el-form-item>
+    <el-form-item label="应用描述">
+      <el-input
+        v-model="newFormInline.remark"
+        placeholder="请输入"
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item label="应用图标">
+      <el-upload
+        class="avatar-uploader"
+        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+        :show-file-list="false"
+      >
+        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+      </el-upload>
+    </el-form-item>
+    <el-form-item label="应用状态" prop="code" label-position="left">
+      <el-switch v-model="newFormInline.status" />
+    </el-form-item>
+    <el-form-item label="应用标签">
+      <el-input-tag
+        placeholder="Please input"
+        aria-label="Please click the Enter key after input"
+      />
+    </el-form-item>
+    <el-form-item label="是否允许用户从消息列表中移除">
+      <el-switch v-model="newFormInline.status" />
+    </el-form-item>
+    <el-form-item label="跳转方式">
+      <el-radio-group v-model="newFormInline.status">
+        <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
+        <el-radio value="Value 1">消息列表</el-radio>
+        <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
+        <el-radio label="Label 2 & Value 2">第三方页面</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="提醒接口配置" />
+    <div class="three-form">
+      <el-form-item label="请求地址">
+        <div class="form-item">
+          <el-select
+            v-model="newFormInline.gatewayType"
+            placeholder="请选择状态"
+            clearable
+            style="width: 30%"
+          >
+            <el-option
+              v-for="(item, index) in menuGateWayTypeOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-input v-model="newFormInline.remark" placeholder="请输入" />
+          <el-button type="primary"> 查询 </el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label="添加参数:" prop="code" label-position="left">
+        <el-switch v-model="newFormInline.status" />
+      </el-form-item>
+      <el-form-item label="添加请求头:" prop="code" label-position="left">
+        <el-switch v-model="newFormInline.status" />
+      </el-form-item>
+      <el-form-item label="添加X-Id-Token:" prop="code" label-position="left">
+        <el-switch v-model="newFormInline.status" />
+      </el-form-item>
+      <el-form-item label="接口返回">
+        <el-input
+          v-model="newFormInline.remark"
+          placeholder="请输入"
+          type="textarea"
+        />
+      </el-form-item>
+      <el-form-item label="绑定参数" prop="name" />
+      <el-form-item label="提醒数" prop="name">
+        <el-input
+          v-model="newFormInline.gatewayName"
+          clearable
+          placeholder="请填写模板名称"
+        />
+      </el-form-item>
+      <el-form-item label="最新消息" prop="name">
+        <el-input
+          v-model="newFormInline.gatewayName"
+          clearable
+          placeholder="请填写模板名称"
+        />
+      </el-form-item>
+      <el-form-item label="最新时间" prop="name">
+        <el-input
+          v-model="newFormInline.gatewayName"
+          clearable
+          placeholder="请填写模板名称"
+        />
+      </el-form-item>
+      <el-form-item label="PC端跳转连接" prop="name">
+        <el-input
+          v-model="newFormInline.gatewayName"
+          clearable
+          placeholder="请填写模板名称"
+        />
+      </el-form-item>
+    </div>
+    <!-- <dynamicForm
+      v-if="dataList[newFormInline.parameterDefineId]"
+      :records="dataList[newFormInline.parameterDefineId]"
+    /> -->
+  </el-form>
+</template>
+<style>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+.form-item {
+  display: flex;
+  width: 100%;
+  gap: 5px;
+}
+.three-form {
+  padding-left: 50px;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241218172311.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224141732.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224141733.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224142416.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224142436.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224142940.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+sty

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224142941.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style lang="sass">
+.wangeditor{
+  
+}
+
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224142944.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor{
+
+}
+
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224142946.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor{
+  ba
+}
+
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224142948.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor{
+  background-color: ;
+}
+
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224142953.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224142954.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143303.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ['menu-key1', 'menu-key2'],
+}
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143314.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ['menu-key1', 'menu-key2'],
+}
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143315.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["menu-key1", "menu-key2"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143336.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.excludeKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["menu-key1", "menu-key2"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143337.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.excludeKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["menu-key1", "menu-key2"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143348.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["menu-key1", "menu-key2"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143459.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+// toolbarConfig.insertKeys = {
+//   index: 0, // 插入的位置，基于当前的 toolbarKeys
+//   keys: ["menu-key1", "menu-key2"]
+// };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143520.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+// toolbarConfig.insertKeys = {
+//   index: 0, // 插入的位置，基于当前的 toolbarKeys
+//   keys: ["menu-key1", "menu-key2"]
+// };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const toolbar = DomEditor.getToolbar(editor)
+
+const curToolbarConfig = toolbar.getConfig()
+console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143607.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+// toolbarConfig.insertKeys = {
+//   index: 0, // 插入的位置，基于当前的 toolbarKeys
+//   keys: ["menu-key1", "menu-key2"]
+// };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143639.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["menu-key1", "menu-key2"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143640.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["menu-key1", "menu-key2"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143836.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143837.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143839.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+// toolbarConfig.insertKeys = {
+//   index: 0, // 插入的位置，基于当前的 toolbarKeys
+//   keys: ["fullScreen"]
+// };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143840.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+// toolbarConfig.insertKeys = {
+//   index: 0, // 插入的位置，基于当前的 toolbarKeys
+//   keys: ["fullScreen"]
+// };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143854.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143857.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224143858.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144057.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+editor.addButton('customButton', {
+  iconClass: 'fa fa-custom-button',
+  title: '自定义按钮',
+  click: function() {
+    // 自定义按钮的点击事件处理函数
+  }
+});
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144103.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144106.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  editor.addButton('customButton', {
+  iconClass: 'fa fa-custom-button',
+  title: '自定义按钮',
+  click: function() {
+    // 自定义按钮的点击事件处理函数
+  }
+});
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144108.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  editor.addButton("customButton", {
+    iconClass: "fa fa-custom-button",
+    title: "自定义按钮",
+    click: function () {
+      // 自定义按钮的点击事件处理函数
+    }
+  });
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144110.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  editor.addButton("customButton", {
+    iconClass: "fa fa-custom-button",
+    title: "自定义按钮",
+    click: function () {
+      // 自定义按钮的点击事件处理函数
+    }
+  });
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144111.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["fullScreen"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  editor.addButton("customButton", {
+    iconClass: "fa fa-custom-button",
+    title: "自定义按钮",
+    click: function () {
+      // 自定义按钮的点击事件处理函数
+    }
+  });
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144115.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  editor.addButton("customButton", {
+    iconClass: "fa fa-custom-button",
+    title: "自定义按钮",
+    click: function () {
+      // 自定义按钮的点击事件处理函数
+    }
+  });
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144116.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  editor.addButton("customButton", {
+    iconClass: "fa fa-custom-button",
+    title: "自定义按钮",
+    click: function () {
+      // 自定义按钮的点击事件处理函数
+    }
+  });
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144159.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+ 
+    factory() {
+      return new BigFileUploadMenu(); // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144203.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu(); // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144327.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu(); // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144331.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return '2'; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144339.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return ()=>); // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144341.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return () => { }; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144345.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return () => { console.log(2);
+      }; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144348.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return () => {
+        console.log(2);
+      }; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144733.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import insertValue
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return () => {
+        console.log(2);
+      }; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144741.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import insertValue form "./utils/in"
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return () => {
+        console.log(2);
+      }; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144745.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import insertValue form "./utils/insertValue"
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return () => {
+        console.log(2);
+      }; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144750.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import BigFileUploadMenu form "./utils/insertValue"
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return () => {
+        console.log(2);
+      }; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144755.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import {BigFileUploadMenu} form "./utils/insertValue"
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return () => {
+        console.log(2);
+      }; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144756.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import {BigFileUploadMenu} form "./utils/insertValue"
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return () => {
+        console.log(2);
+      }; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144809.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import {BigFileUploadMenu} form "./utils/insertValue"
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu()
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144814.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import {BigFileUploadMenu} ftom "./utils/insertValue"
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu()
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144816.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "./utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144834.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144857.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144923.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224144924.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145054.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new InsertVariableMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145055.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new InsertVariableMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145056.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new InsertVariableMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145239.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+// 自定义插入变量菜单
+const InsertVariableMenu = {
+  key: 'insertVariable',  // 唯一标识
+  title: '插入变量',  // 菜单名称
+  iconSvg: '<svg></svg>',  // 菜单图标（可选，使用自定义的图标）
+
+  // 点击菜单时的操作
+  exec(editor: IDomEditor) {
+    // 在光标位置插入特定内容，比如插入一句话
+    const contentToInsert = '<p>这是插入的变量内容</p>';
+    editor.insertHtml(contentToInsert);  // 插入 HTML
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new InsertVariableMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145240.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+// 自定义插入变量菜单
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  title: "插入变量", // 菜单名称
+  iconSvg: "<svg></svg>", // 菜单图标（可选，使用自定义的图标）
+
+  // 点击菜单时的操作
+  exec(editor: IDomEditor) {
+    // 在光标位置插入特定内容，比如插入一句话
+    const contentToInsert = "<p>这是插入的变量内容</p>";
+    editor.insertHtml(contentToInsert); // 插入 HTML
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new InsertVariableMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145247.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+// 自定义插入变量菜单
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  title: "插入变量", // 菜单名称
+  iconSvg: "<svg></svg>", // 菜单图标（可选，使用自定义的图标）
+
+  // 点击菜单时的操作
+  exec(editor: IDomEditor) {
+    // 在光标位置插入特定内容，比如插入一句话
+    const contentToInsert = "<p>这是插入的变量内容</p>";
+    editor.insertHtml(contentToInsert); // 插入 HTML
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new InsertVariableMenu();
+    }
+  };
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145250.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+// 自定义插入变量菜单
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  title: "插入变量", // 菜单名称
+  iconSvg: "<svg></svg>", // 菜单图标（可选，使用自定义的图标）
+
+  // 点击菜单时的操作
+  exec(editor: IDomEditor) {
+    // 在光标位置插入特定内容，比如插入一句话
+    const contentToInsert = "<p>这是插入的变量内容</p>";
+    editor.insertHtml(contentToInsert); // 插入 HTML
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145311.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+// 自定义插入变量菜单
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  title: "插入变量", // 菜单名称
+  iconSvg: "<svg></svg>", // 菜单图标（可选，使用自定义的图标）
+
+  // 点击菜单时的操作
+  exec(editor: IDomEditor) {
+    // 在光标位置插入特定内容，比如插入一句话
+    const contentToInsert = "<p>这是插入的变量内容</p>";
+    editor.insertHtml(contentToInsert); // 插入 HTML
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145312.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+// 自定义插入变量菜单
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  title: "插入变量", // 菜单名称
+  iconSvg: "<svg></svg>", // 菜单图标（可选，使用自定义的图标）
+
+  // 点击菜单时的操作
+  exec(editor: IDomEditor) {
+    // 在光标位置插入特定内容，比如插入一句话
+    const contentToInsert = "<p>这是插入的变量内容</p>";
+    editor.insertHtml(contentToInsert); // 插入 HTML
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145320.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+// 自定义插入变量菜单
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  title: "插入变量", // 菜单名称
+  iconSvg: "<svg></svg>", // 菜单图标（可选，使用自定义的图标）
+
+  // 点击菜单时的操作
+  exec(editor: IDomEditor) {
+    // 在光标位置插入特定内容，比如插入一句话
+    const contentToInsert = "<p>这是插入的变量内容</p>";
+    editor.insertHtml(contentToInsert); // 插入 HTML
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145321.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+// 自定义插入变量菜单
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  title: "插入变量", // 菜单名称
+  iconSvg: "<svg></svg>", // 菜单图标（可选，使用自定义的图标）
+
+  // 点击菜单时的操作
+  exec(editor: IDomEditor) {
+    // 在光标位置插入特定内容，比如插入一句话
+    const contentToInsert = "<p>这是插入的变量内容</p>";
+    editor.insertHtml(contentToInsert); // 插入 HTML
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145359.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+// 自定义插入变量菜单
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  title: "插入变量", // 菜单名称
+  iconSvg: "<svg></svg>", // 菜单图标（可选，使用自定义的图标）
+
+  // 点击菜单时的操作
+  exec(editor: IDomEditor) {
+    // 在光标位置插入特定内容，比如插入一句话
+    const contentToInsert = "<p>这是插入的变量内容</p>";
+    editor.insertHtml(contentToInsert); // 插入 HTML
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["insertVariable"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145426.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+const InsertVariableMenu = {
+  key: 'insertVariable',  // 唯一标识
+  factory() {
+    return {
+      key: 'insertVariable',  // 唯一标识
+      title: '插入变量',  // 菜单名称
+      iconSvg: '<svg></svg>',  // 可选，菜单图标
+      exec(editor: IDomEditor) {
+        // 插入特定的 HTML 内容
+        const contentToInsert = '<p>这是插入的变量内容</p>';
+        editor.insertHtml(contentToInsert);  // 在光标处插入 HTML
+      },
+    };
+  },
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["insertVariable"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145428.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  factory() {
+    return {
+      key: "insertVariable", // 唯一标识
+      title: "插入变量", // 菜单名称
+      iconSvg: "<svg></svg>", // 可选，菜单图标
+      exec(editor: IDomEditor) {
+        // 插入特定的 HTML 内容
+        const contentToInsert = "<p>这是插入的变量内容</p>";
+        editor.insertHtml(contentToInsert); // 在光标处插入 HTML
+      }
+    };
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["insertVariable"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145429.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  factory() {
+    return {
+      key: "insertVariable", // 唯一标识
+      title: "插入变量", // 菜单名称
+      iconSvg: "<svg></svg>", // 可选，菜单图标
+      exec(editor: IDomEditor) {
+        // 插入特定的 HTML 内容
+        const contentToInsert = "<p>这是插入的变量内容</p>";
+        editor.insertHtml(contentToInsert); // 在光标处插入 HTML
+      }
+    };
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["insertVariable"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145430.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+const InsertVariableMenu = {
+  key: "insertVariable", // 唯一标识
+  factory() {
+    return {
+      key: "insertVariable", // 唯一标识
+      title: "插入变量", // 菜单名称
+      iconSvg: "<svg></svg>", // 可选，菜单图标
+      exec(editor: IDomEditor) {
+        // 插入特定的 HTML 内容
+        const contentToInsert = "<p>这是插入的变量内容</p>";
+        editor.insertHtml(contentToInsert); // 在光标处插入 HTML
+      }
+    };
+  }
+};
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["insertVariable"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  Boot.registerMenu(InsertVariableMenu);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145510.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return ; // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145512.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu(); // 把 `YourMenuClass` 替换为你菜单的 class
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145525.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import {BigFileUploadMenu} form "./utils/insertValue"
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu()
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145531.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["customButton"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145532.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145536.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145538.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { InsertVariableMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new InsertVariableMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145540.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145552.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 2, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224145612.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224151217.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224155414.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted ,de} from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224155417.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted ,defineProps} from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224155427.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted ,defineProps} from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+const props = defineProps([''])
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>

.history/src/views/applicationMange/messageTemplate/components/EditorBase_20241224155430.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { BigFileUploadMenu } from "../utils/insertValue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted ,defineProps} from "vue";
+import { Boot, type IDomEditor } from "@wangeditor/editor";
+
+defineOptions({
+  name: "BaseEditor"
+});
+const props = defineProps(['valueHtml'])
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+  const BigFileUploadMenuButton = {
+    key: "BigFileUploadMenu", // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+      return new BigFileUploadMenu();
+    }
+  };
+  Boot.registerMenu(BigFileUploadMenuButton);
+};
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+toolbarConfig.insertKeys = {
+  index: 0, // 插入的位置，基于当前的 toolbarKeys
+  keys: ["BigFileUploadMenu"]
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<style>
+.wangeditor {
+  background-color: #e5e5e5;
+}
+</style>