| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\components\\wangEditor\\index.vue?vue&type=style&index=0&id=465675e3&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\components\\wangEditor\\index.vue","mtime":1761614938990},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouYm90dG9tIHsNCiAgbWFyZ2luLWJvdHRvbTogMTBweDsNCiAgY3Vyc29yOiBwb2ludGVyOw0KfQ0KLm1vbmFjby1ib3ggOjp2LWRlZXAgLmVsLXRleHRhcmVhX19pbm5lciB7DQogIGhlaWdodDogNjAwcHg7DQp9DQo6OnYtZGVlcCAudy1lLXRvb2xiYXIgew0KICB6LWluZGV4OiAyICFpbXBvcnRhbnQ7DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAwMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/wangEditor","sourcesContent":["<template>\r\n <div>\r\n <div v-show=\"!monacoBox\">\r\n <div ref=\"wang-editor\" class=\"wang-editor\" />\r\n </div>\r\n <div v-if=\"monacoBox\">\r\n <el-button type=\"primary\" class=\"bottom\" v-db-click @click=\"getHtmlint\">可视化界面</el-button>\r\n <monaco class=\"monaco-box\" @change=\"changeValue\" :value=\"newHtml\" />\r\n </div>\r\n\r\n <el-dialog :visible.sync=\"modalPic\" width=\"1024px\" title=\"上传图片\" :close-on-click-modal=\"false\">\r\n <uploadPictures v-if=\"modalPic\" :isChoice=\"isChoice\" @getPic=\"getPic\"></uploadPictures>\r\n </el-dialog>\r\n <el-dialog :visible.sync=\"modalVideo\" width=\"1024px\" title=\"上传视频\" :close-on-click-modal=\"false\">\r\n <uploadVideo v-if=\"modalVideo\" @getVideo=\"getvideo\"></uploadVideo>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n<script>\r\nimport monaco from './monaco';\r\nimport E from 'wangeditor';\r\nimport AlertMenu from './editor';\r\nimport HtmlMenu from './html';\r\nimport uploadPictures from '@/components/uploadPictures';\r\nimport uploadVideo from '@/components/uploadVideo2';\r\nimport { getCookies } from '@/libs/util';\r\n\r\nimport util from '../../utils/bus';\r\nexport default {\r\n name: 'Index',\r\n components: {\r\n uploadPictures,\r\n uploadVideo,\r\n monaco,\r\n },\r\n props: {\r\n content: {\r\n type: String,\r\n default: '',\r\n },\r\n },\r\n\r\n data() {\r\n return {\r\n monacoBox: false,\r\n value: '',\r\n modalPic: false,\r\n isChoice: '多选',\r\n picTit: 'danFrom',\r\n img: '',\r\n modalVideo: false,\r\n editor: null,\r\n uploadSize: 2,\r\n video: '',\r\n\r\n // header: {\r\n // \"Authori-zation\": \"Bearer \" + getCookies(\"token\"),\r\n // },\r\n };\r\n },\r\n watch: {\r\n initEditor(val) {\r\n if (val) {\r\n this.editor.txt.html(this.content);\r\n } else {\r\n this.editor.txt.html('');\r\n }\r\n },\r\n },\r\n computed: {\r\n initEditor() {\r\n return this.content && this.editor;\r\n },\r\n },\r\n created() {\r\n // window.getvideoint = this.getvideoint;\r\n // window.getHtmlint = this.getHtmlint;\r\n },\r\n mounted() {\r\n this.createEditor();\r\n util.$on('Video', (Video) => {\r\n this.getvideoint();\r\n });\r\n util.$on('Html', (Html) => {\r\n this.getHtmlint();\r\n });\r\n },\r\n\r\n methods: {\r\n changeValue(value) {\r\n this.newHtml = value;\r\n this.$emit('editorContent', value);\r\n\r\n this.$emit('input', value);\r\n },\r\n // 获取多张图信息\r\n getPic(pc) {\r\n let _this = this;\r\n _this.img = pc;\r\n _this.modalPic = false;\r\n _this.img.map((d) => {\r\n this.editor.cmd.do('insertHTML', `<img src=\"${d.att_dir}\" style=\"max-width:100%;\"/>`);\r\n });\r\n },\r\n getimg() {\r\n this.modalPic = true;\r\n this.isChoice = '多选';\r\n },\r\n getvideoint() {\r\n // this.modalVideo = true;\r\n this.$videoModal((e) => {\r\n console.log(e);\r\n let _this = this;\r\n _this.modalVideo = false;\r\n this.video = e;\r\n let videoHTML =\r\n '<video src=\"' + this.video + '\" controls style=\"max-width:100%;min-height:500rpx\"></video><p><br></p>';\r\n this.editor.cmd.do('insertHTML', videoHTML);\r\n });\r\n },\r\n getHtmlint() {\r\n this.monacoBox = !this.monacoBox;\r\n this.value = this.newHtml;\r\n if (!this.monacoBox) {\r\n this.editor.txt.html(this.newHtml);\r\n }\r\n },\r\n getvideo(data) {\r\n let _this = this;\r\n _this.modalVideo = false;\r\n this.video = data;\r\n let videoHTML =\r\n '<video src=\"' + this.video + '\" controls style=\"max-width:100%;min-height:500rpx\"></video><p><br></p>';\r\n this.editor.cmd.do('insertHTML', videoHTML);\r\n },\r\n\r\n createEditor() {\r\n let _this = this;\r\n const menuKey = 'alertMenuKey';\r\n const html = 'alertHtml';\r\n this.editor = new E(this.$refs['wang-editor']);\r\n\r\n this.editor.menus.extend(menuKey, AlertMenu);\r\n this.editor.menus.extend(html, HtmlMenu);\r\n this.editor.config.menus = this.editor.config.menus.concat(html);\r\n this.editor.config.menus = this.editor.config.menus.concat(menuKey);\r\n this.editor.config.showLinkImg = false;\r\n this.editor.config.uploadImgFromMedia = function () {\r\n _this.getimg();\r\n };\r\n // this.editor.config.uploadVideoHeaders = _this.header;\r\n this.editor.config.height = 600;\r\n this.editor.config.menus = [\r\n 'alertHtml',\r\n 'head',\r\n 'bold',\r\n 'fontSize',\r\n 'fontName',\r\n 'italic',\r\n 'underline',\r\n 'strikeThrough',\r\n 'indent',\r\n 'lineHeight',\r\n 'foreColor',\r\n 'backColor',\r\n 'link',\r\n 'list',\r\n // \"todo\",\r\n 'justify',\r\n 'quote',\r\n 'emoticon',\r\n 'image',\r\n 'alertMenuKey',\r\n // \"table\",\r\n 'code',\r\n 'splitLine',\r\n ];\r\n // 配置全屏功能按钮是否展示\r\n // this.editor.config.showFullScreen = false\r\n this.editor.config.uploadImgShowBase64 = true;\r\n // this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']\r\n this.editor.config.zIndex = 0;\r\n // this.editor.config.uploadImgMaxSize = this.uploadSize * 1024 * 1024\r\n this.editor.config.compatibleMode = () => {\r\n // 返回 true 表示使用兼容模式；返回 false 使用标准模式\r\n return true;\r\n };\r\n this.editor.config.onchange = (newHtml) => {\r\n this.newHtml = newHtml;\r\n this.$emit('editorContent', newHtml);\r\n };\r\n this.editor.config.onchangeTimeout = 300; // change后多久更新数据\r\n\r\n this.editor.create();\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.bottom {\r\n margin-bottom: 10px;\r\n cursor: pointer;\r\n}\r\n.monaco-box ::v-deep .el-textarea__inner {\r\n height: 600px;\r\n}\r\n::v-deep .w-e-toolbar {\r\n z-index: 2 !important;\r\n}\r\n</style>\r\n"]}]}
|
