bladex前端ui项目，基于avue-cli2.0开发
包含基础工作流，不包含表单设计器
https://git.javablade.com/blade/Saber
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.4 KiB
55 lines
1.4 KiB
3 years ago
|
<template>
|
||
|
|
<div style="border: 1px solid #ccc;">
|
||
|
|
<Toolbar style="border-bottom: 1px solid #ccc"
|
||
|
|
:editor="editorRef"
|
||
|
|
:defaultConfig="toolbarConfig"
|
||
|
|
:mode="mode" />
|
||
|
|
<Editor style="height: 500px; overflow-y: hidden;"
|
||
|
|
v-model="valueHtml"
|
||
|
|
:defaultConfig="editorConfig"
|
||
|
|
:mode="mode"
|
||
|
|
@onChange="onChange"
|
||
|
|
@onCreated="handleCreated" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
||
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||
|
|
const emit = defineEmits();
|
||
|
|
const props = defineProps({
|
||
|
|
placeholder: String,
|
||
|
|
modelValue: String,
|
||
|
|
})
|
||
|
|
// 编辑器实例，必须用 shallowRef
|
||
|
|
const editorRef = shallowRef()
|
||
|
|
|
||
|
|
// 内容 HTML
|
||
|
|
const valueHtml = ref(props.modelValue)
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
valueHtml.value = props.modelValue
|
||
|
|
})
|
||
|
|
const toolbarConfig = {}
|
||
|
|
const editorConfig = { placeholder: props.placeholder }
|
||
|
|
|
||
|
|
// 组件销毁时，也及时销毁编辑器
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
const editor = editorRef.value
|
||
|
|
if (editor == null) return
|
||
|
|
editor.destroy()
|
||
|
|
})
|
||
|
|
watch(() => props.modelValue, (val) => {
|
||
|
|
console.log(val)
|
||
|
|
valueHtml.value = val
|
||
|
|
})
|
||
|
|
const onChange = (editor) => {
|
||
|
|
emit('update:modelValue', valueHtml.value)
|
||
|
|
}
|
||
|
|
const handleCreated = (editor) => {
|
||
|
|
editorRef.value = editor // 记录 editor 实例，重要！
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|