wangeditor官网:用于 Vue React | wangEditor开源 Web 富文本编辑器,开箱即用,配置简单https://www.wangeditor.com/v5/for-frame.html#vue3
按照官网提示安装 两个都要安装
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save
下面直接把富文本的组件放在下面:
<!-- wangeditor富文本编辑器 -->
<template>
<div style="border: 1px solid #ccc">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor style="height: 300px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
@onCreated="handleCreated" />
</div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { init } from "snabbdom";
export default {
components: { Editor, Toolbar },
props: {
message: {
type: String,
default: '<p><br></p>'
}
},
setup(props, { emit }) {
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref("<p><br></p>");
console.log(valueHtml, "valueHtmlvalueHtmlvalueHtmlvalueHtml");
emit('valueHtml', valueHtml)
// 模拟 ajax 异步获取内容
onMounted(() => {
console.log("props.message", props.message);
valueHtml.value = props.message
});
valueHtml.value = props.message
function init(data) {
console.log("data", data)
valueHtml.value = data
}
watch(valueHtml, (val) => {
console.log(val, "val");
emit("BoxValue", val)
})
const toolbarConfig = {
//删除工具栏中不需要的选项比如视频就是group-video
excludeKeys: [
'headerSelect',
'italic',
'group-more-style',// 排除菜单组,写菜单组 key 的值即可
"group-video"
]
};
const editorConfig = {
placeholder: "请输入内容...",
MENU_CONF: {},
};
// let token=localStorage.getItem('token')
// editorConfig.uploadHeaders = {'authentication':'111'};
editorConfig.MENU_CONF["uploadImage"] = {
// 上传图片的配置
server: "这里放你上传图片的接口地址",
fieldName: "file",//参数类型要写成这样要不然报错400
//获取服务器返回的http格式图片地址插入到富文本中
customInsert(res, insertFn) {
// JS 语法
// res 即服务端的返回结果
console.log(res);
// 从 res 中找到 url alt href ,然后插入图片
let url = res.fileUrl
insertFn(url);
},
};
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
const handleCreated = (editor) => {
editorRef.value = editor; // 记录 editor 实例,重要!
};
return {
editorRef,
valueHtml,
mode: "default", // 或 'simple'
toolbarConfig,
editorConfig,
handleCreated,
init
};
},
};
</script>
用到了子传父,这里vue3和vue2传值方法不一样,不会用的话可以百度
父组件只粘贴关于富文本的代码:
先从html开始(我的顺序是这样,接下来只要粘到你的父组件中就可以)
<MyEditor :message="form.message" @BoxValue="BoxValue" ref="editorRef" />
<!-- form.message是我要传给后端的参数 -->
//先定义
const editorRef=ref(null)
function BoxValue(result){
console.log(result);
form.value.message=result
}
//修改步骤中
if(editorRef.value){
editorRef.value.init(form.value.message)
}
wangeditor富文本做校验:
const validateMessage = (rule, value, callback) => {
console.log("value",value);
if (value === '<p><br></p>') {
callback(new Error('内容不能为空'))
}else if(value === undefined){
callback(new Error('内容不能为空'))
} else if(value === ''){
callback(new Error('内容不能为空'))
}
else {
callback()
}
}
//没有粘整个所以粘的时候需要看清楚
rules: {
message:[
{ required: true,validator:validateMessage, trigger: "blur" },
]
},
工具栏配置---博主@我的代码永远没有bug--wangEdtior查看工具栏配置,隐藏工具栏配置_我的代码永没有bug的博客-CSDN博客_wangeditor隐藏工具栏