mavon-editor
安装命令
npm install [email protected] --save
全局配置
- 修改main.js文件,添加如下配置
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
组件使用
- 不含视频上传功能
<el-row>
<el-col :spam="24">
<el-form-item :label-width="formLabelWidth" label="内容" prop="contentMd">
<mavon-editor placeholder="输入文章内容..." style="height: 500px" ref=md v-model="article.contentMd"
@imgDel="imgDel" @imgAdd="imgAdd">
</mavon-editor>
</el-form-item>
</el-col>
</el-row>
- 含视频上传功能
<el-row>
<el-col :spam="24">
<el-form-item :label-width="formLabelWidth" label="内容" prop="contentMd">
<mavon-editor placeholder="输入文章内容..." style="height: 500px" ref=md v-model="article.contentMd"
@imgDel="imgDel" @imgAdd="imgAdd">
<!-- 左工具栏后加入自定义按钮 -->
<template slot="left-toolbar-after">
<el-dropdown>
<span class="el-dropdown-link">
<i class="op-icon fa el-icon-video-camera" title="上传视频"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-upload style="display: inline-block;" :show-file-list="false" ref="upload" name="filedatas"
action="" :http-request="uploadVideo" multiple>
<span>上传视频</span>
</el-upload>
</el-dropdown-item>
<el-dropdown-item>
<div @click="dialogVisible = true">添加视频地址</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</mavon-editor>
</el-form-item>
</el-col>
</el-row>
- 相关事件介绍
@imgAdd="imgAdd":将图片上传到服务器,返回地址替换到md中
imgAdd: function (pos, $file) {
var formdata = new FormData();
formdata.append('multipartFile', $file);
upload(formdata).then(res => {
this.$refs.md.$img2Url(pos, res.data.url);
}).catch(err => {
console.log(err)
})
},
@imgDel="imgDel":删除图片,某些业务场景下,需要删除服务器端图片时需要此方法
imgDel: function (filename) {
//delBatchFile(filename[0].split(this.img)[1])
},
uploadVideo:上传视频
//上传视频
uploadVideo(param) {
this.openLoading();
this.files = param.file;
var formData = new FormData();
formData.append("multipartFile", this.files);
upload(formData)
.then((res) => {
const $vm = this.$refs.md;
// 将文件名与文件路径插入当前光标位置,这是mavon-editor 内置的方法
$vm.insertText($vm.getTextareaDom(), {
prefix: `<video height=100% width=100% controls autoplay src="${res.data.url}"></video>`,
subfix: "",
str: "",
});
this.loading.close();
})
.catch((err) => {
this.loading.close();
});
},
- 获取编辑器中的内容
this.content = this.$refs.md.d_render;
wangeditor
安装命令
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save
组件使用
<template>
<div class="app-container">
<el-row :gutter="24">
<el-form-item label="关于我">
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"/>
<Editor
style="height: 500px; overflow-y: hidden"
v-model="form.aboutMe"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"/>
</div>
</el-form-item>
</el-row>
</div>
</template>
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
components: {
Editor,
Toolbar,
},
data() {
return {
editor: null,
toolbarConfig: {},
editorConfig: {
placeholder: "请输入内容...",
MENU_CONF: {
// 配置上传图片
uploadImage: {
customUpload: this.contentUpload, // this.contentUpload 是 methods 中的一个普通方法
},
//配置上传视频
uploadVideo: {
customUpload: this.uploadVideo,
},
codeSelectLang: {
// 代码语言
codeLangs: [
{ text: "CSS", value: "css" },
{ text: "HTML", value: "html" },
{ text: "XML", value: "xml" },
{ text: "Java", value: "java" },
// 其他
]
}
}
}
mode: "default", // or 'simple'
}
},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时,及时销毁编辑器
},
methods: {
//上传视频
uploadVideo: function (file, insertFn) {
this.files = file;
//FormData 对象
var formData = new FormData();
// 文件对象
formData.append("multipartFile", this.files);
upload(formData).then((res) => {
insertFn(res.data.url, "");
});
},
//上传图片
contentUpload: function (file, insertFn) {
this.files = file;
//FormData对象
var formData = new FormData();
//文件对象
formData.append("multipartFile", this.files);
upload(formData).then((res) => {
insertFn(res.data.url, "", res.data.url);
});
},
onCreated(editor) {
//一定要用 Object.seal() ,否则会报错
this.editor = Object.seal(editor);
},
}
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>