71 lines
2.6 KiB
Plaintext
71 lines
2.6 KiB
Plaintext
<template>
|
||
<vue3-tinymce v-model="content" :setting="state.setting" @change="handleChange" @paste_preprocess="handlePastePreprocess"/>
|
||
</template>
|
||
<style scoped></style>
|
||
<script lang="ts" setup>
|
||
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
|
||
import { useUserStore } from '@/stores/modules/user'
|
||
import { useMessage } from 'naive-ui'
|
||
|
||
const message = useMessage()
|
||
const props = defineProps(["content"]);
|
||
const emit = defineEmits(['getChildData']);
|
||
const store = useUserStore()
|
||
const content = ref()
|
||
onMounted(() => {
|
||
console.log(props.content)
|
||
|
||
content.value = props.content ? unescapeHTML(props.content) : '';
|
||
});
|
||
function unescapeHTML(html: string) {
|
||
const doc = new DOMParser().parseFromString(html, 'text/html');
|
||
return doc.documentElement.textContent;
|
||
}
|
||
watch(() => props.content, () => {
|
||
const center = unescapeHTML(props.content)
|
||
// console.log(center)
|
||
content.value = center
|
||
});
|
||
// // // 给父组件传值
|
||
const handleChange = (val: any) => {
|
||
console.log(val)
|
||
emit('getChildData', val)
|
||
}
|
||
const header = { 'token': store.user.token }
|
||
|
||
const state = {
|
||
|
||
setting: {
|
||
height: 800,
|
||
width: '100%',
|
||
resize: false,
|
||
toolbar:
|
||
" fullscreen | blocks alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image table | fontsize forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
|
||
toolbar_mode: "sliding",
|
||
quickbars_selection_toolbar:
|
||
"removeformat | bold italic underline strikethrough | fontsize forecolor backcolor",
|
||
plugins: "link image table lists fullscreen quickbars preview",
|
||
|
||
font_size_formats: "12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 34px 38px 42px 46px",
|
||
link_default_target: "_blank",
|
||
link_title: false,
|
||
relative_urls: false,
|
||
convert_urls: false,
|
||
nonbreaking_force_tab: true,
|
||
block_unsupported_drop:true,
|
||
branding: false,
|
||
// 以中文简体为例
|
||
language: "zh-Hans",
|
||
custom_images_upload: true,
|
||
images_file_types: 'jpeg,jpg,jpe,png,gif,xlsx,xls,pdf,ppt,doc,docx',
|
||
// 复用 图片上传 api 地址
|
||
images_upload_url: '/test-api/common/upload',
|
||
// 上传成功回调函数，return 图片地址。默认 response.location
|
||
custom_images_upload_callback: (response: { url: any; }) => response.url,
|
||
// 上传 api 请求头
|
||
custom_images_upload_header: header,
|
||
language_url:
|
||
"https://procurement.daikin.net.cn/hpserver/zh-Hans.js",//https://unpkg.com/@jsdawn/vue3-tinymce@2.0.2/dist/tinymce/langs/zh-Hans.js
|
||
}
|
||
}
|
||
</script> |