Browse Source
# Conflicts: # .gitignore # src/views/wel/index.vue # vite.config.jsfix_bug_pro20231227
pref_mail@163.com
12 months ago
26 changed files with 1804 additions and 128 deletions
@ -1,70 +0,0 @@
|
||||
<template> |
||||
<div class="editor—wrapper"> |
||||
<Toolbar class="toolbar-container" :editor="editorRef" :defaultConfig="toolbarConfig" /> |
||||
<Editor |
||||
:style="styleName" |
||||
v-model="valueHtml" |
||||
:defaultConfig="editorConfig" |
||||
@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, |
||||
minRows: [String, Number], |
||||
}); |
||||
const styleName = computed(() => { |
||||
return { |
||||
height: props.minRows * 50 + 'px', |
||||
}; |
||||
}); |
||||
// 编辑器实例，必须用 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> |
||||
.editor—wrapper { |
||||
border: 1px solid #ccc; |
||||
} |
||||
|
||||
.toolbar-container { |
||||
border-bottom: 1px solid #ccc; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue