当前位置：首页 > news >正文

wangeditor富文本编辑器的使用（vue）

news 2025/9/11 5:09:37

官网
官方demo
参考

安装
yarn add @wangeditor/editor
yarn add @wangeditor/editor-for-vue

封装的富文本组件

<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 40vh; overflow-y: hidden"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/></div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 cssimport {onBeforeUnmount,watch,defineEmits,ref,shallowRef,onMounted,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { message } from "ant-design-vue";
import netUrl from "@/views/miniprogram/uploadApi.js";
const token = ''
export default {components: { Editor, Toolbar },setup(props, { emit }) {// const emits = defineEmits(["onChange"]);// 编辑器实例，必须用 shallowRefconst editorRef = shallowRef();// 内容 HTMLconst valueHtml = ref("");watch(() => valueHtml,(n) => {emit("onChangeValueHtml", n.value);},{ deep: true, immediate: true });// 模拟 ajax 异步获取内容onMounted(() => {// setTimeout(() => {//   valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";// }, 1500);});const toolbarConfig = {excludeKeys: ["fullScreen","readOnly","emotion","code","group-video","undo", // 撤销"redo", // 重复"insertTable","codeBlock",],};const editorConfig = {placeholder: "请在这里输入内容...",MENU_CONF: {// 配置上传图片uploadImage: {// 请求路径server: `${netUrl}`,headers: { Authorization: token },// 后端接收的文件名称fieldName: "file",maxFileSize: 1 * 1024 * 1024, // 1M// 上传的图片类型allowedFileTypes: ["image/*"],// 小于该值就插入 base64 格式（而不上传），默认为 0base64LimitSize: 10 * 1024, // 10MB// 自定义插入返回格式【后端返回的格式】customInsert(res, insertFn) {if (res.code != 20000) {message.error("上传文件失败，" + res.message);return;}insertFn(res.data, res.data, res.data);},// 携带的数据meta: {imageSource: 1,},// 将 meta 拼接到 url 参数中，默认 false// 单个文件上传成功之后onSuccess(file, res) {if (res.code == 20000) {message.success(`${file.name} 上传成功`);return;} else {message.warning(`${file.name} 上传出了点异常`);return;}},// 单个文件上传失败onFailed(file, res) {console.log(res);message.error(`${file.name} 上传失败`);},// 上传错误，或者触发 timeout 超时onError(file, err, res) {console.log(err, res);message.error(`${file.name} 上传出错`);},},},};// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {const editor = editorRef.value;if (editor == null) return;editor.destroy();});const handleCreated = (editor) => {editorRef.value = editor; // 记录 editor 实例，重要！// console.log(editor.getConfig(), "editor.getAllMenuKeys()");};return {editorRef,valueHtml,mode: "default", // 或 'simple'toolbarConfig,editorConfig,handleCreated,};},
};
</script>