阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
官网
官方demo
参考
安装
yarn add @wangeditor/editor
yarn add @wangeditor/editor-for-vue
封装的富文本组件
<template>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 40vh; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css";
import {
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 editorRef = shallowRef();
const valueHtml = ref("");
watch(
() => valueHtml,
(n) => {
emit("onChangeValueHtml", n.value);
},
{ deep: true, immediate: true }
);
onMounted(() => {
});
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,
allowedFileTypes: ["image/*"],
base64LimitSize: 10 * 1024,
customInsert(res, insertFn) {
if (res.code != 20000) {
message.error("上传文件失败" + res.message);
return;
}
insertFn(res.data, res.data, res.data);
},
meta: {
imageSource: 1,
},
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} 上传失败`);
},
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;
};
return {
editorRef,
valueHtml,
mode: "default",
toolbarConfig,
editorConfig,
handleCreated,
};
},
};
</script>
工具栏修改
可以在官网提供的页面查看工具栏配置
更多配置详解
toolbar.getConfig()
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |