|
|
@@ -0,0 +1,227 @@
|
|
|
+<!-- 富文本编辑器 -->
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div v-if="props.item?.label" class="ml-2 mb-2 color959595">{{ props.item.label }}</div>
|
|
|
+ <div class="box z-10">
|
|
|
+ <!-- 工具栏 -->
|
|
|
+ <Toolbar
|
|
|
+ :editor="editorRef"
|
|
|
+ :editorId="editorId"
|
|
|
+ class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]"
|
|
|
+ />
|
|
|
+ <!-- 编辑器 -->
|
|
|
+ <Editor
|
|
|
+ v-model="valueHtml"
|
|
|
+ :defaultConfig="editorConfig"
|
|
|
+ :editorId="editorId"
|
|
|
+ :style="editorStyle"
|
|
|
+ @on-change="handleChange"
|
|
|
+ @on-created="handleCreated"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<!-- <style src="@wangeditor/editor/dist/css/style.css"></style> -->
|
|
|
+<script setup>
|
|
|
+defineOptions({ name: 'wangeditor-index' })
|
|
|
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
|
+import { onBeforeUnmount, ref, shallowRef, unref, computed, nextTick, watch } from 'vue'
|
|
|
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
|
+import { i18nChangeLanguage } from '@wangeditor/editor'
|
|
|
+import { isNumber } from '@/utils/is'
|
|
|
+// import { getAccessToken, getTenantId } from '@/utils/auth'
|
|
|
+
|
|
|
+i18nChangeLanguage('zh-CN')
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ modelValue: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ item: { // 表单配置数据
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ },
|
|
|
+ editorId: {
|
|
|
+ type: String,
|
|
|
+ default: 'wangEditor-1',
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: '200px'
|
|
|
+ },
|
|
|
+ editorConfig: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ },
|
|
|
+ readonly: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const emit = defineEmits(['change', 'update:modelValue'])
|
|
|
+
|
|
|
+// 编辑器实例，必须用 shallowRef
|
|
|
+const editorRef = shallowRef()
|
|
|
+
|
|
|
+const valueHtml = ref('')
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.modelValue,
|
|
|
+ (val) => {
|
|
|
+ if (val === null) val = ''
|
|
|
+ if (val === unref(valueHtml)) return
|
|
|
+ valueHtml.value = val
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+// 监听
|
|
|
+watch(
|
|
|
+ () => valueHtml.value,
|
|
|
+ (val) => {
|
|
|
+ emit('update:modelValue', val)
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+const handleCreated = (editor) => {
|
|
|
+ editorRef.value = editor
|
|
|
+}
|
|
|
+
|
|
|
+// 编辑器配置
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
+const editorConfig = computed(() => {
|
|
|
+ return Object.assign(
|
|
|
+ {
|
|
|
+ placeholder: '请输入内容...',
|
|
|
+ readOnly: props.item.readonly || props.readonly,
|
|
|
+ customAlert: (s, t) => {
|
|
|
+ switch (t) {
|
|
|
+ case 'success':
|
|
|
+ Snackbar.success(s)
|
|
|
+ break
|
|
|
+ case 'info':
|
|
|
+ Snackbar.info(s)
|
|
|
+ break
|
|
|
+ case 'warning':
|
|
|
+ Snackbar.warning(s)
|
|
|
+ break
|
|
|
+ case 'error':
|
|
|
+ Snackbar.error(s)
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ Snackbar.info(s)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ autoFocus: false,
|
|
|
+ scroll: true,
|
|
|
+ MENU_CONF: {
|
|
|
+ ['uploadImage']: {
|
|
|
+ server:`${import.meta.env.VITE_BASE_URL}/commons/upload`,
|
|
|
+ // 单个文件的最大体积限制，默认为 2M
|
|
|
+ // maxFileSize: 5 * 1024 * 1024,
|
|
|
+ // 最多可上传几个文件，默认为 100
|
|
|
+ // maxNumberOfFiles: 10,
|
|
|
+ // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
|
|
|
+ // allowedFileTypes: ['image/*'],
|
|
|
+
|
|
|
+ // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
|
|
|
+ // meta: { updateSupport: 0 },
|
|
|
+ // 将 meta 拼接到 url 参数中，默认 false
|
|
|
+ // metaWithUrl: true,
|
|
|
+
|
|
|
+ // 自定义增加 http header
|
|
|
+ // headers: {
|
|
|
+ // Accept: '*',
|
|
|
+ // Authorization: 'Bearer ' + getAccessToken(),
|
|
|
+ // 'tenant-id': getTenantId()
|
|
|
+ // },
|
|
|
+
|
|
|
+ // 跨域是否传递 cookie ，默认为 false
|
|
|
+ // withCredentials: true,
|
|
|
+
|
|
|
+ // 超时时间，默认为 10 秒
|
|
|
+ timeout: 5 * 1000, // 5 秒
|
|
|
+
|
|
|
+ // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
|
|
|
+ fieldName: 'file',
|
|
|
+
|
|
|
+ // 上传之前触发
|
|
|
+ onBeforeUpload(file) {
|
|
|
+ console.log(file)
|
|
|
+ return file
|
|
|
+ },
|
|
|
+ // 上传进度的回调函数
|
|
|
+ onProgress(progress) {
|
|
|
+ // progress 是 0-100 的数字
|
|
|
+ console.log('progress', progress)
|
|
|
+ },
|
|
|
+ onSuccess(file, res) {
|
|
|
+ console.log('onSuccess', file, res)
|
|
|
+ },
|
|
|
+ onFailed(file, res) {
|
|
|
+ alert(res.message)
|
|
|
+ console.log('onFailed', file, res)
|
|
|
+ },
|
|
|
+ onError(file, err, res) {
|
|
|
+ alert(err.message)
|
|
|
+ console.error('onError', file, err, res)
|
|
|
+ },
|
|
|
+ // 自定义插入图片
|
|
|
+ // customInsert(res, insertFn: InsertFnType) {
|
|
|
+ // insertFn(res.data, 'image', res.data)
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadImgShowBase64: true,
|
|
|
+ },
|
|
|
+ props.editorConfig || props.item.editorConfig || {}
|
|
|
+ )
|
|
|
+})
|
|
|
+
|
|
|
+const editorStyle = computed(() => {
|
|
|
+ const h = props.item.height || props.height
|
|
|
+ return {
|
|
|
+ height: isNumber(h) ? `${h}px` : h
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 回调函数
|
|
|
+const handleChange = (editor) => {
|
|
|
+ emit('change', editor)
|
|
|
+}
|
|
|
+
|
|
|
+// 组件销毁时，及时销毁编辑器
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ const editor = unref(editorRef.value)
|
|
|
+
|
|
|
+ // 销毁，并移除 editor
|
|
|
+ editor?.destroy()
|
|
|
+})
|
|
|
+
|
|
|
+const getEditorRef = async () => {
|
|
|
+ await nextTick()
|
|
|
+ return unref(editorRef.value)
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ getEditorRef
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.box {
|
|
|
+ border: 1px solid #a2a2a2;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 1px;
|
|
|
+ &:hover {
|
|
|
+ border: 1px solid #2b2b2b;
|
|
|
+ }
|
|
|
+}
|
|
|
+.color959595 {
|
|
|
+ color: #959595;
|
|
|
+}
|
|
|
+</style>
|
