112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
|
|
import {IDomEditor} from '@wangeditor/editor'
|
|
import MentionModal from "./MentionModal.vue";
|
|
|
|
const emit = defineEmits(['confirm'])
|
|
|
|
// mention
|
|
const isShowModal = ref(false)
|
|
const showModal = () => {
|
|
isShowModal.value = true
|
|
}
|
|
const hideModal = () => {
|
|
isShowModal.value = false
|
|
}
|
|
const insertMention = (id, name) => {
|
|
const mentionNode = {
|
|
type: 'mention',
|
|
value: name,
|
|
info: {id},
|
|
children: [{text: ''}],
|
|
}
|
|
const editor = editorRef.value
|
|
if (editor) {
|
|
editor.restoreSelection()
|
|
editor.deleteBackward('character')
|
|
editor.insertNode(mentionNode)
|
|
editor.move(1)
|
|
}
|
|
}
|
|
|
|
// Dialog
|
|
const dialogVisible = ref(false)
|
|
const open = async (template) => {
|
|
dialogVisible.value = true
|
|
valueHtml.value = template
|
|
}
|
|
defineExpose({open})
|
|
const handleConfirm = () => {
|
|
emit('confirm', valueHtml.value)
|
|
dialogVisible.value = false
|
|
}
|
|
|
|
// Editor
|
|
const editorRef = shallowRef<IDomEditor>()
|
|
const editorId = ref('wangeEditor-1')
|
|
const toolbarConfig = {
|
|
excludeKeys: ['group-video'],
|
|
insertKeys: {
|
|
index: 31,
|
|
keys: ['ProcessRecordMenu']
|
|
}
|
|
}
|
|
const editorConfig = {
|
|
placeholder: '请输入内容...',
|
|
EXTEND_CONF: {
|
|
mentionConfig: {
|
|
showModal,
|
|
hideModal,
|
|
},
|
|
},
|
|
}
|
|
const valueHtml = ref()
|
|
const handleCreated = (editor: IDomEditor) => {
|
|
editorRef.value = editor
|
|
}
|
|
|
|
// onBeforeUnmount
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value
|
|
if (editor == null) return
|
|
editor.destroy()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<el-dialog v-model="dialogVisible" title="自定义模板" fullscreen>
|
|
<div style="margin: 0 10px;">
|
|
<el-alert
|
|
title="输入 @ 可选择插入流程表单选项和默认选项"
|
|
type="info"
|
|
show-icon
|
|
:closable="false"/>
|
|
</div>
|
|
<div style="border: 1px solid #ccc;margin: 10px;">
|
|
<Toolbar
|
|
style="border-bottom: 1px solid #ccc;"
|
|
:editor="editorRef"
|
|
:editorId="editorId"
|
|
:defaultConfig="toolbarConfig"
|
|
/>
|
|
<Editor
|
|
style="height: 500px; overflow-y: hidden;"
|
|
v-model="valueHtml"
|
|
:defaultConfig="editorConfig"
|
|
:editorId="editorId"
|
|
@on-created="handleCreated"
|
|
/>
|
|
<MentionModal
|
|
v-if="isShowModal"
|
|
@hide-mention-modal="hideModal"
|
|
@insert-mention="insertMention"/>
|
|
</div>
|
|
<div style="margin-right: 10px;float: right;">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="handleConfirm">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style src="../../../../../../node_modules/@wangeditor/editor/dist/css/style.css"></style>
|