<script setup lang="ts">
|
import { Editor, Toolbar } from '@wangeditor-next/editor-for-vue'
|
import { IDomEditor } from '@wangeditor-next/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: any, name: any) => {
|
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: string) => {
|
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('wangEditor-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(() => {
|
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>
|
<!-- TODO @unocss 简化 style -->
|
<div style=" margin: 10px;border: 1px solid #ccc">
|
<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=" float: right;margin-right: 10px">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="handleConfirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<style src="@wangeditor-next/editor/dist/css/style.css"></style>
|
