富文本编辑器

src/components/piEditor/ext/extImage.ts

@@ -0,0 +1,36 @@
+import { Boot, IButtonMenu, IDomEditor } from '@wangeditor/editor'
+
+export default class ExtImage implements IButtonMenu{
+	key = 'extImage'
+	title = '插入图片'
+	tag: 'button' = 'button'
+	iconSvg = "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>"
+
+	// 执行逻辑
+	exec(editor: IDomEditor, value?: any) {
+		console.log(editor.getConfig()?.MENU_CONF?.headerSelect)
+		const fn = editor.getConfig()?.MENU_CONF?.extImage?.callback
+		if (fn) fn()
+	}
+
+	// 是否高亮
+	isActive(editor: IDomEditor): boolean {
+		return false
+	}
+
+	getValue(editor: IDomEditor): string | boolean {
+		return undefined;
+	}
+
+	isDisabled(editor: IDomEditor): boolean {
+		return false;
+	}
+}
+
+// 注册菜单
+Boot.registerMenu({
+	key: 'extImage',
+	factory(): IButtonMenu {
+		return new ExtImage()
+	}
+})

src/components/piEditor/ext/extVideo.ts

@@ -0,0 +1,35 @@
+import { Boot, IButtonMenu, IDomEditor } from '@wangeditor/editor'
+
+export default class ExtVideo implements IButtonMenu{
+	key = 'extVideo'
+	title = '插入视频'
+	tag: 'button' = 'button'
+	iconSvg = "<svg viewBox=\"0 0 1024 1024\"><path d=\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\"></path></svg>"
+
+	// 执行逻辑
+	exec(editor: IDomEditor, value?: any) {
+		const fn = editor.getConfig()?.MENU_CONF?.extVideo?.callback
+		if (fn) fn()
+	}
+
+	// 是否高亮
+	isActive(editor: IDomEditor): boolean {
+		return false
+	}
+
+	getValue(editor: IDomEditor): string | boolean {
+		return undefined;
+	}
+
+	isDisabled(editor: IDomEditor): boolean {
+		return false;
+	}
+}
+
+// 注册菜单
+Boot.registerMenu({
+	key: 'extVideo',
+	factory(): IButtonMenu {
+		return new ExtVideo()
+	}
+})

src/components/piEditor/index.vue

@@ -1,9 +1,11 @@
 <template>
-	<div class="pi-editor">
+	<div class="pi-editor" :style="{width: width}">
-		<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig"/>
+		<Toolbar style="border: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
-		<Editor v-model="html" :defaultConfig="editorConfig" @onCreated="editorRef = $event"/>
+		<Editor style="border: 1px solid #ccc; border-top: 0;" :style="{height: height}" v-model="html"
+				:defaultConfig="editorConfig"
+				@onCreated="handleCreated"/>
 		<pi-asset-picker ref="pickerRef1" v-if="pickerVisible1" @success="saveSuccess1" @closed="pickerVisible1=false"
-						 type="image" :max="30" :multiple="true"></pi-asset-picker>
+						 type="image" :max="10" :multiple="true"></pi-asset-picker>
 		<pi-asset-picker ref="pickerRef2" v-if="pickerVisible2" @success="saveSuccess2" @closed="pickerVisible2=false"
 						 type="video" :max="1"></pi-asset-picker>
 	</div>
@@ -12,40 +14,54 @@
 <script setup>
 import piAssetPicker from '@/components/piAsset/picker'
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
-
+import './ext/extImage'
-import {ref, onUnmounted, watch, nextTick, onMounted} from "vue";
+import './ext/extVideo'
+import config from "@/config"
+import {ref, onUnmounted, watch, nextTick, onMounted, shallowRef} from "vue"
 
 const emit = defineEmits(['update:modelValue'])
 const props = defineProps({
 	modelValue: {type: String, default: ''},
+	width: {type: String, default: '100%'},
+	height: {type: String, default: '360px'},
+	placeholder: {type: String, default: '请输入内容...'},
+	toolbar: {
+		type: Array,
+		default: ['undo', 'redo', '|', 'color', 'bgColor', 'bold', 'italic', 'underline', 'through', 'insertLink', '|',
+			'headerSelect', 'fontSize', 'fontFamily', '|', 'justifyLeft', 'justifyCenter', 'justifyRight',
+			'justifyJustify', '|', 'indent', 'delIndent', '|', 'bulletedList', 'numberedList', '|', 'code', 'codeBlock',
+			'|', 'blockquote', 'divider', 'clearStyle', '|', 'insertTable', 'extImage', 'extVideo']
+	},
 })
 
-const editorRef = ref(null)
+const editorRef = shallowRef()
 const pickerRef1 = ref(null)
 const pickerRef2 = ref(null)
 const pickerVisible1 = ref(false)
 const pickerVisible2 = ref(false)
 
 const toolbarConfig = {
-	toolbarKeys: [
+	toolbarKeys: props.toolbar
-		'headerSelect',
-		'bold',
-		'italic',
-		'underline',
-		'|',
-		'uploadImage',
-		'insertTable',
-	]
 }
 
 const editorConfig = {
-	placeholder: '请输入内容...',
+	placeholder: props.placeholder,
 	readOnly: false,
 	autoFocus: true,
 	scroll: true,
+	MENU_CONF: {
+		fontSize: {
+			fontSizeList: ['12px', '14px', '16px', '18px', '22px', '24px', '36px', '72px']
+		},
+		extImage: {
+			callback: showPicker1
+		},
+		extVideo: {
+			callback: showPicker2
+		}
+	}
 }
-
 let html = ref("")
 
 watch(() => props.modelValue, () => {
@@ -57,29 +73,51 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-
+	const editor = editorRef.value
+	if (editor == null) return
+	editor.destroy()
 })
 
+const handleCreated = (editor) => {
+	editorRef.value = editor
+}
+
 function showPicker1() {
 	pickerVisible1.value = true
 	nextTick(() => {
+		pickerRef1.value.open()
 	})
 }
 
 function showPicker2() {
 	pickerVisible2.value = true
 	nextTick(() => {
+		pickerRef2.value.open()
 	})
 }
 
 function saveSuccess1(val) {
 	val.forEach(src => {
-
+		editorRef.value.insertNode({
+			type: 'image',
+			src: config.API_URL + '/' + src,
+			alt: '图片描述',
+			style: {},
+			children: [{text: ''}]
+		})
 	})
 }
 
 function saveSuccess2(val) {
-
+	editorRef.value.insertNode({
+		type: 'video',
+		src: config.API_URL + '/' + val,
+		style: {
+			width: '100%',
+			height: 'auto'
+		},
+		children: [{text: ''}]
+	})
 }
 </script>
 

src/views/monitor/crontab/save.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1200" destroy-on-close @closed="$emit('closed')">
 		<el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="100px">
 			<el-form-item label="任务名称" prop="crontab_name">
 				<el-input type="text" v-model="form.crontab_name" placeholder="请输入任务名称" clearable></el-input>
@@ -20,7 +20,8 @@
 				<el-switch v-model="form.enable" :active-value="1" :inactive-value="0"></el-switch>
 			</el-form-item>
 			<el-form-item label="备注" prop="memo">
-				<el-input type="textarea" v-model="form.memo" placeholder="请输入备注" clearable></el-input>
+				<pi-editor v-model="form.memo" placeholder="请输入备注"></pi-editor>
+<!--				<el-input type="textarea" v-model="form.memo" placeholder="请输入备注" clearable></el-input>-->
 			</el-form-item>
 		</el-form>
 		<template #footer>
@@ -34,8 +35,7 @@
 import {getCurrentInstance, ref} from 'vue'
 import api from "@/api/index.js"
 import piCron from "@/components/piCron"
-import piAsset from "@/components/piAsset"
+import piEditor from "@/components/piEditor"
-// import piEditor from "@/components/piEditor"
 
 defineExpose({
 	open