You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.7 KiB
Vue
129 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<p style="color: red;">建议上传[宽*高]不超过[794px*1123px]的图片</p>
|
|
<div style="width: 100%;">
|
|
<Editor v-model="html" :init="init" :toolbar="toolbar" :plugins="plugins"
|
|
:disabled="disabled" :placeholder="placeholder"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Editor from '@tinymce/tinymce-vue'
|
|
import tinymce from 'tinymce/tinymce'
|
|
import 'tinymce/themes/silver'
|
|
import 'tinymce/icons/default'
|
|
import 'tinymce/models/dom'
|
|
// 引入编辑器插件
|
|
import 'tinymce/plugins/code' // 编辑源码
|
|
import 'tinymce/plugins/image' // 插入编辑图片
|
|
import 'tinymce/plugins/link' // 超链接
|
|
import 'tinymce/plugins/preview' // 预览
|
|
import 'tinymce/plugins/table' // 表格
|
|
import 'tinymce/plugins/lists' // 列表编号
|
|
import 'tinymce/plugins/advlist' //高级列表编号
|
|
import request from "@/utils/request";
|
|
|
|
let type = ''
|
|
let filePrefix = ''
|
|
let uploadUrl = ''
|
|
|
|
|
|
export default {
|
|
components: {
|
|
Editor
|
|
},
|
|
name: "cusEditor",
|
|
props: {
|
|
content: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
type: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
uploadUrl: '',
|
|
toolbar: "undo redo | preview image forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
|
|
alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \
|
|
table | code selectall",
|
|
plugins: "code image link preview table lists advlist",
|
|
placeholder: "请输入...",
|
|
disabled: false,
|
|
editor: null,
|
|
init: {
|
|
language_url: '/tinymce/langs/zh_CN.js',
|
|
language: 'zh_CN',
|
|
skin_url: '/tinymce/skins/ui/oxide',
|
|
content_css: '/tinymce/skins/content/default/content.css',
|
|
menubar: false,
|
|
statusbar: true,
|
|
plugins: this.plugins,
|
|
toolbar: this.toolbar,
|
|
fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',
|
|
height: this.height || '500',
|
|
placeholder: this.placeholder,
|
|
branding: false,
|
|
resize: true,
|
|
elementpath: true,
|
|
content_style: '',
|
|
images_upload_handler(blobInfo, progress) {
|
|
// return new Promise((resolve, reject) => {
|
|
// return resolve("data:image/*;base64," + blobInfo.base64())
|
|
// })
|
|
return new Promise((resolve, reject) => {
|
|
|
|
let param = new FormData(); //创建form对象
|
|
param.append('file', blobInfo.blob(), blobInfo.filename());//通过append向form对象添加数据
|
|
param.append("type", type);
|
|
let config = {
|
|
headers: {
|
|
"Content-Type": 'multipart/form-data',
|
|
}
|
|
}; //添加请求头
|
|
request.post(uploadUrl, param, config)
|
|
.then((res) => {
|
|
if (res.code === 20000) {
|
|
return resolve(res.data.name)
|
|
} else {
|
|
return reject('err:' + res.message)
|
|
}
|
|
}).catch((err) => {
|
|
return reject('err:' + err)
|
|
})
|
|
})
|
|
},
|
|
setup: (editor) => {
|
|
this.editor = editor
|
|
editor.on('init', function () {
|
|
this.getBody().style.fontSize = '14px'
|
|
})
|
|
}
|
|
},
|
|
html: this.content,
|
|
}
|
|
},
|
|
mounted() {
|
|
tinymce.init(this.init)
|
|
},
|
|
created() {
|
|
type = this.type
|
|
|
|
// this.$imageHost().then(res => {
|
|
// filePrefix = res
|
|
// })
|
|
uploadUrl = process.env.VUE_APP_BASE_API + "/udiwms/upload/register/file";
|
|
if (this.content) {
|
|
this.html = this.content
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.editor.destroy();
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|