<template> <div class="app-content" style="max-height:75vh;overflow:auto;"> <a-spin :spinning="loading" style="width:100%;height:100%;"> <a-form-model ref="from" :model="formData" :rules="rules" style="border-top: 0px" class="from-table font-line-space"> <a-row> <a-col :span="24" style="border-top: 0px;"> <div class="tb-title"> <span>通知发布</span> </div> </a-col> </a-row> <a-row type="flex"> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div class="required">标题</div> </div> </a-col> <a-col :span="22"> <a-form-model-item prop="title"> <a-input placeholder="项目合同编号" v-model="formData.title" :maxLength="100" style="width: 80%" /> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="24" style="border-top: 0px;"> <div class="tb-title"> <span>内容</span> </div> </a-col> </a-row> <a-row> <a-col :span="24"> <a-form-model-item prop="content"> <textarea name="" id="tinymce_dom" v-model="formData.content"></textarea> </a-form-model-item> <!-- <a-col :span="24" style="line-height: 1.5;"> <span>当前字数:{{tinymceWordCount}}</span> <span style="margin-left: 50px;">还可以输入{{tinymceLimit - tinymceWordCount}}字</span> </a-col> --> </a-col> </a-row> </a-form-model> </a-spin> </div> </template> <script> export default { name: "noticeEdit", components: {}, props: { value: { type: String, default: () => { return null; }, }, }, data () { return { formData: { title: null, content: null }, rules: { title: [{ required: true, message: '请填写标题', trigger: 'blur' },], content: [{ required: true, message: '请填写内容', trigger: 'blur' },], }, loading: false, // 富文本字数 tinymceLimit: 15000, tinymceWordCount: 0, }; }, watch: { }, computed: { textContent () { return tinymce.activeEditor.getContent() } }, mounted () { this.tinymceSet() }, created () { this.getById() }, computed: { }, methods: { getById () { if (!!this.value) { this.loading = true this.$api.notice.getById({ id: this.value }).then(({ data = {} }) => { if (data) { this.formData = data tinyMCE.activeEditor.setContent(data.content) } this.loading = false }).catch(() => { this.loading = false }) } }, submit () { this.formData.content = tinymce.activeEditor.getContent() this.$refs.from.validate(valid => { if (valid) { this.loading = true this.$api.notice.save(this.formData).then(({ data = {} }) => { if (data) { this.formData.id = data this.$emit('close', 'edit') } }).catch(() => { this.loading = false }) } else { this.$message.error('信息未填写完全,请检查!') return false } }) }, tinymceSet () { tinymce.remove('#tinymce_dom') tinymce.init({ selector: '#tinymce_dom', language: 'zh_CN', content_style: "img {max-width:100%;}", // menubar: false, // 隐藏底部状态栏 statusbar: false, height: 800, plugins: 'code advlist autolink link image lists preview table wordcount', toolbar: `undo redo | styleselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | wordcount`, // 初始化完成回调 init_instance_callback: (editor) => { // let wordcount = editor.plugins.wordcount // this.tinymceWordCount = wordcount.body.getWordCount() }, // 图片上传路径 // images_upload_url: 'http://192.168.1.185:8888/profile', // 图片上传操作 images_upload_handler: (blobInfo, succFun, failFun) => { this.$api.base.asyncUpload(this.uploadHandle(blobInfo.blob(), blobInfo.filename())).then(({ data = {} }) => { if (data) { succFun(data.downloadUrl) } }).catch((err) => { failFun(err) }) } }) // 设置富文本内容 // tinymce.activeEditor.setContent(htmlText) // 监听输入计算字数 let mark = 1 tinymce.activeEditor.on('keyup', (e) => { if (mark === 1) { // let wordcount = tinymce.activeEditor.plugins.wordcount // this.tinymceWordCount = wordcount.body.getWordCount() mark = 0 setTimeout(() => { mark = 1 }, 500) } }) }, uploadHandle (file, fileName) { let formData = new FormData() formData.append('file', file) formData.append('fileName', fileName) return formData }, }, }; </script> <style scoped lang="less"> </style>