样式调整,编辑器样式统一

src/views/ppt_manage/mixins/layerMixins.js

@@ -31,6 +31,9 @@ export default {
         this.activeLayerEl = {}
       }
       if(this.isEditLayer){
+        //进入图层编辑模式,需要退出其他模式
+        this.isEditTitle = false
+        
         //如果当前活跃图层没有layers,加上
         if(!this.currentItem.layers){
           this.refleshLayerEl([])

src/views/ppt_manage/mixins/pptEditorMixins.js

@@ -59,6 +59,9 @@ export default{
         }
         this.isEditTitle = !this.isEditTitle
         if(this.isEditTitle){
+            //进入标题编辑模式,需要退出其他模式
+            this.isEditLayer = false
+            
             //初始化该页标题的数据
             if(!this.currentItem.titleContent){
                 this.currentItem.titleContent = this.currentItem.title||''

src/views/ppt_manage/newVersion/components/TextEditor.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 需求199上线后停用,可删除 -->
   <!-- <div style="width:100%;height:100%">{{content}}</div> -->
   <Editor v-model="content" 
           :init="setting" ref="editor"

src/views/ppt_manage/newVersion/components/editor/chooseCover/TextEl.vue

@@ -46,6 +46,7 @@
         BaseTextShape
     } from '@/views/ppt_manage/newVersion/utils/config';
     import elMixin from './elMixin';
+    import tinymce from "tinymce";
     import Editor from "@tinymce/tinymce-vue";
     import "tinymce/themes/silver";
     import "tinymce/plugins/lists"; //列表插件

src/views/ppt_manage/newVersion/components/formatPage/mixins.js

@@ -1,7 +1,7 @@
 import {checkClipboard,checkClipboardItems,getTextContentSize} from '../../utils/untils';
 import {defaultPosition} from "../../utils/config";
 import { copyFit } from '@/utils/svgToblob.js';
-import Ediotr from '../TextEditor.vue';
+/* import Ediotr from '../TextEditor.vue'; */
 import BaseShape from '../layer/Element/BaseShape.vue';
 import LineShape from "../layer/Element/LineShape.vue";
 import TextShape from "../layer/Element/TextShape.vue";
@@ -11,7 +11,7 @@ import ImageEl from "../formatEl/ImageEl.vue";
 import SheetEl from "../formatEl/SheetEl.vue";
 export default {
     components: {
-        Ediotr,BaseShape,LineShape,TextShape,ChartEl,TextEl,ImageEl,SheetEl
+        /* Ediotr, */BaseShape,LineShape,TextShape,ChartEl,TextEl,ImageEl,SheetEl
       },
     props: {
         pageIndex: {//当前是第几页
@@ -45,6 +45,10 @@ export default {
           type:Boolean,
           default:false
         },
+        isEditTitle:{//父组件是否是标题编辑模式
+            type:Boolean,
+            default:false
+          },
         activeLayerEl:{//当前页面在图层编辑模式时,选中的图层元素
           type:Object,
         },
@@ -100,8 +104,8 @@ export default {
         },
         //判断遮罩layers是否显示
         isLayerShow(){
-          //在图层编辑模式+是当前ppt+是编辑模式
-          return this.isEditLayer&&this.type==='edit'&&this.choosedId===this.pageItem.id
+          //在图层编辑模式/标题编辑模式+是当前ppt+是编辑模式
+          return (this.isEditLayer||this.isEditTitle)&&this.type==='edit'&&this.choosedId===this.pageItem.id
         },
         //判断该渲染哪个图层组件
         getLayerElName(item){

src/views/ppt_manage/newVersion/components/layer/Element/TextShape.vue

@@ -50,6 +50,7 @@
 <script>
 import {BaseTextShape} from '../../../utils/config';
 import shapeMixin from './shapeMixin';
+import tinymce from "tinymce";
 import Editor from "@tinymce/tinymce-vue";
 import "tinymce/themes/silver";
 import "tinymce/plugins/lists"; //列表插件

src/views/ppt_manage/newVersion/css/common.scss

@@ -5,7 +5,18 @@ $titleColor:#333333;
     * {
         box-sizing: border-box;
     }
-
+    .el-tabs__nav-wrap::after {
+        height: 0;
+    }
+    .el-tabs__item { font-size: 16px; }
+    .mce-content-body{
+        &:focus-visible{
+            outline: 0;
+        }
+    }
+    .mce-edit-focus{
+        outline: 0;
+      }
     //wrap
     .ppt-page-wrap {
         background-color: #fff;
@@ -75,6 +86,24 @@ $titleColor:#333333;
             word-break: break-all;
         }
     }
+    .ppt-tool{
+        .layer-edit-box,.title-edit-box{
+          .tool-list{
+            border:none;
+            .el-collapse-item:first-child{
+                .el-collapse-item__content{
+                    padding-bottom: 5px;
+                }
+            }
+            .el-collapse-item__header{
+              margin-bottom: 0;
+            }
+            .el-collapse-item__wrap{
+              overflow: visible;
+            }
+          }
+        }
+      }
 
     .hint-text {
         text-align: center;

src/views/ppt_manage/newVersion/pptEditor.vue

@@ -86,6 +86,7 @@
                                     :isCopy="true"
                                     :isAdd="true"
                                     :isEditLayer="isEditLayer"
+                                    :isEditTitle="isEditTitle"
                                     :choosedId="currentItem.id"
                                     :activeLayerEl="activeLayerEl"
                                     :amendatoryPositionInfo="item.positionInfo"
@@ -1352,23 +1353,6 @@ export default {
 <style lang="scss">
 @import './css/common.scss';
 @import './css/format.scss';
-.page-wrap{
-  .ppt-editor-wrap{
-    .ppt-tool{
-      .layer-edit-box{
-        .tool-list{
-          .el-collapse-item__header{
-            margin-bottom: 0;
-          }
-          .el-collapse-item__wrap{
-            overflow: visible;
-          }
-        }
-      }
-    }
-  }
-}
-
 </style>
 <style scoped lang="scss">
 $titleColor:#333333;
@@ -1522,17 +1506,19 @@ $titleColor:#333333;
            min-width:320px;
            width: 320px;
            height:100%;
-           .tool-btn{
-               margin-bottom: 12px;
+           overflow-y: hidden;
+           .richtext-tool{
+            margin:10px 0;
            }
             .addppt-right-box{
               flex: 1;
-              height: calc(100% - 182px);
+             /* height: calc(100% - 182px); */
               padding: 0 10px;
-              margin-top: 12px;
               box-sizing: border-box;
-              border:1px solid #B2B9C3;
+              border: 2px solid #EBEBEB;
+              border-radius: 4px;
               min-width: 320px;
+              overflow-y: auto;
               #tabs {
                 padding: 0px 40px;
                 box-sizing: border-box;
@@ -1608,16 +1594,15 @@ $titleColor:#333333;
               }
 
 		        }
-            .layer-edit-box{
+            .layer-edit-box,.title-edit-box{
               flex: 1;
-              height: calc(100% - 182px);
+              /* height: calc(100% - 182px); */
               padding: 0 20px;
-              margin-top: 12px;
               box-sizing: border-box;
               border: 2px solid #EBEBEB;
               border-radius: 4px;
               min-width: 320px;
-              overflow-y: scroll;
+              overflow-y: auto;
               .tool-list{
                 .el-wrap{
                   display: flex;
@@ -1647,20 +1632,3 @@ $titleColor:#333333;
     }
 }
 </style>
-<style lang="scss">
-.page-wrap {
-	.el-tabs__nav-wrap::after {
-		height: 0;
-	}
-	.el-tabs__item { font-size: 16px; }
-	.layer-edit-box{
-		.tool-list{
-			.el-collapse-item:first-child{
-				.el-collapse-item__content{
-					padding-bottom: 5px;
-				}
-			}
-		}
-	}
-}	
-</style>

src/views/ppt_manage/newVersion/pptEnEditor.vue

@@ -64,6 +64,7 @@
                                 :pageItem="item"
                                 :key="item.key"
                                 :isEditLayer="isEditLayer"
+                                :isEditTitle="isEditTitle"
                                 :choosedId="currentItem.id"
                                 :activeLayerEl="activeLayerEl"
                                 :isCopy="true"
@@ -1309,23 +1310,6 @@ export default {
 <style lang="scss">
 @import './css/common.scss';
 @import './css/format.scss';
-.page-wrap{
-  .ppt-editor-wrap{
-    .ppt-tool{
-      .layer-edit-box{
-        .tool-list{
-          .el-collapse-item__header{
-            margin-bottom: 0;
-          }
-          .el-collapse-item__wrap{
-            overflow: visible;
-          }
-        }
-      }
-    }
-  }
-}
-
 </style>
 <style scoped lang="scss">
 $titleColor:#333333;
@@ -1617,20 +1601,3 @@ $titleColor:#333333;
     }
 }
 </style>
-<style lang="scss">
-.page-wrap {
-	.el-tabs__nav-wrap::after {
-		height: 0;
-	}
-	.el-tabs__item { font-size: 16px; }
-	.layer-edit-box{
-		.tool-list{
-			.el-collapse-item:first-child{
-				.el-collapse-item__content{
-					padding-bottom: 5px;
-				}
-			}
-		}
-	}
-}	
-</style>

src/views/ppt_manage/newVersion/pptPublish.vue

@@ -443,8 +443,6 @@ export default {
           }
         }
       }
-      pptx.writeFile({ fileName: "test.pptx" });
-      return
       //添加封底 如果有
       if(this.pptBackImage.length){
         let back = pptx.addSlide()