cfn
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

富文本编辑器

This commit is contained in:
zhang zhuo 2025-11-22 17:27:46 +08:00
parent 09f08bc553
commit 23a4b5de4f
4 changed files with 135 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/piEditor/ext/extImage.ts Normal file
View File

@ -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()
}
})

35
src/components/piEditor/ext/extVideo.ts Normal file
View File

@ -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()
}
})

82
src/components/piEditor/index.vue
View File

@ -1,9 +1,11 @@
<template>
<div class="pi-editor">
<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig"/>
<Editor v-model="html" :defaultConfig="editorConfig" @onCreated="editorRef = $event"/>
<div class="pi-editor" :style="{width: width}">
<Toolbar style="border: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
<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 {ref, onUnmounted, watch, nextTick, onMounted} from "vue";
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import './ext/extImage'
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: [
'headerSelect',
'bold',
'italic',
'underline',
'|',
'uploadImage',
'insertTable',
]
toolbarKeys: props.toolbar
}
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>

8
src/views/monitor/crontab/save.vue
View File

@ -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