修改文本编辑器

src/components/MonacoEditorVue/index.js

@@ -8,8 +8,10 @@ export default {
   name: 'MonacoEditor',
   props: {
     diffEditor: { type: Boolean, default: false },      //是否使用diff模式
-    width: {type: [String, Number], default: '100%'},
-    height: {type: [String, Number], default: '100%'},
+    // width: {type: [String, Number], default: '100%'},
+    // height: {type: [String, Number], default: '100%'},
+    width: Number,
+    height: Number,
     original: String,       //只有在diff模式下有效
     value: String,
     language: {type: String, default: 'javascript'},
@@ -57,8 +59,8 @@ export default {
   computed: {
     style() {
       return {
-        width: !/^\d+$/.test(this.width) ? this.width : `${this.width}px`,
-        height: !/^\d+$/.test(this.height) ? this.height : `${this.height}px`
+        width: `${this.width}px`,
+        height: `${this.height}px`
       }
     }
   },
@@ -89,7 +91,6 @@ export default {
       });
       this.diffEditor && this._setModel(this.value, this.original);
       this._editorMounted(this.editor);      //编辑器初始化后
-      console.log(this.editor.getOptions())
     },
 
     _getEditor() {

src/components/preview/SimTextPreview.vue

@@ -1,26 +1,34 @@
 <template>
   <el-dialog v-bind="$attrs" v-on="$listeners"
+             :fullscreen="fullscreen"
              :visible.sync="textPreviewVisible"
              :title="file.name"
              :close-on-click-modal="false"
              @close="closeDialog"
              :before-close="handleClose"
-             v-dialogDrag="{ x: transformX, y: transformY }">
-    <div slot="title" class="header-title">
-          <span class="title-name">{{file.name}}</span>
-        <div class="title-extension">
-          <el-button v-if="isShowUpdateBtn" @click="update" :loading="updating">Ctrl-S 保存</el-button>
-          <!-- <el-button @click="changePreviewMode">{{previewMode?'预览模式':'源码模式'}}</el-button> -->
-        </div>
-    </div>
+             :width="dialogWidth*100+'%'"
+             v-resize="containerResize"
+             class="simtext-dialog"
+             v-dialogDrag="{ dialogWidth: dialogWidth}">
+      <div slot="title" class="simtext-header-title">
+            <span class="title-name">{{file.name}}</span>
+          <div class="title-extension">
+            <el-button v-if="isShowUpdateBtn" @click="update" :class="lightTheme?'':'dark-button'" :loading="updating">Ctrl-S 保存</el-button>
+            <!-- <el-button @click="changePreviewMode">{{previewMode?'预览模式':'源码模式'}}</el-button> -->
+            <el-button @click="skinning" :class="lightTheme?'':'dark-button'">{{lightTheme?'暗色':'亮色'}}</el-button>
+            <button class="title-extension-button" @click="fullScreen">
+              <svg-icon :icon-class="fullscreen?'normalscreen':'fullscreen'"></svg-icon>
+            </button>
+          </div>
+      </div>
     <div class="content" @keydown="onKeyDown">
       <div class="editor_main_storey"></div>
       <MonacoEditor
         v-if="textPreviewVisible"
         ref="monacoEditor"
-        width="900"
-        height="640"
-        theme="vs-dark"
+        :width="editorWidth"
+        :height="editorHieght"
+        :theme="lightTheme?'vs':'vs-dark'"
         :language="language"
         :diffEditor="diffEditor"
         original="..."
@@ -63,6 +71,7 @@
     },
     data(){
       return{
+        lightTheme: false,
         defalutLanguage: 'redis',
         language: this.defalutLanguage,
         lineWrapping: false,
@@ -77,18 +86,50 @@
         },
         diffEditor: false,
         textPreviewVisible: false,
-        transformX: (document.body.clientWidth-900)/2,
-        transformY: (document.body.clientHeight-640)/2,
+        fullscreen: false,
+        dialogWidth: 0.7,
+        editorWidth: 1035,
+        editorHieght: 640,
         content: '',
         newContent: '',
         previewMode: true,
         isShowUpdateBtn: false,
         updating: false,
         loading: {},
+        darkButton: {
+          background: '#565656!important',
+          border: '1px solid #565656!important',
+          color: '#ffffff!important'
+        }
+      }
+    },
+    mounted() {
+      this.setTheme()
+    },
+    directives: {
+      resize: { // 指令的名称
+        bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
+          let width = '', height = '';
+          function isReize() {
+            const style = document.defaultView.getComputedStyle(el);
+            if (width !== style.width || height !== style.height) {
+              binding.value();  // 关键
+            }
+            width = style.width;
+            height = style.height;
+          }
+          el.__vueSetInterval__ = setInterval(isReize, 0);
+        },
+        unbind(el) {
+          clearInterval(el.__vueSetInterval__);
+        }
       }
     },
     watch: { //监听file的变化，进行相应的操作即可
       file: function (a) {
+        this.editorWidth = document.body.clientWidth * this.dialogWidth
+        this.editorHieght = document.body.clientHeight * this.dialogWidth - 50
+
         this.loading = this.$message({
           iconClass: 'el-icon-loading',
           type: 'info',
@@ -129,6 +170,10 @@
       }
     },
     methods:{
+      containerResize() {
+        this.editorWidth = document.body.clientWidth * this.dialogWidth
+        this.editorHieght = document.body.clientHeight * this.dialogWidth - 50
+      },
       handleClose(done) {
         if(this.isShowUpdateBtn){
           this.$confirm('是否保存修改？')
@@ -170,6 +215,7 @@
           }).then(() => {
             this.updating = false
             this.isShowUpdateBtn = false
+            this.content = this.newContent
             this.$message({
               message: "更新成功",
               type: 'success',
@@ -177,6 +223,38 @@
             });
           })
       },
+      // 全屏
+      fullScreen() {
+        this.fullscreen = !this.fullscreen
+
+        const dragDom = document.querySelector('.simtext-dialog .el-dialog');
+        if(this.fullscreen){
+          this.dialogWidth = 1
+          dragDom.style.transform="translate("+0+"px,"+0+"px)";
+        }else{
+          this.dialogWidth = 0.7
+          let dialogWidth = document.body.clientWidth * this.dialogWidth;
+          let x = (document.body.clientWidth - dialogWidth)/2
+          let y = (document.body.clientHeight - document.body.clientHeight * this.dialogWidth)/2
+          dragDom.style.transform="translate("+x+"px,"+y+"px)";
+        }
+        this.containerResize()
+      },
+      // 换肤
+      skinning() {
+        this.lightTheme = !this.lightTheme
+        this.setTheme()
+      },
+      setTheme(){
+        let header = document.querySelector('.simtext-dialog .el-dialog__header')
+        if(this.lightTheme){
+          header.style.background = '#FFF'
+          header.style.color = '#181818'
+        }else{
+          header.style.background = '#292929'
+          header.style.color = '#fff'
+        }
+      },
       changePreviewMode() {
         this.previewMode = !this.previewMode
       },
@@ -201,9 +279,12 @@
 </script>
 <style lang="scss" scoped>
   @import "src/styles/markdown";
+
+
   /deep/.el-dialog {
-    width: 900px;
+    /*width: 1035px;*/
     margin: 0 !important;
+    overflow: hidden;
     /*.content {*/
       /*height: 600px;*/
       /*overflow: scroll;*/
@@ -211,6 +292,7 @@
 
     /deep/.content {
       border-top: unset!important;
+      background-color: #1e1e1e;
       .editor_main_storey {
         display: inline-block;
         position: absolute;
@@ -223,11 +305,42 @@
 
     .el-dialog__header {
       padding: 5px 20px 5px;
-      background-color: #292929;
-      color: #fff;
+      /*background-color: #292929;*/
+      /*color: #fff;*/
+
+      /*.svg-icon {*/
+        /*font-size: 20px;*/
+        /*margin-top: 10px;*/
+        /*margin-left: 20px;*/
+        /*margin-right: 5px;*/
+      /*}*/
+
+      .dark-button {
+        background: #565656;
+        border: 1px solid #565656;
+        color: #ffffff;
+      }
+      .el-button:focus{
+        background: #FFF;
+        border: 1px solid #DCDFE6;
+        color: #606266;
+      }
+      .dark-button:focus{
+        background: #565656;
+        border: 1px solid #565656;
+        color: #ffffff;
+      }
+      .dark-button:hover {
+        color: #409EFF;
+        background-color: #1e1e1e;
+      }
+
       .el-dialog__headerbtn {
-        top: 16px;
+        top: 12px;
         right: 16px;
+        .el-dialog__close {
+          font-size: 26px;
+        }
       }
       .title-name {
         line-height: 40px;
@@ -241,6 +354,23 @@
         -webkit-box-pack: end;
         -ms-flex-pack: end;
         justify-content: flex-end;
+
+        .title-extension-button {
+          padding: 5px;
+          margin-left: 15px;
+          background: 0 0;
+          border: none;
+          outline: 0;
+          cursor: pointer;
+          color: #909399;
+          .svg-icon {
+            font-size: 18px;
+          }
+          .svg-icon:hover {
+            color: #409EFF;
+          }
+        }
+
       }
     }
     .el-dialog__body {
@@ -251,8 +381,6 @@
       border-top: 1px solid #ccc;
     }
   }
-  /deep/.CodeMirror {
-    height: 640px;
-  }
+
 
 </style>

src/icons/svg/fullscreen.svg

@@ -0,0 +1 @@
+<svg t="1590548054416" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5584" width="128" height="128"><path d="M364.172744 621.07281c-10.541402 0-20.468742 4.196092-27.888661 11.769527l-256.319825 254.324121 0.81875-131.869871a31.573035 31.573035 0 0 0-8.903903-22.669132 29.321473 29.321473 0 0 0-22.003898-9.159762H32.732636c-18.319524 0.511719-31.214832 12.383589-31.470691 28.860926l-0.716406 227.305382L0.084992 991.710559c-0.255859 9.210934 2.456249 16.886712 7.829294 22.259757a30.037879 30.037879 0 0 0 22.157413 8.903903l11.411324-0.153515a9.569137 9.569137 0 0 0 1.842187-0.204688L268.327858 1023.43711h0.25586a32.647644 32.647644 0 0 0 31.470691-31.828895v-16.221478l-0.102344-1.023437a34.080456 34.080456 0 0 0-34.694518-30.651941l-128.543701-0.307031 255.245215-254.426466a39.402329 39.402329 0 0 0 11.667183-28.042177 39.351157 39.351157 0 0 0-11.564839-27.991005 38.532407 38.532407 0 0 0-27.888661-11.820698z m296.285043-218.70851a39.197641 39.197641 0 0 0 28.093349-11.820699l256.012793-255.142871-0.81875 132.535105a31.624207 31.624207 0 0 0 8.955075 22.720304 29.372645 29.372645 0 0 0 21.901554 9.10859h16.323822c18.319524-0.511719 31.214832-12.383589 31.470691-28.860926l0.716406-227.151867L1023.522102 31.72655a29.321473 29.321473 0 0 0-7.829294-22.259757 30.037879 30.037879 0 0 0-22.157414-8.903903l-11.411323 0.204688a9.671481 9.671481 0 0 0-1.842187 0.153515L756.200329 0h-0.25586a32.647644 32.647644 0 0 0-31.419519 31.880066v17.193743a34.131628 34.131628 0 0 0 34.74569 30.703114l128.543701 0.307031-255.449903 254.375293a39.70936 39.70936 0 0 0 28.042177 67.905053zM136.81619 80.083954l128.594873-0.358203a34.438659 34.438659 0 0 0 34.694518-30.549598l0.051172-17.296087V31.624207A32.954675 32.954675 0 0 0 268.788405 0h-0.153515L43.274038 0.921093A7.829294 7.829294 0 0 0 41.534195 0.767578L30.174043 0.511719a29.423817 29.423817 0 0 0-22.310929 9.006246A29.321473 29.321473 0 0 0 0.084992 31.72655l0.409375 11.871871 0.511718 227.561241c0.255859 16.170306 13.50937 28.246864 31.470692 28.758583H49.721692c8.187497 0.255859 15.863275-2.967968 21.696867-8.903903a32.084753 32.084753 0 0 0 9.210934-22.822647L79.913087 136.270651l256.115136 254.477637a39.402329 39.402329 0 0 0 28.042177 11.667183 39.402329 39.402329 0 0 0 28.042177-11.667183 39.402329 39.402329 0 0 0 11.616011-28.042176 39.402329 39.402329 0 0 0-11.616011-28.093349L136.867362 80.083954z m885.733646 672.244665v-0.204687c-0.511719-16.374994-13.458198-28.144521-31.470691-28.656239h-16.323822a29.321473 29.321473 0 0 0-21.696866 8.903903 32.084753 32.084753 0 0 0-9.210934 22.822647l0.869921 132.688621-256.268652-255.040527a39.402329 39.402329 0 0 0-28.093349-11.667183 39.402329 39.402329 0 0 0-28.042177 11.667183 39.402329 39.402329 0 0 0-11.616011 28.042177c0 10.592574 4.093748 20.571086 11.616011 28.093348l255.296387 254.324122-128.594872 0.358203h-0.869922a34.438659 34.438659 0 0 0-33.773425 30.549598l-0.102343 17.296087v0.255859c0.511719 16.937884 14.583979 31.16366 31.419519 31.624207h0.153516l224.286242-0.921094c0.511719 0.102344 1.023437 0.204687 1.6375 0.204688l11.411323 0.153515a29.526161 29.526161 0 0 0 22.362101-8.955074 29.270301 29.270301 0 0 0 7.675778-22.106242l-0.153515-11.411324-0.511719-228.021788z" p-id="5585"></path></svg>

src/icons/svg/normalscreen.svg

@@ -0,0 +1 @@
+<svg t="1590548040744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1583" width="128" height="128"><path d="M419.304087 400.527506a43.149416 43.149416 0 0 1-16.601555 34.226995 42.637474 42.637474 0 0 1-28.376226 10.385113H56.48332a43.661358 43.661358 0 0 1-44.027032-43.149416c0-23.915015 19.746343-43.295685 44.027032-43.295685h220.35456L11.505538 72.299406a42.491205 42.491205 0 0 1 2.925385-60.921124 44.392704 44.392704 0 0 1 62.018143 2.925384L331.323159 289.436044V88.169615c0-23.841881 19.746343-43.149416 44.027031-43.149416 24.280688 0 44.027031 19.307535 44.027031 43.149416v312.357891z m185.323085 0.073135V88.389019c0-23.841881 19.746343-43.149416 44.027031-43.149416 24.353823 0 44.027031 19.307535 44.027031 43.149416v201.266428L947.482193 14.230531a44.392704 44.392704 0 0 1 62.018143-2.852249 42.41807 42.41807 0 0 1 2.925384 60.921124l-265.332341 286.468242h220.35456c24.353823 0 44.027031 19.38067 44.027031 43.149416 0 23.841881-19.746343 43.222551-44.027031 43.22255H649.604953a42.710608 42.710608 0 0 1-30.49713-12.213479 42.930012 42.930012 0 0 1-14.480651-32.325494zM419.304087 623.588046v312.357892c0 23.841881-19.746343 43.149416-44.027031 43.149416a43.661358 43.661358 0 0 1-44.027032-43.149416v-201.339564l-254.800958 275.278648a44.392704 44.392704 0 0 1-62.018143 2.852249 42.491205 42.491205 0 0 1-2.925385-60.921125l265.332342-286.395106H56.48332a43.661358 43.661358 0 0 1-44.027032-43.222551c0-23.841881 19.746343-43.222551 44.027032-43.222551h317.842986a42.637474 42.637474 0 0 1 30.497129 12.213479 42.710608 42.710608 0 0 1 14.480652 32.398629z m185.323085 0.14627a43.36882 43.36882 0 0 1 16.601555-34.373264 42.710608 42.710608 0 0 1 28.376226-10.385114h317.842986c24.280688 0 44.027031 19.38067 44.027031 43.149416 0 23.841881-19.746343 43.222551-44.027031 43.222551h-220.35456l265.332341 286.468241a42.41807 42.41807 0 0 1-2.925384 60.921125 44.392704 44.392704 0 0 1-62.018143-2.925384L692.6081 734.825778v201.193294c0 23.841881-19.746343 43.222551-44.027032 43.222551a43.661358 43.661358 0 0 1-44.027031-43.149416V623.661181z" p-id="1584"></path></svg>

src/utils/directives.js

@@ -134,7 +134,10 @@ Vue.directive('dialogDrag', {
     // 获取拖拽内容头部
     const dialogHeaderEl = el.querySelector('.el-dialog__header');
     const dragDom = el.querySelector('.el-dialog');
-    dragDom.style.transform="translate("+binding.value.x+"px,"+binding.value.y+"px)";
+    let dialogWidth = document.body.clientWidth * binding.value.dialogWidth;
+    let x = (document.body.clientWidth - dialogWidth)/2
+    let y = (document.body.clientHeight - document.body.clientHeight * binding.value.dialogWidth)/2
+    dragDom.style.transform="translate("+x+"px,"+y+"px)";
     dialogHeaderEl.style.cursor = 'move';
     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
     const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
@@ -147,11 +150,11 @@ Vue.directive('dialogDrag', {
       let styL, styT;
       // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
       if (sty.left.includes('%')) {
-        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)+binding.value.x;
-        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)+binding.value.y;
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)+x;
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)+y;
       } else {
-        styL = +sty.left.replace(/\px/g, '')+binding.value.x;
-        styT = +sty.top.replace(/\px/g, '')+binding.value.y;
+        styL = +sty.left.replace(/\px/g, '')+x;
+        styT = +sty.top.replace(/\px/g, '')+y;
       };
       // 鼠标拖拽事件
       document.onmousemove = function (e) {
@@ -172,8 +175,8 @@ Vue.directive('dialogDrag', {
         } else if (finallyT > dragDom.offsetParent.clientHeight - dragDom.clientHeight) (///底部
           finallyT = dragDom.offsetParent.clientHeight - dragDom.clientHeight
         )
-        binding.value.x=finallyL;
-        binding.value.y=finallyT;
+        x=finallyL;
+        y=finallyT;
         dragDom.style.transform="translate("+finallyL+"px,"+finallyT+"px)";
         //将此时的位置传出去
         //binding.value({x:e.pageX,y:e.pageY})