<template>
<p class="privateLetter mt20">
<el-form size="small" label-width="150px" ref="detailFormAdd" :model="detailFormAdd" label-positon="left" :rules="formRule">
<el-row>
<el-col :span="20" :offset="1">
<el-form-item class="filter-item is-required" label="资讯内容：" prop="articleContent">
<!-- 富文本编辑器 -->
<Editor id="tinymce" v-model="detailFormAdd.articleContent" :init="editorInit" :key="tinymceFlag"></Editor>
</el-form-item>
</el-col>
</el-row>
<p class="mt20 tc mb20">
<el-button type="primary" size="medium" @click="submit()">保存</el-button>
</p>
</el-form>
</p>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/save'
import 'tinymce/plugins/image'
import 'tinymce/icons/default/icons'
import { appRequestFormData, appRequest, appRequestFile } from '@/fetch/index.js'
import qs from 'qs'
export default {
name: '',
components: {
Editor
},
data () {
return {
tinymceFlag: 1,
editorInit: {
language_url: '/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide',
height: 500,
browser_spellcheck: true, // 拼写检查
branding: false, // 去水印
elementpath: false, // 禁用编辑器底部的状态栏
statusbar: false, // 隐藏编辑器底部的状态栏
paste_data_images: true, // 允许粘贴图像
menubar: false, // 隐藏最上方menu
plugins: 'save advlist table lists paste preview fullscreen image',
toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough save image| alignleft aligncenter alignright alignjustify | quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
images_upload_handler: function (blobInfo, success, failure) {
var formData
var file = blobInfo.blob() // 转化为易于理解的file对象
formData = new FormData()
formData.append('file', file, file.name) // 此处与源文档不一样
appRequestFile('/upload/simple?moudle=cms', formData, 'post').then((res) => {
success(res.data.data.filePath)
})
},
paste_preprocess: function (plugin, args) {
console.log('---paster')
}
},
detailFormAdd: {
articleContent: ''
},
formRule: {
articleContent: [
{ required: true, message: '请编写资讯内容', trigger: 'blur' },
{ min: 1, max: 1000000, message: '请编写资讯内容', trigger: 'blur' }
]
},
setHeader: {
token: token
}
}
},
mounted () {
var self = this
tinymce.init({})
},
activated () {
this.tinymceFlag++
},
methods: {
submit () {
this.$refs.detailFormAdd.validate((valid) => {
if (valid) {
appRequestFormData('/sys/cms/save', qs.stringify(this.detailFormAdd), 'post').then((res) => {
this.$message(res.data.msg)
this.$router.go(-1)
})
} else {
this.$message({
type: 'error',
message: '请完整表单信息'
})
return false
}
})
},
cancel () {
this.$confirm('确定要取消吗？', '确定取消', {
type: 'warning'
})
.then(() => {
this.$router.go(-1)
})
}
},
created () {
}
}
</script>
<style lang="stylus">
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
