admin-vue/src/components/AgreementEditor.vue

<template>
  <div class="agreement-editor">
    <Toolbar :editor="editorRef" :default-config="toolbarConfig" mode="default" />
    <Editor
      :model-value="modelValue"
      :default-config="editorConfig"
      mode="default"
      @update:model-value="value => emit('update:modelValue', value)"
      @on-created="onCreated"
    />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

defineProps({ modelValue: { type: String, default: '' } })
const emit = defineEmits(['update:modelValue'])
const editorRef = shallowRef()
// 协议仅开放排版和链接；服务端使用同范围白名单清洗，禁用媒体与任意 HTML。
const toolbarConfig = {
  toolbarKeys: ['headerSelect', 'bold', 'italic', 'underline', 'through', '|', 'bulletedList', 'numberedList', 'blockquote', 'insertLink', '|', 'undo', 'redo']
}
const editorConfig = { placeholder: '请输入协议正文', maxLength: 50000 }
function onCreated(editor) { editorRef.value = editor }
onBeforeUnmount(() => editorRef.value?.destroy())
</script>

<style scoped>
.agreement-editor { border: 1px solid #d9d9d9; border-radius: 6px; overflow: hidden; }
.agreement-editor :deep(.w-e-toolbar) { border-bottom: 1px solid #d9d9d9; }
.agreement-editor :deep(.w-e-text-container) { height: 520px !important; }
</style>