//安装依赖
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save
组件
style="border: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> :style="{'height': '400px' ,'width': '100%','border': '1px solid #ccc','overflow-y': 'hidden'}" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handleChange" /> import '@wangeditor/editor/dist/css/style.css' // 引入 css import { Editor, Toolbar } from '@wangeditor/editor-for-vue' import useStore from "@/pinia/index.js"; import { S3Demo} from "@/utils/oos.js"; import {ElMessage, ElMessageBox, ElNotification} from "element-plus"; import {getOssSts } from "@/api/bill/auditBill.js"; const { wEditor } = useStore(); import { ref,reactive, onMounted, shallowRef, onBeforeUnmount, nextTick, watch } from 'vue' // 初始值 const props = defineProps({ initValue: String }) const emits = defineEmits(['getEditorContent']) let mode = ref('default') // 编辑器实例,必须用 shallowRef const editorRef = shallowRef() // 内容 HTML const valueHtml = ref('') // 模拟 ajax 异步获取内容 onMounted(() => { nextTick(() => { // 界面节点更新完以后再修改值。 valueHtml.value = props.initValue }) }) // 工具栏配置 const toolbarConfig = { toolbarKeys: [ // 菜单 key 'headerSelect', 'bold', // 加粗 'italic', // 斜体 'through', // 删除线 'underline', // 下划线 'bulletedList', // 无序列表 'numberedList', // 有序列表 'color', // 文字颜色 'insertLink', // 插入链接 'fontSize', // 字体大小 'lineHeight', // 行高 'uploadImage', // 上传图片 'uploadVideo',//上传视频 'delIndent', // 缩进 'indent', // 增进 'deleteImage',//删除图片 'divider', // 分割线 'insertTable', // 插入表格 'justifyCenter', // 居中对齐 'justifyJustify', // 两端对齐 'justifyLeft', // 左对齐 'justifyRight', // 右对齐 'undo', // 撤销 'redo', // 重做 'clearStyle', // 清除格式 'fullScreen' // 全屏 ] } //自定义上传图片 const editorConfig = { placeholder: '请输入内容...', // 配置默认提示 // readOnly: true, MENU_CONF: { // 配置上传服务器地址 uploadImage: { // 小于该值就插入 base64 格式(而不上传),默认为 0 base64LimitSize: 5 * 1024, // 5kb // 单个文件的最大体积限制,默认为 2M // maxFileSize: 1 * 1024 * 1024, // 1M // // 最多可上传几个文件,默认为 100 // maxNumberOfFiles: 5, // 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 [] allowedFileTypes: ['image/*'], // 自定义上传 async customUpload(file, insertFn) { // 文件上传 try { // let file = options.file; // 拿到 file let config = await getOssSts(); console.log(config) //更新临时token S3Demo.updateCredentials(config.data.data.accessKeyId, config.data.data.secretAccessKey, config.data.data.sessionToken) S3Demo.init(config.data.data.endpoint);//初始化 let urlData = null; //上传 let nununu = await S3Demo.putObject(file, config.data.data.bucketName, 'wangeditor').then(function(resolve){ console.log(resolve) urlData = resolve; insertFn(urlData, '', urlData) ElMessage({ type: 'success', message: '上传附件成功!', }) }) } catch (e) { console.log('222') ElNotification.error('上传附件失败!'); } // 插入到富文本编辑器中,主意这里的三个参数都是必填的,要不然控制台报错:typeError: Cannot read properties of undefined (reading 'replace') // insertFn(result.data.data.url, result.data.data.name, result.data.data.name) } }, uploadVideo:{ async customUpload(file, insertFn) { try { // let file = options.file; // 拿到 file //自定义上传到云储存开始 let config = await getOssSts(); console.log(config) //更新临时token S3Demo.updateCredentials(config.data.data.accessKeyId, config.data.data.secretAccessKey, config.data.data.sessionToken) S3Demo.init(config.data.data.endpoint);//初始化 let urlData = null; //上传 let nununu = await S3Demo.putObject(file, config.data.data.bucketName, 'wangeditor').then(function(resolve){ console.log(resolve) urlData = resolve; insertFn(urlData, urlData) ElMessage({ type: 'success', message: '上传附件成功!', }) }) //自定义上传云储存结束 } catch (e) { console.log('222') ElNotification.error('上传附件失败!'); } } } } } // 组件销毁时,也及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value; if (editor == null) { return; } editor.destroy() }) const handleCreated = (editor) => { editorRef.value = editor // 创建富文本编辑器 } const handleChange = (info) => { // info.children 数组包含了数据类型和内容,valueHtml.value内容的html格式 emits('getEditorContent', info.children, valueHtml.value) } // watch(()=>props.initValue, (value) => { // 父组件获取初始值 // valueHtml.value = value // } 在父组件使用 import WangEditorzu from "@/components/wangEditor.vue" import { ref,reactive, onMounted, shallowRef, onBeforeUnmount ,nextTick } from 'vue'; const content = ref(''); //富文本编辑器回调 const onEditorChange = (arr, html) => { console.log(arr, html) content = html; } 文章来源
发表评论