127 lines
3.2 KiB
Vue
127 lines
3.2 KiB
Vue
<template>
|
|
<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="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>
|
|
</template>
|
|
|
|
<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 './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 = shallowRef()
|
|
const pickerRef1 = ref(null)
|
|
const pickerRef2 = ref(null)
|
|
const pickerVisible1 = ref(false)
|
|
const pickerVisible2 = ref(false)
|
|
|
|
const toolbarConfig = {
|
|
toolbarKeys: props.toolbar
|
|
}
|
|
|
|
const editorConfig = {
|
|
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, () => {
|
|
html.value = props.modelValue
|
|
}, {deep: true})
|
|
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|