From 64e8cdba0a05f7e31687a22c8269d3a61b0b421d Mon Sep 17 00:00:00 2001
From: Double-_-Z <2492419643@qq.com>
Date: Fri, 1 Nov 2024 23:31:28 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E7=A6=81=E7=94=A8=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/editor/index.vue        | 36 ++++++++++++++++++++++++--
 src/views/article/component/upload.vue |  4 +--
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/editor/index.vue b/src/components/editor/index.vue
index 4ded471..ca99c44 100644
--- a/src/components/editor/index.vue
+++ b/src/components/editor/index.vue
@@ -1,6 +1,11 @@
 <template>
 	<div class="editor-container">
-		<Toolbar :editor="editorRef" :mode="mode" />
+		<Toolbar v-if="!props.disable" :editor="editorRef" :mode="mode" />
+		<div v-else class="replace">
+			<el-icon class="full" size="25px" @click="openCurrenFullscreen">
+				<ele-FullScreen />
+			</el-icon>
+		</div>
 		<Editor
 			:mode="mode"
 			:defaultConfig="state.editorConfig"
@@ -15,7 +20,7 @@
 <script setup lang="ts" name="wngEditor">
 // https://www.wangeditor.com/v5/for-frame.html#vue3
 import '@wangeditor/editor/dist/css/style.css';
-import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue';
+import { reactive, shallowRef, watch, onBeforeUnmount, ref } from 'vue';
 import { IDomEditor } from '@wangeditor/editor';
 import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
 import { articleApi } from '/@/api/article';
@@ -58,6 +63,7 @@ const editorRef = shallowRef();
 const state = reactive({
 	editorConfig: {
 		placeholder: props.placeholder,
+		readOnly: props.disable,
 		MENU_CONF:{}
 	},
 	editorVal: props.getHtml,
@@ -115,6 +121,17 @@ const handleChange = (editor: IDomEditor) => {
 	emit('update:getHtml', editor.getHtml());
 	emit('update:getText', editor.getText());
 };
+
+const isFull = ref(false);	// 是否全屏
+
+// 全屏
+const openCurrenFullscreen = () => {
+    const editor = editorRef.value // 获取 editor ，必须等待它渲染完之后
+    if (editor == null) return;
+	isFull.value ? editor.unFullScreen() : editor.fullScreen();
+	isFull.value = !isFull.value;
+}
+
 // 页面销毁时
 onBeforeUnmount(() => {
 	const editor = editorRef.value;
@@ -128,6 +145,7 @@ watch(
 	(bool) => {
 		const editor = editorRef.value;
 		if (editor == null) return;
+		console.log(bool)
 		bool ? editor.disable() : editor.enable();
 	},
 	{
@@ -145,3 +163,17 @@ watch(
 	}
 );
 </script>
+<style scoped lang="scss">
+.replace{
+	background-color: #ffffff;
+	border-top: 1px solid #e4e7ed;
+	border-left: 1px solid #e4e7ed;
+	border-right: 1px solid #e4e7ed;
+	display: flex;
+	justify-content: flex-end;
+	.full{
+		padding: 5px;
+		cursor: pointer;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/article/component/upload.vue b/src/views/article/component/upload.vue
index 701b015..3a6050a 100644
--- a/src/views/article/component/upload.vue
+++ b/src/views/article/component/upload.vue
@@ -74,7 +74,7 @@
 					</el-col>
 				</el-row>
 				<el-form-item prop="text" label-width="0px">
-                    <Editor v-model:get-html="state.data.text" :disable="true" />
+                    <Editor v-model:get-html="state.data.text" style="width: 100%;"/>
                 </el-form-item>
                 <el-row class="flex mt15">
                     <div class="flex-margin" style="width: 100%;display: flex;justify-content: flex-end;">
@@ -92,7 +92,7 @@
 		</el-card>
         <!-- 封面预览弹窗 -->
         <el-dialog v-model="dialogVisible">
-            <img w-full :src="dialogImageUrl" alt="预览" />
+            <img width="100%" w-full :src="dialogImageUrl" alt="预览" />
         </el-dialog>
 	</div>
 </template>