调整富文本编辑器禁用效果

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>

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>