feature: 添加富文本编辑器

package.json

@@ -31,6 +31,7 @@
     "echarts": "^5.2.2",
     "element-plus": "^1.3.0-beta.5",
     "es6-promise": "^4.2.8",
+    "i18next": "^21.6.7",
     "intro.js": "^4.3.0",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",

src/views/editor/richText/index.vue

@@ -1,8 +1,42 @@
 <template>
-  <div class="page-container"></div>
+  <div class="page-container">
+    <div ref="editorELRef"></div>
+    <div class="innerHTML" :innerHTML="html"></div>
+  </div>
 </template>
 <script lang="ts" setup>
-  // import wangeditor from 'wangeditor';
+  import { onMounted, ref, unref } from 'vue';
+  import wangeDitor from 'wangeditor';
+  import i18next from 'i18next';
+  import { useI18n } from '@/hooks/web/useI18n';
+
+  const editorELRef = ref<HTMLElement>({} as HTMLElement);
+  const editor = ref<wangeDitor>({} as wangeDitor);
+  const html = ref<string>('');
+  const { locale } = useI18n();
+
+  function init() {
+    editor.value = new wangeDitor(unref(editorELRef));
+    editor.value.config.lang = locale.value === 'zh-ch' ? 'zh-ch' : 'en';
+    editor.value.i18next = i18next;
+    editor.value.config.height = 500;
+    Object.assign(editor.value.config, {
+      onchange() {
+        html.value = editor.value.txt.html() as string;
+      },
+    });
+    editor.value.create();
+  }
+
+  onMounted(() => {
+    init();
+  });
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+  .innerHTML {
+    margin-top: 20px;
+    min-height: 50px;
+    border: 1px solid #e3e3e3;
+  }
+</style>