本篇使用的插件是wangEditor
文档: https://www.wangeditor.com/v5/getting-started.html
mode设置为default默认全部功能都有,但因为后期要用在小程序里所以取消了一些功能
- 一个项目中有不同的页面都会用到富文本编辑的功能而且需要的功能都差不多那我们当然要用组件啦;
- 在上传图片或视频时,有插件处理好的方法,也可以用自定义方法.插件处理的方法,其中牵扯到后台返回的数据格式..不想沟通不想说话..很麻烦....使用自定义的方法,对接口时会比较自由;
- 目前还没定到时候上传文件转换url用的会不会是一个接口,暂时把调取接口的方法写在了组件里,今天脑子不动了,将来有需要再改;
- emmmm
上代码 ⬇️
组件
<template>
<div class="editor n_b_r">
<!-- 类名为做一些基本的边框设置 -->
<Toolbar
class="toolbar-container"
:editor="editor"
:defaultConfig="toolbarConfig"
mode="default"
/>
<!-- 高度外部页面可调,受制于插件,最小值为300px -->
<!-- defaultConfig: 配置项 -->
<!-- 方法 onCreated必须有, onChange可以没有,这里加是为了在外部页面取值-->
<Editor
:style="{ height }"
class="editor-container"
v-model="html"
:defaultConfig="editorConfig"
mode="default"
@onCreated="onCreated"
@onChange="onChange"
/>
</div>
</template>
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 接口
import { uploadFile } from "@/api/submitData";
export default {
name: "editor-component",
props: {
// 初始值
initHtml: String,
// 是否只读
readOnly: {
type: Boolean,
default: false,
},
// ........
placeholder: {
type: String,
default: "请输入内容",
},
// 小于300px无效
editorHeight: {
type: String,
default: "300px",
},
},
data() {
return {
editor: null,
toolbarConfig: {
// excludeKeys文档里有讲到: 一般用于大部分默认功能都需要, 只有少部分功能不需要, 用这个来排除
// 查看全部功能使用: this.editor.getAllMenuKeys()
excludeKeys: [
"todo",
"ondo",
"insertLink",
"insertTable",
"deleteTable",
"insertTableRow",
"deleteTableRow",
"insertTableCol",
"deleteTableCol",
"tableHeader",
"tableFullWidth",
"blockquote",
"fontFamily",
"code",
"codeBlock",
"codeSelectLang",
"numberedList",
],
},
html: "",
// 语义化的不写注释了好累
autoFocus: false,
editorConfig: {
autoFocus: this.autoFocus,
placeholder: this.placeholder,
readOnly: this.readOnly,
MENU_CONF: {
uploadImage: {
maxFileSize: 1 * 1024 * 1024,
// 这个我理解的是上传文件个数..但我试了, 妹有用
maxNumberOfFiles: 4,
allowedFileTypes: [
"image/jpeg",
"image/jpg",
"image/png",
"image/svg",
"image/gif",
"image/webp",
],
timeout: 6 * 1000,
// 自定义上传图片的方法
customUpload: (file, insertFn) => {
this.uploadImage(file, insertFn);
},
},
uploadVideo: {
maxNumberOfFiles: 1,
maxFileSize: 100 * 1024 * 1024,
allowedFileTypes: [
"video/mp4",
"video/3gp",
"video/m3u8",
],
timeout: 6 * 1000,
customUpload: (file, insertFn) => {
this.uploadVideo(file, insertFn);
},
},
},
},
};
},
computed: {
// 限制editor高度
height() {
return parseInt(this.editorHeight) < 300
? "300px"
: this.editorHeight;
},
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor);
},
onChange() {
// 输入框内值发生变化时需要向外传值
this.$emit("change", this.html);
},
uploadImage(file, insertFn) {
let formData = new FormData();
formData.append("image", file);
uploadFile(formData).then((res) => {
// 接口返回的路径----将图片插入页面
// insertFn是上面自定义上传的方法中传递的参数方法, 本身有仨参数
// url, alt, href
insertFn(res.imageUrl, file.name, res.imageUrl);
});
},
uploadVideo(file, insertFn) {
let formData = new FormData();
formData.append("video", file);
uploadFile(formData).then((res) => {
insertFn(res.videoUrl, ""); // url, poster(视频封面)
});
},
},
components: { Editor, Toolbar },
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy();
},
watch: {
// 将外部页面赋的值传递到组件area中
initHtml(value) {
this.html = value;
this.autoFocus = this.html === "";
}
}
};
</script>
<style lang="scss" scoped>
// 这步必须有, 不然就塌了
@import "@wangeditor/editor/dist/css/style.css";
.editor {
border: 1px solid #eee;
}
.editor-container {
min-height: 300px;
overflow-y: scroll;
}
.toolbar-container {
border-bottom: 1px solid $border_color;
border-top: 1px solid transparent;
}
</style>
使用页面 ⬇️
<template>
<div class="">
<el-button @click="getValue">取值</el-button>
<editor
:initHtml="initValue"
placeholder="请输入"
@change="editorChange"
/>
</div>
</template>
<script>
import editor from "@/components/editor/editor.vue";
export default {
name: "unic-page-name",
components: { editor },
methods: {
getValue() {
console.log("取值值", this.editorValue);
},
editorChange(value) {
this.editorValue = value;
},
},
data() {
return {
initValue: "",
editorValue: "",
};
},
mounted() {
setTimeout(() => {
this.initValue = "<div>我是初始值💃</div>"
console.log(this.initValue,'initBalue')
}, 4000)
}
};
</script>
tada~~一个富文本的组件就完成啦~
