安装vue3组件
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save
页面中创建一个新的组件
<template>
<div style="border: 1px solid #ccc; text-align: left">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :maxLength="500"
:mode="mode" @onCreated="handleCreated" />
</div>
</template>
<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref("");
// 模拟 ajax 异步获取内容
onMounted(() => { });
const toolbarConfig = {};
const ImgUrl = ref<string>("");
const editorConfig = {
placeholder: "请输入内容...",
MENU_CONF: {
uploadImage: {
//上传图片配置
server: import.meta.env.VITE_BASE_URL + "/common/file/upload", //上传接口地址
fieldName: "file", //上传文件字段名
methods: "post",
// headers: {
// token: sessionStorage.getItem('XNZtoken'),
// },
// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
allowedFileTypes: ["image/*"],
// metaWithUrl: true, // 参数拼接到 url 上
// 单个文件上传成功之后
onSuccess(file: { name: any; }, res: { data: string; }, insertFn: any) {
console.log(`${file.name} 上传成功`, res.data);
ImgUrl.value = res.data;
},
// // 自定义插入图片
customInsert(res: { data: any; }, insertFn: (arg0: any) => void) {
insertFn(res.data); //插入图片
},
},
},
};
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
const handleCreated = (editor: any) => {
editorRef.value = editor; // 记录 editor 实例,重要!
};
defineExpose({
valueHtml
});
</script>
<style lang="scss" scoped>
:deep(.text-editor) {
.w-e-bar-item {
text-align: left !important;
&:nth-child(32) {
display: none;
}
&:nth-child(21) {
display: none;
}
&:nth-child(24) {
display: none;
}
&:nth-child(22) {
display: none;
}
&:nth-child(25) {
display: none;
}
&:nth-child(26) {
display: none;
}
}
}
</style>
如何使用
import noticeEdit from "./wangEdit.vue";
<notice-edit ref="valueHtml">
const valueHtml = ref<any>(null) //拿到valueHtml直接用就行