vue3+ts百度编辑器
看图
1、下载UEditor，放到public文件夹下，没用官方文档，找了一个大佬给的包，下载地址https://gitee.com/xxwwbb/ueditor
2、安装组件
npm i [email protected] -S
3、在main.ts里注册
4、在vue文件中使用
<template>
<vue-ueditor-wrap
ref="editorRef"
v-model="msg"
editor-id="rf-editor"
:config="editorConfig"
:class="isDisabled ? 'editor-disabled' : ''"
@ready="ready"
></vue-ueditor-wrap>
</template>
<script setup lang="ts">
import {
defineProps, defineEmits, ref, reactive, computed } from "vue";
interface Props {
editorId?: string;
editorConfig: any;
isDisabled?: boolean;
}
const editorRef = ref<any>(null);
const msg = ref(""); // 编辑器内容
const isDisabled = false; // 是否只读
const editorConfig= ref({
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度2
initialFrameHeight: 240,
// 初始容器宽度
initialFrameWidth: "100%",
// 上传文件接口
serverUrl: "",
// 访问 UEditor 静态资源的根路径publc里面的名称
UEDITOR_HOME_URL: "/UEditor/",
enableAutoSave: true,
toolbars: [
[
"undo",
"redo",
"|",
"bold",
"italic",
"underline",
"fontborder",
"strikethrough",
"superscript",
"subscript",
"removeformat",
"formatmatch",
"autotypeset",
"blockquote",
"pasteplain",
"|",
"forecolor",
"backcolor",
"insertorderedlist",
"insertunorderedlist",
"selectall",
"cleardoc",
"|",
"rowspacingtop",
"rowspacingbottom",
"lineheight",
"|",
"customstyle",
"paragraph",
"fontfamily",
"fontsize",
"|",
"directionalityltr",
"directionalityrtl",
"indent",
"|",
"justifyleft",
"justifycenter",
"justifyright",
"justifyjustify",
"|",
"touppercase",
"tolowercase",
"|",
"link",
"unlink",
"|",
"imagenone",
"imageleft",
"imageright",
"imagecenter",
"|",
"simpleupload",
"insertimage",
"insertvideo",
"attachment",
"pagebreak",
"background",
"|",
"horizontal",
"date",
"time",
"spechars",
"|",
"inserttable",
"deletetable",
"insertparagraphbeforetable",
"insertrow",
"deleterow",
"insertcol",
"deletecol",
"mergecells",
"mergeright",
"mergedown",
"splittocells",
"splittorows",
"splittocols",
"|",
"print",
"preview",
"searchreplace"
]
]
});
const ready = (editorInstance: any) => {
if (isDisabled) {
// 不是编辑状态，禁用编辑，隐藏工具栏
editorInstance.body.contentEditable = false;
}
};
// 初始化编辑器的值
const initEditor = () => {
msg.value = ‘我是默认值’;
};
// 得到编辑器的值
const getMsg = () => {
return msg.value;
};
</script>
<style lang="scss">
.editor-disabled {
.edui-editor-toolbarbox {
display: none;
}
.edui-editor-bottomContainer {
display: none;
}
}
</style>
好了，vue3使用百度编辑器就完成啦!