From c4bff93b446c4a81954baf976831fae0256c1f94 Mon Sep 17 00:00:00 2001
From: taoran <taoran0796@163.com>
Date: Thu, 20 Jun 2024 14:29:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=EF=BC=9A=E5=9C=A8=E7=BA=BF=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?/HTML=E8=8E=B7=E5=8F=96=EF=BC=9B=20=E5=9B=9E=E5=88=B0=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/logo/richtextEditor.png      | Bin 0 -> 3274 bytes
 src/components/Home/Home.vue               |   3 +
 src/components/Tools/TextEdit/TextEdit.vue | 102 +++++++++++++++++++++
 src/components/Tools/tools.ts              |   9 ++
 src/router/router.ts                       |  10 ++
 5 files changed, 124 insertions(+)
 create mode 100644 public/images/logo/richtextEditor.png
 create mode 100644 src/components/Tools/TextEdit/TextEdit.vue

diff --git a/public/images/logo/richtextEditor.png b/public/images/logo/richtextEditor.png
new file mode 100644
index 0000000000000000000000000000000000000000..f76a44608b80e0aa2991440b8627984f03eb879d
GIT binary patch
literal 3274
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

literal 0
HcmV?d00001

diff --git a/src/components/Home/Home.vue b/src/components/Home/Home.vue
index 3d00ca8..11f4e1d 100644
--- a/src/components/Home/Home.vue
+++ b/src/components/Home/Home.vue
@@ -58,6 +58,9 @@ onMounted(() => {
           <div class="w-[24%] c-md:w-[24%] c-sm:w-[32%] "></div>
       </div>
     </div>
+
+    <!-- 返回顶部 -->
+    <el-backtop :right="10" :bottom="50" />
   </div>
 </template>
 
diff --git a/src/components/Tools/TextEdit/TextEdit.vue b/src/components/Tools/TextEdit/TextEdit.vue
new file mode 100644
index 0000000..d0519b1
--- /dev/null
+++ b/src/components/Tools/TextEdit/TextEdit.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { reactive, ref, shallowRef, onBeforeUnmount, onMounted } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import '@wangeditor/editor/dist/css/style.css' // 引入富文本 css
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'  //富文本组件
+import { copy } from '@/utils/string'
+import Html from '../Html/Html.vue'
+const info = reactive({
+  title: "在线文本编辑/HTML获取",
+  mode: 'default',
+})
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+// 内容
+const content = ref(``)
+// html
+const html = ref('')
+
+// 工具栏配置
+const toolbarConfig = {
+  excludeKeys: [
+    "uploadImage",
+    "group-video",
+    "insertLink",
+  ]
+}
+
+//编辑器配置
+const editorConfig = { placeholder: '请输入内容...' }
+
+const handleCreated = (editor) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+  // html = editor.getHtml()
+}
+
+const handleChange = (editor) => {
+  html.value = editor.getHtml()
+}
+
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+onMounted(() => {
+
+})
+
+//copy
+const copyRes = async (resStr: string) => {
+  copy(resStr)
+}
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="p-4 rounded-2xl bg-white h-[510px]">
+      <div class="border z-10 mt-3 h-96">
+        <Toolbar
+          class=""
+          :editor="editorRef"
+          :defaultConfig="toolbarConfig"
+          :mode="info.mode"
+        />
+        <Editor
+          class="border"
+          v-model="content"
+          :defaultConfig="editorConfig"
+          :mode="info.mode"
+          @onCreated="handleCreated"
+          @onChange="handleChange"
+        />
+      </div>
+      
+    </div>
+
+    <div class="p-4 mt-3 rounded-2xl bg-white">
+      <el-button type="primary" @click="copyRes(html)">复制HTML</el-button>
+      <el-input
+        v-model="html"
+        disabled
+        class="mt-3"
+        type="textarea"
+        autosize
+        placeholder="html预览处"
+      />
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+.downext-select{
+  @apply w-24
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Tools/tools.ts b/src/components/Tools/tools.ts
index c8de1b9..b186f43 100644
--- a/src/components/Tools/tools.ts
+++ b/src/components/Tools/tools.ts
@@ -186,6 +186,15 @@ export function getToolsCate() {
           cateId: 3,
           cate: '文本处理',
         },
+        {
+          id: 1,
+          title: '在线文本编辑/HTML获取',
+          logo: '/images/logo/richtextEditor.png',
+          desc: '在线富文本编辑, html实时预览，在线编辑文本，文本编辑获取html',
+          url: '/textEdit/',
+          cateId: 3,
+          cate: '文本处理'
+        },
       ]
     },
     {
diff --git a/src/router/router.ts b/src/router/router.ts
index cd8356e..1230d3f 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -421,6 +421,16 @@ export const constantRoute = [
       description: '提供在线css格式化,在线css压缩工具',
     }
   },
+  {
+    path: '/TextEdit',
+    component: () => import('@/components/Tools/TextEdit/TextEdit.vue'),
+    name: 'TextEdit',
+    meta: {
+      title: "在线文本编辑/HTML获取",
+      keywords: '文本编辑，富文本预览，在线编辑文本，文本编辑获取html',
+      description: '在线富文本编辑, html实时预览，在线编辑文本，文本编辑获取html',
+    }
+  },
   // 关于
   {
     path: '/about',