封装组件富文本，
<script lang="ts" setup>
import { onMounted, reactive, toRefs, ref, defineProps, watch } from 'vue'
import E from 'wangeditor'
const props: any = defineProps({
option: {
type: Object,
default: {}
},
value: {
type: String,
default: ''
}
})
interface DataProps {
editor: any;
editorContent: string
getContent: (ref?: any) => void
}
const data: DataProps = reactive({
editorContent: '',
editor: {},
getContent: () => {
// console.log("111",props)
data.editor.txt.html(props.value)
}
})
const editorElemMenu = ref();
const editorElemBody = ref();
onMounted(() => {
const elemMenu = editorElemMenu.value;
const elemBody = editorElemBody.value;
data.editor = new E(elemMenu, elemBody)
// 使用 onchange 函数监听内容的变化，并实时更新到 state 中
data.editor.config.onchange = (html: any) => {
// data.getContent()
// console.log(data.editor.txt.html())
data.editorContent = data.editor.txt.html()
}
data.editor.config.customUploadImg = function (files: any, insert: any) {
// files 是 input 中选中的文件列表insert 是获取图片 url 后，插入到编辑器的方法
// let file;
// if (files && files.length) {
// file = files[0];
// } else {
// return
// }
// 图片上传
console.log("files1", files)
const formData = new FormData();
formData.append('file', files[0]);
console.log("files", files, insert)
// formData.append('Banners',{id:editorinfo.id,naviChildId:editorinfo.naviChildId})
}
data.editor.config.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
data.editor.config.uploadImgShowBase64 = true
data.editor.create()
// data.getContent()
})
//对父组件传的值进行一个监听，调用给编辑器赋值的方法
watch(props, (newtext, oldtext) => {
if (newtext) {
data.getContent()
}
}, { deep: true })
const refData = toRefs(data);
</script>
//父组件调用
<template>
<div class="textWriteRight">
<write ref="Editor" :value="data.content" />
</div>
</template>
<script lang='ts' setup>
import Write from './write.vue'
import { useText } from '@/api/user'
import { reactive, ref, toRefs, watch } from 'vue'
import { useIndexStore } from '@/store'
interface DataProps {
onEditor: any;
content: string;
showBack: (ref?: any) => void
}
const store: any = useIndexStore()
const users: any = reactive({
userList: [],
text: ''
})
const userList = async () => {
const result = await useText({ username: 'ww' })
console.log(result)
users.userList = result
console.log(store.index)
users.text = users.userList[store.index].text
// console.log(users.userList[users.index].text)
}
userList()
const Editor = ref();
const data: DataProps = reactive({
content: '1',
//获取富文本中的内容
onEditor: (value: string) => {
// console.log("父组件", value)
},
// 富文本回显
showBack: () => {
users.text = users.userList[store.index].text
data.content = users.text
console.log(store.index, users.userList)
// console.log(" data.content", data.content)
// var ue=Editor.value.getContent()
// ue.ready(function(){
// })
setTimeout(() => {
// Editor.value.getContent()
// console.log(Editor.value.getContent())
},2000)
}
})
const indexTo = (index: number) => {
store.setIndex(index)
}
//对仓库的index持久化存储做个监听防止刷新回到初始第一个，对路由在做个监听离开本页面时index归零。
监听数据，如果有数据给value赋值
watch([store, users], (newtext, oldtext) => {
if (newtext) {
console.log(users.text)
data.showBack()
}
}, { deep: true })
const refData = toRefs(data);
</script>
网友评论