From bfae205d6974a01a14875fbf0581178b1c9c8844 Mon Sep 17 00:00:00 2001
From: SuperCuteXiaoSi <1531733886@qq.com>
Date: Sat, 22 Jan 2022 13:28:05 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=B7=BB=E5=8A=A0=E5=AF=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  1 +
 src/views/editor/richText/index.vue | 40 ++++++++++++++++++++++++++---
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index ea67de35..d4a612d8 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/editor/richText/index.vue b/src/views/editor/richText/index.vue
index c24a313f..cf80cded 100644
--- a/src/views/editor/richText/index.vue
+++ b/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>