292 lines
9.2 KiB
Vue
292 lines
9.2 KiB
Vue
<template>
|
||
<div class="components-container main-cont">
|
||
<div style="position: relative;">
|
||
<span>任务标题：</span>
|
||
<el-input style="width: 200px;" placeholder="请输入任务标题" v-model="title" autosize></el-input>
|
||
<span>任务分类：</span>
|
||
<el-select v-model="classifyId" placeholder="请选择任务分类" style="width:200px;">
|
||
<el-option v-for="(item,index) in artiCletypes" :key="item.index" :label="item.classifyName" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
<span>幸运值：</span>
|
||
<el-input style="width:200px;" placeholder="请输入幸运值" type="number" v-model="luckyValue" autosize></el-input>
|
||
<div style="display: flex;align-items: center;margin: 2% 0;">
|
||
<span style="margin-right: 5px;">标题图片：</span>
|
||
<el-upload
|
||
v-model="titlePicture"
|
||
:class="{hide:hideUpload}"
|
||
:action="uploadUrl"
|
||
:limit=1
|
||
:on-success="handleUploadSuccess"
|
||
list-type="picture-card"
|
||
:on-remove="handleRemove"
|
||
:on-change="handleChange"
|
||
>
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
</div>
|
||
<div style="position: absolute;right:0;top:5px;">
|
||
<el-button style='margin:0 0 20px 20px;' size="mini" type="primary" icon="document" @click="artiReleass">发布任务
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="tinymce-content">
|
||
<textarea id="tinymceId" :value="content" class="tinymce-textarea"/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import load from './tinymce-components/dynamicLoadScript'
|
||
import toolbar from './tinymce-components/toolbar'
|
||
import plugins from './tinymce-components/plugins'
|
||
|
||
const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
|
||
|
||
export default {
|
||
name: 'Tinymce',
|
||
data() {
|
||
return {
|
||
uploadUrl: this.serverPaths.uploadUrl,
|
||
classifyId: '',
|
||
title: '',
|
||
luckyValue: '',
|
||
titlePicture:'',
|
||
isShow: false,
|
||
hideUpload: false,
|
||
limit:1,
|
||
hasChange: false,
|
||
hasInit: false,
|
||
tinymceId: 'tinymceId',
|
||
height: 235,
|
||
toolbar: [],
|
||
menubar: 'file edit insert view format table',
|
||
languageTypeList: {
|
||
'en': 'en',
|
||
'zh': 'zh_CN'
|
||
},
|
||
artiCletypes: [],
|
||
// 富文本内容
|
||
content: ''
|
||
}
|
||
},
|
||
watch: {
|
||
content(val) {
|
||
if (!this.hasChange && this.hasInit) {
|
||
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''))
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
handleChange(file, fileList){
|
||
this.hideUpload = fileList.length >= this.limit;
|
||
},
|
||
handleRemove(file, fileList) {
|
||
this.hideUpload = fileList.length >= this.limit;
|
||
},
|
||
//上传成功
|
||
handleUploadSuccess(file,fileList) {
|
||
this.titlePicture= file.data
|
||
},
|
||
// 添加任务
|
||
artiReleass(){
|
||
if (this.title == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请输入任务标题',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.classifyId == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请选择任务分类',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.luckyValue == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请选择任务幸运值',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
if (this.content == '') {
|
||
this.$notify({
|
||
title: '提示',
|
||
duration: 1800,
|
||
message: '请选择任务内容',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
this.$http({
|
||
url: this.$http.adornUrl('helpTaskPlatform/saveHelpTaskPlatform'),
|
||
method: 'post',
|
||
data: this.$http.adornData({
|
||
'title':this.title,
|
||
'classifyId':this.classifyId,
|
||
'content':this.content,
|
||
'luckyValue':this.luckyValue,
|
||
'titlePicture':this.titlePicture
|
||
})
|
||
}).then(({data}) => {
|
||
this.dialogFormVisible = false
|
||
this.$message({
|
||
message: '添加成功',
|
||
type: 'success',
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.$router.push({path: '/missionsye'});
|
||
}
|
||
})
|
||
})
|
||
},
|
||
init() {
|
||
load(tinymceCDN, (err) => {
|
||
if (err) {
|
||
this.$message.error(err.message)
|
||
return
|
||
}
|
||
this.initTinymce()
|
||
})
|
||
},
|
||
|
||
initTinymce() {
|
||
const _this = this
|
||
window.tinymce.init({
|
||
selector: `#${this.tinymceId}`,
|
||
images_upload_handler: function (blobInfo, success, failure) {
|
||
var xhr, formData;
|
||
|
||
xhr = new XMLHttpRequest();
|
||
xhr.withCredentials = false;
|
||
xhr.open('POST', this.uploadUrl);
|
||
xhr.onload = function () {
|
||
var json;
|
||
|
||
if (xhr.status != 200) {
|
||
failure('HTTP Error: ' + xhr.status);
|
||
return;
|
||
}
|
||
json =JSON.parse(xhr.responseText);
|
||
if (json == "" || json == null) {
|
||
failure('Invalid JSON: ' + xhr.responseText);
|
||
return;
|
||
}
|
||
success(json.data);
|
||
};
|
||
formData = new FormData();
|
||
formData.append('file', blobInfo.blob(), blobInfo.filename());
|
||
xhr.send(formData);
|
||
},
|
||
language: this.languageTypeList['zh'],
|
||
height: this.height,
|
||
body_class: 'panel-body ',
|
||
object_resizing: false,
|
||
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
|
||
plugins,
|
||
menubar: this.menubar,
|
||
end_container_on_empty_block: true,
|
||
powerpaste_word_import: 'clean',
|
||
code_dialog_height: 450,
|
||
code_dialog_width: 1000,
|
||
advlist_bullet_styles: 'square',
|
||
advlist_number_styles: 'default',
|
||
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
|
||
default_link_target: '_blank',
|
||
link_title: false,
|
||
// Image
|
||
imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
|
||
nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin
|
||
init_instance_callback: editor => {
|
||
if (_this.content) {
|
||
editor.setContent(_this.content)
|
||
}
|
||
_this.hasInit = true
|
||
editor.on('NodeChange Change KeyUp SetContent', () => {
|
||
this.hasChange = true
|
||
this.content = editor.getContent()
|
||
})
|
||
},
|
||
setup(editor) {
|
||
editor.on('FullscreenStateChanged', (e) => {
|
||
_this.fullscreen = e.state
|
||
})
|
||
}
|
||
})
|
||
},
|
||
destroyTinymce() {
|
||
const tinymce = window.tinymce.get(this.tinymceId)
|
||
if (this.fullscreen) {
|
||
tinymce.execCommand('mceFullScreen')
|
||
}
|
||
if (tinymce) {
|
||
tinymce.destroy()
|
||
}
|
||
},
|
||
// 获取分类
|
||
classifySelect () {
|
||
this.tableDataLoading = true
|
||
this.$http({
|
||
url: this.$http.adornUrl('platformClassify/selectClassifyList'),
|
||
method: 'get',
|
||
params: this.$http.adornParams({
|
||
})
|
||
}).then(({data}) => {
|
||
this.tableDataLoading = false
|
||
let returnData = data.data;
|
||
this.artiCletypes = returnData
|
||
})
|
||
},
|
||
},
|
||
mounted() {
|
||
this.init()
|
||
this.classifySelect()
|
||
},
|
||
beforeDestroy() {
|
||
this.destroyTinymce()
|
||
},
|
||
activated() {
|
||
if (window.tinymce) {
|
||
this.initTinymce()
|
||
}
|
||
},
|
||
deactivated() {
|
||
this.destroyTinymce()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.main-cont {
|
||
max-width: 100%;
|
||
min-width: 80%;
|
||
padding-bottom:5%;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.tinymce-container {
|
||
position: relative;
|
||
line-height: normal;
|
||
}
|
||
|
||
.tinymce-container >>> .mce-fullscreen {
|
||
z-index: 10000;
|
||
}
|
||
|
||
.tinymce-textarea {
|
||
visibility: hidden;
|
||
z-index: -1;
|
||
}
|
||
.hide .el-upload--picture-card {
|
||
display: none;
|
||
}
|
||
</style>
|