提交 8e8b7053 authored 作者: pengxiaohui's avatar pengxiaohui

富文本编译器增加图片上传功能

上级 2ccef84f
import { fileUpload } from '@/api/system'
export default function(blobInfo, succFun, failFun) {
const file = blobInfo.blob()
const formData = new window.FormData()
formData.append('file', file)
formData.append('type', 'image')
fileUpload(formData)
.then(response => {
const [first] = response.data
response.code === 0 ? succFun(first.full_path) : failFun(response.message)
})
.catch(response => {
failFun(response.message)
})
}
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<script> <script>
import plugins from './plugins' import plugins from './plugins'
import toolbar from './toolbar' import toolbar from './toolbar'
import ImageUpload from './imageUpload'
export default { export default {
name: 'Tinymce', name: 'Tinymce',
props: { props: {
...@@ -105,6 +105,7 @@ export default { ...@@ -105,6 +105,7 @@ export default {
readonly: this.readonly, readonly: this.readonly,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px', fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
images_upload_handler: ImageUpload,
height: this.height, height: this.height,
body_class: 'panel-body ', body_class: 'panel-body ',
object_resizing: false, object_resizing: false,
......
...@@ -2,6 +2,6 @@ ...@@ -2,6 +2,6 @@
// Detail plugins list see https://www.tinymce.com/docs/plugins/ // Detail plugins list see https://www.tinymce.com/docs/plugins/
// Custom builds see https://www.tinymce.com/download/custom-builds/ // Custom builds see https://www.tinymce.com/download/custom-builds/
const plugins = ['advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount'] const plugins = ['advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount quickbars']
export default plugins export default plugins
// Here is a list of the toolbar // Here is a list of the toolbar
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
const toolbar = ['fontsizeselect fontselect lineheight bold italic underline strikethrough forecolor backcolor alignleft aligncenter alignright outdent indent blockquote removeformat subscript superscript', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons fullscreen code codesample searchreplace'] const toolbar = ['fontsizeselect fontselect lineheight bold italic underline strikethrough forecolor backcolor alignleft aligncenter alignright outdent indent blockquote removeformat subscript superscript', 'hr bullist numlist link quickimage charmap preview anchor pagebreak insertdatetime media table emoticons fullscreen code codesample searchreplace']
export default toolbar export default toolbar
...@@ -36,18 +36,22 @@ ...@@ -36,18 +36,22 @@
<el-upload <el-upload
:disabled="isDetails" :disabled="isDetails"
class="avatar-uploader" class="avatar-uploader"
action="https://baidu.com" action="#"
:show-file-list="false" :show-file-list="false"
:before-upload="val => beforeUpload(val, 'web_img_uri')"> :before-upload="val => beforeUpload(val, 'web_img_uri')">
<img v-if="form.web_img_uri" :src="form.web_img_uri" class="avatar"> <img v-if="form.web_img_uri" :src="form.web_img_uri" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </el-upload>
<div class="avatar-preview" v-if="form.web_img_uri">
<i class="el-icon-zoom-in"></i>
<el-image :src="form.web_img_uri" :preview-src-list="[form.web_img_uri]" :z-index="9999"/>
</div>
<p class="des">请上传文件,最多上传一张/份<br>支持:PNG、JPG</p> <p class="des">请上传文件,最多上传一张/份<br>支持:PNG、JPG</p>
</el-form-item> </el-form-item>
<el-form-item label="移动端图片:" class="file-upload"> <el-form-item label="移动端图片:" class="file-upload">
<el-upload <el-upload
:disabled="isDetails" :disabled="isDetails"
action="https://baidu.com" action="#"
class="avatar-uploader" class="avatar-uploader"
:show-file-list="false" :show-file-list="false"
:before-upload="val => beforeUpload(val, 'mobile_terminal_img_uri')"> :before-upload="val => beforeUpload(val, 'mobile_terminal_img_uri')">
...@@ -59,7 +63,7 @@ ...@@ -59,7 +63,7 @@
<el-form-item label="上传附件:" class="file-upload"> <el-form-item label="上传附件:" class="file-upload">
<el-upload <el-upload
:disabled="isDetails" :disabled="isDetails"
action="https://baidu.com" action="#"
class="file-uploader" class="file-uploader"
ref="upload" ref="upload"
:show-file-list="false" :show-file-list="false"
...@@ -71,7 +75,7 @@ ...@@ -71,7 +75,7 @@
<el-form-item label="上传视频:" class="file-upload"> <el-form-item label="上传视频:" class="file-upload">
<el-upload <el-upload
:disabled="isDetails" :disabled="isDetails"
action="https://baidu.com" action="#"
class="file-uploader" class="file-uploader"
ref="upload" ref="upload"
:show-file-list="false" :show-file-list="false"
...@@ -359,11 +363,46 @@ export default { ...@@ -359,11 +363,46 @@ export default {
.el-form-item.mb-15{ .el-form-item.mb-15{
margin-bottom:15px; margin-bottom:15px;
} }
.file-upload .el-form-item__content{
position:relative;
}
.avatar-preview{
position:absolute;
left:91px;
top:91px;
width:30px;
height:30px;
cursor:zoom-in;
border-radius:0 0 4px 0;
overflow: hidden;
}
.avatar-preview>i{
position:absolute;
left:0;
top:0;
font-size:20px;
width:100%;
height:100%;
text-align:center;
line-height:30px;
background:#c9c9c9;
}
.avatar-preview .el-image{
width:100%;
height:100%;
opacity:0;
}
.avatar-preview ::v-deep.el-image__preview{
cursor: zoom-in;
}
.avatar-uploader, .file-uploader{ .avatar-uploader, .file-uploader{
display:inline-block; display:inline-block;
vertical-align: top; vertical-align: top;
width:130px; width:130px;
} }
.avatar-uploader{
height:130px;
}
.avatar-uploader ::v-deep.el-upload { .avatar-uploader ::v-deep.el-upload {
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
border-radius: 6px; border-radius: 6px;
......
...@@ -225,7 +225,18 @@ export default { ...@@ -225,7 +225,18 @@ export default {
labelKey: 'name', labelKey: 'name',
valueKey: 'id' valueKey: 'id'
}, },
{ type: 'input', placeholder: '手机号/邮箱', prop: 'id' }, // { type: 'input', placeholder: '手机号/邮箱', prop: 'id' },
{
type: 'select',
placeholder: '项目',
options: this.userList,
prop: 'sso_id',
labelKey: 'realname',
valueKey: 'id',
filterable: true,
remote: true,
'remote-method': this.fetchUserList
},
{ {
type: 'select', type: 'select',
placeholder: '角色', placeholder: '角色',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论