1 line
9.4 KiB
JSON
1 line
9.4 KiB
JSON
{"remainingRequest":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/components/edit/EditContent.vue?vue&type=style&index=0&id=3628a17a&scoped=true&lang=css","dependencies":[{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/components/edit/EditContent.vue","mtime":1742646402767},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/css-loader/dist/cjs.js","mtime":1743264596127},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1743264597030},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/postcss-loader/src/index.js","mtime":1743264596321},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/cache-loader/dist/cjs.js","mtime":1743264595665},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js","mtime":1743264596512}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ci50aW55bWNlLWVkaXRvcnsKCWRpc3BsYXk6IGZsZXg7CglmbGV4LWRpcmVjdGlvbjogY29sdW1uOwoJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7CglhbGlnbi1pdGVtczogY2VudGVyOwp9Cg=="},{"version":3,"sources":["EditContent.vue"],"names":[],"mappings":";AAkQA;AACA;AACA;AACA;AACA;AACA","file":"EditContent.vue","sourceRoot":"src/components/edit","sourcesContent":["<template>\n\t<div class=\"tinymce-editor\">\n\t\t<a-input v-model=\"ArticleTitle\" placeholder=\"请输入文字标题\" />\n\t\t<a-textarea\n v-model=\"briefContent\"\n placeholder=\"请输入文章简介\"\n :auto-size=\"{ minRows: 2, maxRows: 5 }\"\n />\n <a-select\n\t\t\t\tv-model=\"competitionId\"\n\t\t\t\tstyle=\"width: 100%\"\n :options=\"grades\"\n allowClear\n placeholder=\"请选择相关比赛\"\n />\n <a-select\n\t\t\tv-model=\"articleType\"\n\t\t\t\tstyle=\"width: 100%\"\n :options=\"message\"\n allowClear\n placeholder=\"选择类型\"\n />\n \n\t\t<Editor\n\t\t\t\t\t\t\t:id=\"tinymceId\"\n\t\t\t\t\t\t\t:init=\"init\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\tv-model=\"myValue\"\n\t\t\t\t\t\t\t@onClick=\"onClick\"\n\t\t\t></Editor>\n\t\t\t<a-button type=\"primary\" @click=\"SendTinymce\">修改文章</a-button>\n\t</div>\n</template>\n<script>\n import {message} from \"@/utils/const\";\nimport {UpArtile,AllCompetition,SendSMS,SendEmail,AllArticle} from \"@/api\"\nimport tinymce from 'tinymce/tinymce' //tinymce默认hidden,不引入不显示\nimport Editor from '@tinymce/tinymce-vue'//编辑器引入\nimport 'tinymce/themes/silver/theme'//编辑器主题\nimport 'tinymce/icons/default' //引入编辑器图标icon,不引入则不显示对应图标\n// 引入编辑器插件(基本免费插件都在这儿了)\nimport 'tinymce/plugins/advlist' //高级列表\nimport 'tinymce/plugins/autolink' //自动链接\nimport 'tinymce/plugins/link' //超链接\nimport 'tinymce/plugins/image' //插入编辑图片\nimport 'tinymce/plugins/lists' //列表插件\nimport 'tinymce/plugins/charmap' //特殊字符\nimport 'tinymce/plugins/media' //插入编辑媒体\nimport 'tinymce/plugins/wordcount'// 字数统计\n// import Cookies from \"js-cookie\";\n\nconst fonts = [\n\t\"宋体=宋体\",\n\t\"微软雅黑=微软雅黑\",\n\t\"新宋体=新宋体\",\n\t\"黑体=黑体\",\n\t\"楷体=楷体\",\n\t\"隶书=隶书\",\n\t\"Courier New=courier new,courier\",\n\t\"AkrutiKndPadmini=Akpdmi-n\",\n\t\"Andale Mono=andale mono,times\",\n\t\"Arial=arial,helvetica,sans-serif\",\n\t\"Arial Black=arial black,avant garde\",\n\t\"Book Antiqua=book antiqua,palatino\",\n\t\"Comic Sans MS=comic sans ms,sans-serif\",\n\t\"Courier New=courier new,courier\",\n\t\"Georgia=georgia,palatino\",\n\t\"Helvetica=helvetica\",\n\t\"Impact=impact,chicago\",\n\t\"Symbol=symbol\",\n\t\"Tahoma=tahoma,arial,helvetica,sans-serif\",\n\t\"Terminal=terminal,monaco\",\n\t\"Times New Roman=times new roman,times\",\n\t\"Trebuchet MS=trebuchet ms,geneva\",\n\t\"Verdana=verdana,geneva\",\n\t\"Webdings=webdings\",\n\t\"Wingdings=wingdings,zapf dingbats\"\n];\nexport default {\n\tcomponents: {\n\t\tEditor\n\t},\n\tprops: {\n\t\t//内容\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: ''\n\t\t},\n\t\t//是否禁用\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false\n\t\t},\n\t\t// 用于区分单个tinymce\n\t tinymceId: {\n\t\ttype: String,\n\t\tdefault: \"tinymce\"\n\t},\n\t\t//插件\n\t\tplugins: {\n\t\t\ttype: [String, Array],\n\t\t\tdefault: 'advlist autolink link image lists charmap media wordcount'\n\t\t},\n\t\t//工具栏\n\t\ttoolbar: {\n\t\t\ttype: [String, Array],\n\t\t\tdefault: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table'\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tmessage,\n\t\t\t//初始化配置\n\t\t\tgrades:[],\n\t\t\tmyValue :this.value,\n\t\t\tArticleTitle:\"\",\n\t\t\tcompetitionId:\"\",\n\t\t\tarticleType:\"\",\n\t\t\tbriefContent:\"\",\n\t\t\tinit: {\n\t\t\t\tselector: '#' + this.tinymceId,\n\t\t\t\tlanguage_url: '@/assets/tinymce/langs/zh_CN.js',//汉化路径是自定义的,一般放在public或static里面\n\t\t\t\tlanguage: 'zh_CN',\n\t\t\t\tskin_url: '/tinymce/skins/ui/oxide',//皮肤\n\t\t\t\tplugins: this.plugins,//插件\n\t\t\t\t//工具栏\n\t\t\t\ttoolbar: this.toolbar,\n\t\t\t\ttoolbar_location: '/',\n\t\t\t\tfontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小\n\t\t\t\tfont_formats: fonts.join(\";\"),\n\t\t\t\tcontent_style: \"p {margin: 0px; border:0px ; padding: 0px}\", // 设置p的行间距\n\t\t\t\twidth: \"100%\",\n\t\t\t\t// height: 500,//高度\n\t\t\t\tplaceholder: '在这里输入文字',\n\n\t\t\t\tbranding: false,//隐藏右下角技术支持\n\t\t\t\t//图片上传\n\t\t\t},\n\t\t\tArticleId:this.$route.query.id,\n\t\t\tArticle:{},\n\t\t}\n\t},\n\twatch: {\n\t\t//监听内容变化\n\t\tvalue(newValue) {\n\t\t\tthis.myValue = (newValue == null ? '' : newValue)\n\t\t},\n\t\tmyValue (newValue) {\n\t\t\tif(this.triggerChange){\n\t\t\t\tthis.$emit('change', newValue)\n\t\t\t}else{\n\t\t\t\tthis.$emit('input', newValue)\n\t\t\t}\n\t\t}\n\t},\n\tmounted () {\n\t\ttinymce.init({})\n\t\t// console.log(this.toolbar,'======')\n\t\tthis.GetAritle()\n\t\tAllCompetition().then(response => {\n // 获取竞赛数据\n const competitions = response.data;\n\n // 转换数据为适合select选项的格式\n const selectOptions = competitions.map(competition => ({\n label: competition.competitionName,\n value: competition.competitionId\n }));\n // 将转换后的数据存储在Vue实例中,以便在模板中使用\n this.grades = selectOptions;\n}).catch(error => {\n console.error(error);\n});\n\n\t},\n\tmethods: {\n\t\tGetAritle(){\n\t\t\tconsole.log(this.ArticleId)\n\t\t\tif(this.ArticleId!=''||null){\n\t\t\t\tAllArticle().then((res) =>{\n\t\t\t\tres.data.forEach(item=>{\n\t\t\t\t\tconsole.log(item)\n\t\t\t\t\tif(item.articleId==this.ArticleId){\n\t\t\t\t\t\tconsole.log(item)\n\t\t\t\t\tthis.competitionId=item.competitionId\n this.ArticleTitle = item.articleTitle,\n\t\t\t\t\tthis.myValue=item.articleContent,\n\t\t\t\t\tthis.articleType=item.articleType,\n\t\t\t\t\tthis.briefContent=item.briefContent\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\t\tonClick(e) {\n\t\t\tthis.$emit('onClick', e, tinymce)\n\t\t},\n\t\t//可以添加一些自己的自定义事件,如清空内容\n\t\tclear() {\n\t\t\tthis.myValue = ''\n\t\t},\n\t\tformatTime(time) {\n // 将 ISO 8601 格式的时间转换为 Date 对象\n const date = new Date(time);\n \n // 获取年月日时分秒\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const day = String(date.getDate()).padStart(2, '0');\n const hours = String(date.getHours()).padStart(2, '0');\n const minutes = String(date.getMinutes()).padStart(2, '0');\n const seconds = String(date.getSeconds()).padStart(2, '0');\n \n // 返回格式化后的时间字符串\n return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;\n },\n\t\tSendTinymce() {\n const data = {\n\t\tarticleId:this.ArticleId,\n userId: this.$store.state.user.userId,\n\t\tbriefContent:this.briefContent,\n competitionId: this.competitionId,\n articleType: this.articleType,\n articleTitle: this.ArticleTitle,\n articleContent: this.myValue,\n\t\tpublishTime: this.formatTime(new Date())\n };\n\n UpArtile(data)\n .then(res => {\n if (res.code == 200) {\n this.$message.success(res.data);\n if (this.articleType == '公告') {\n return { competitionId: this.competitionId, articleId: this.ArticleId };\n }\n } else {\n throw new Error(\"修改失败\");\n }\n })\n .then(notificationData => {\n if (notificationData) {\n return SendEmail(notificationData)\n .then(() => SendSMS(notificationData))\n .then(() => {\n this.$message.success(\"短信提醒与邮件提醒成功\");\n });\n }\n })\n .catch(error => {\n console.error(error);\n this.$notify.error({ title: '错误', message: error.message });\n });\n}\n\n\t}\n}\n</script>\n<style scoped>\n.tinymce-editor{\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n}\n</style>\n"]}]} |