|
|
@@ -0,0 +1,143 @@
|
|
|
+<!-- wangeditor富文本编辑器 -->
|
|
|
+<template>
|
|
|
+ <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="html"
|
|
|
+ :defaultConfig="editorConfig"
|
|
|
+ :mode="mode"
|
|
|
+ @onCreated="onCreated"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { systemFileUpload } from "@/api/commonality/permission";
|
|
|
+ import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
|
+ import { IEditorConfig } from '@wangeditor/editor'
|
|
|
+ export default {
|
|
|
+ name: 'index',
|
|
|
+ props:{
|
|
|
+ content:{},
|
|
|
+ },
|
|
|
+ components: { Editor, Toolbar },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ html:"",
|
|
|
+ editor: null,
|
|
|
+ toolbarConfig: { },
|
|
|
+ editorConfig: {
|
|
|
+ placeholder: "请输入内容...",
|
|
|
+ // 所有的菜单配置，都要在 MENU_CONF 属性下
|
|
|
+ MENU_CONF: {
|
|
|
+ //配置上传图片
|
|
|
+ uploadImage: {
|
|
|
+ customUpload: this.uploadImg,
|
|
|
+ customInsert: this.insertImg,
|
|
|
+ maxFileSize: 5 * 1024 * 1024, // 5M
|
|
|
+ // 最多可上传几个文件，默认为 100
|
|
|
+ maxNumberOfFiles: 1,
|
|
|
+ // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
|
|
|
+ allowedFileTypes: ['image/*'],
|
|
|
+ // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
|
|
|
+ fieldName: "file",
|
|
|
+ meta: {},
|
|
|
+ headers: {},
|
|
|
+ metaWithUrl: false,
|
|
|
+ // 跨域是否传递 cookie ，默认为 false
|
|
|
+ withCredentials: false,
|
|
|
+ // 超时时间，默认为 10 秒
|
|
|
+ timeout: 5 * 1000, // 5 秒
|
|
|
+ },
|
|
|
+ // 配置上传视频（同上传图片）
|
|
|
+ uploadVideo: {
|
|
|
+ customUpload: this.uploadVideo,
|
|
|
+ customInsert: this.insertImg,
|
|
|
+ maxFileSize: 20 * 1024 * 1024, // 20M
|
|
|
+ // 最多可上传几个文件，默认为 100
|
|
|
+ maxNumberOfFiles: 100,
|
|
|
+ // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
|
|
|
+ allowedFileTypes: ['video/*'],
|
|
|
+ // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
|
|
|
+ fieldName: "file",
|
|
|
+ meta: {},
|
|
|
+ headers: {},
|
|
|
+ metaWithUrl: false,
|
|
|
+ // 跨域是否传递 cookie ，默认为 false
|
|
|
+ withCredentials: false,
|
|
|
+ // 超时时间，默认为 10 秒
|
|
|
+ timeout: 5 * 1000, // 5 秒
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mode: 'default', // or 'simple',
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onCreated(editor) {
|
|
|
+ this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
|
|
|
+ this.$set(this,'html',this.content);
|
|
|
+
|
|
|
+ },
|
|
|
+ //自定义上传图片
|
|
|
+ uploadImg(file, insertFn) {
|
|
|
+ if (file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg' && file.type != 'image/gif') {
|
|
|
+ this.msgError('仅支持 png/jpg/gif 格式图片')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(file.size> 1024000){
|
|
|
+ this.msgError('上传图片大小不能超过10M')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let imgData = new FormData();
|
|
|
+ imgData.append("file", file);
|
|
|
+ systemFileUpload(imgData).then(response => {
|
|
|
+ insertFn(window.location.href.split('://')[0]+'://'+localStorage.getItem('fileBrowseEnvironment')+response.data.url);
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "上传成功",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //自定义上传图片
|
|
|
+ uploadVideo(file, insertFn) {
|
|
|
+ if (file.type != 'video/mp4') {
|
|
|
+ this.msgError('仅支持 mp4 格式视频')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(file.size> 20480000){
|
|
|
+ this.msgError('上传视频大小不能超过20M')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let imgData = new FormData();
|
|
|
+ imgData.append("file", file);
|
|
|
+ systemFileUpload(imgData).then(response => {
|
|
|
+ insertFn(window.location.href.split('://')[0]+'://'+localStorage.getItem('fileBrowseEnvironment')+response.data.url);
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "上传成功",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 自定义插入图片
|
|
|
+ insertImg(file) {
|
|
|
+ console.log(file);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+</style>
|
dedsudiyu