首先，管理后台中的使用
npm install wangeditor
//f封装成了组件，以下是组件中的内容
<template>
<div style="border: 1px solid #ccc; maxwidth: 600px">
<!-- 工具栏 -->
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="'default'"
/>
<!-- 内容部分 @onBlur="handleChange" -->
<Editor
style="height: 450px; overflow-y: hidden"
v-model="props.textHtml"
:defaultConfig="editorConfig"
:mode="'default'"
@onCreated="handleCreated"
@onChange="handleChange"
/>
</div>
</template>
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, shallowRef } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// import { request } from "@/api/axios";
import {ajax} from "../../api"
import { ElMessage } from "element-plus";
import type { IEditorConfig, IToolbarConfig } from "@wangeditor/core";
const AJAX_BASE_URL = import.meta.env.VITE_AJAX_BASE_URL
const emits = defineEmits(["getHtmlVal"]);
const props = defineProps({
// 内容 HTML
textHtml: {
type: String,
default: "hello",
},
});
console.log('3333',props.textHtml)
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
// 用于去掉不需要的工具栏配置
excludeKeys: [
"insertVideo", // 去掉插入视频功能
"fullScreen", // 去掉全屏功能
"group-video", //去掉上传视频
],
};
// console.log(toolbar.getConfig().toolbarKeys)
// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
// 最长输入2000字
maxLength: 2000,
// 进入页面不自动聚焦
autoFocus: true,
MENU_CONF: {},
};
// 上传图片
//@ts-ignore
editorConfig.MENU_CONF["uploadImage"] = {
async customUpload(file: any, insertFn: any) {
upLoadImgVideo("1", file, insertFn);
},
};
// 上传视频
//@ts-ignore
editorConfig.MENU_CONF["uploadVideo"] = {
async customUpload(file: any, insertFn: any) {
upLoadImgVideo("2", file, insertFn);
},
};
// 封装 - 上传图片、视频
const upLoadImgVideo = async (type: string, file: any, insertFn: any) => {
if (file.size / 1024 / 1024 > 50) {
ElMessage.error(`文件大小不能超过50MB!`);
return false;
} else {
// 这里根据自己的需求进行处理 --- S
let formData = new FormData();
formData.append("uploadFile", file);
// formData.append("fileType", type);
const url: string = "/activity/resource/uploadFile";
console.log(formData)
// 这里根据自己的需求进行处理 --- E
const result =await ajax.post('/file/upload', formData)
console.log(result)
if(result.ok && result.data){
insertFn( result.data);
}else{
ElMessage.warning(`上传失败`);
}
}
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
const handleCreated = (editor: any) => {
editorRef.value = editor; // 记录 editor 实例，重要！
// 查看所有工具栏key
// console.log(editor.getAllMenuKeys());
};
const onClear = ()=>{
const editor = editorRef.value;
console.log("fdfd")
editor.clear()
}
const setHtml = (value: any)=>{
const editor = editorRef.value;
console.log(value)
console.log("111",editor.getHtml())
editor.setHtml(value)
}
// 获得输入的内容
const handleChange = (editor: any) => {
console.log(editor.getHtml())
emits("getHtmlVal", editor.getHtml());
};
defineExpose({
onClear,
setHtml
});
</script>
<style lang="scss" scoped>
:deep() .w-e-textarea-video-container {
video,
img {
max-width: 787px;
}
}
</style>
//使用组件
import Editor from "../../../components/editor/editor.vue"; //引入组件
//使用
<Editor @getHtmlVal="getHtmlVal" ref="editor" v-model="goods.description" style="height: 600px" />
//赋值
const getHtmlVal = (value:any)=>{
console.log(value)
goods.description = value
}
微信小程序中渲染，我用的是rich-text,问题挺多，
第一个问题，小程序不识别缩进问题
result.data.description.replace(/ /g," ") //使用ensp替换nbsp
第二个问题，富文本中的图片相连时中间留有空白以及图片宽度的问题
description = description.replace(/<img[^>]*?\s+style=(['"])[^'"]*?\1[^>]*?>/g, function(match) {
// 将style属性替换为空字符串
return match.replace(/\s+style=(['"]).*?\1/, '');
});
description = description.replace(/<img([^>]*)src=(['"])([^'"]+)\2([^>]*)>/gi, '<img$1src=$2$3$2 style="display:block;width:100%;" catchtap="previewImage" data-src=$2$3$2$4>');
删除原本富文本存在的style，重新添加一个带有样式的style,并且对其添加了一个data-src属性，属性值是当前图片链接，准本对其增加一个预览大图的功能