PPT内标题编辑优化

src/views/ppt_manage/mixins/pptEditorMixins.js

@@ -9,6 +9,21 @@ import * as sheetInterface from '@/api/modules/sheetApi.js';
 import {createRandomCode,checkPPTpageElemant,getChartInfo} from '../newVersion/utils/untils';
 import {modelInfo,defaultPosition} from '../newVersion/utils/config';
 import {titleDefault} from '../newVersion/utils/tinymceSetting';
+function getAllParentNodes(event) {
+    let parentNodes = [];
+    let currentNode = event;
+
+    while (currentNode) {
+        parentNodes.push(currentNode);
+        currentNode = currentNode.parentNode;
+    }
+
+    return parentNodes;
+}
+function NodeCheck(dom,className){
+    const classList = getAllParentNodes(dom).map(d=>d.className)
+    return classList.includes(className)
+}
 export default{
   data(){
     return {
@@ -28,7 +43,7 @@ export default{
       refreshBtnLoading:false,//一键刷新的按钮loading
 
       isEditTitle:false,//是否是标题编辑模式
-      titleSetting:null
+      titleSetting:null,//存储应用整个PPT的值
 
     }
   },
@@ -51,8 +66,33 @@ export default{
         document.removeEventListener('click',el.__click__outside)
       }
     },
+    'click-title-outside':{
+        bind(el,binding){
+            const clickHandle = (e)=>{
+                //点击标题区域和标题设置之外的地方，退出标题编辑模式
+                if(el.contains(e.target)||NodeCheck(e.target,'title-edit-box')||NodeCheck(e.target,'title-editor')){
+                  return false
+                }
+                if(binding.value && typeof binding.value === 'function'){
+                  binding.value(e)
+                }
+              }
+              el.__click__title__outside = clickHandle
+              document.addEventListener('click',clickHandle)
+        },
+        unbind(el,binding,vnode){
+            document.removeEventListener('click',el.__click__title__outside)
+        }
+    }
   },
   methods:{
+    testInput(e,item){
+        const text = e.target.innerHTML
+        item.title = text
+    },
+    exitEditTitle(e){
+        this.isEditTitle = false
+    },
     //切换标题编辑模式
     handleEditTitle(item){
         //判断当前ppt是否添加了页面
@@ -101,6 +141,7 @@ export default{
             fontFamily,fontSize,color
         }
         this.$set(this.pageList,this.currentIndex,this.currentItem) 
+
     },
     //全局改变标题位置
     changePositionAll({left,top}){

src/views/ppt_manage/mixins/pptMixins.js

@@ -88,7 +88,7 @@ export default {
         //兼容之前的ppt
         if(!titleDetail){
             slide.addText(title, {
-                placeholder:"slideTitle",
+                /* placeholder:"slideTitle", */
                 x:'10%',
                 y:'5.5%',
                 w:'68%',
@@ -96,16 +96,19 @@ export default {
                 color:'333333'
               });
         }else{
-            const {left,top,width,height} = titleDetail
+            const {left,top,width,height,color='#333',fontSize=24,fontFamily} = titleDetail
             const text = toTextProps(toJson(title))
+            const colorObj = color.includes('#')?{color:'333333',transparency:0}:rgbaToHex(color)
             slide.addText(text,{
-                /* placeholder:"slideTitle", */ //加上后会走母版slideTitle的设置
+                /* placeholder:"slideTitle", //加上后会走母版slideTitle的设置 */
                 x:left+'%',
                 y:top+'%',
                 w:width+'%',
                 h:height+'%',
-                color:'333333',
-                fontSize:12
+                color:colorObj.color,
+                transparency:colorObj.transparency,
+                fontSize:fontSize*0.7,
+                fontFace:fontFamily,
             })
         }
         return slide
@@ -512,6 +515,7 @@ export default {
       const sheetElements = page.elements.filter((item)=>{
         return item.type === 'sheet'
       })
+      this.initPageTitle(page)
       if(type==='edit'){
         this.initTexts(textElements,page)
       }
@@ -521,6 +525,14 @@ export default {
       await this.listHandle(chartElements);
       this.initCharts(chartElements, page);
     },
+    //初始化内页标题
+    initPageTitle(page){
+        const index = this.pageList.findIndex((i) => i.id === page.id)
+        const dom = document.getElementById(`page_title__${index}`)
+        if(dom){
+            dom.innerHTML = page.title
+        }
+    },
     //图表,表格数据统一加载,不按照页
     async initPPTAllPage(pageList){
         let chartElements = []
@@ -620,7 +632,6 @@ export default {
       return 1
     },
     initCharts(elements, page) {
-        console.log('initCharts')
       const index = this.pageList.findIndex((i) => i.id === page.id)
       if(index===-1) return
       elements.forEach((item) => {

src/views/ppt_manage/newVersion/components/catalog/pptContent.vue

@@ -23,14 +23,19 @@
               <!-- 自定义标题 -->
               <div class="custom-title-wrap editor-content" 
                     :style="item.titleDetail?{
-                        left:item.titleDetail.baseLeft*contentScale+'px',
-                        top:item.titleDetail.baseTop*contentScale+'px',
-                        width:item.titleDetail.baseWidth+'px',
-                        height:item.titleDetail.baseHeight+'px',
+                        left:(item.titleDetail.baseLeft||90)*contentScale+'px',
+                        top:(item.titleDetail.baseTop||43.39)*contentScale+'px',
+                        width:(item.titleDetail.baseWidth||612)+'px',
+                        height:(item.titleDetail.baseHeight||30.9)+'px',
                     }:{
                         left:90*contentScale+'px',top:43.39*contentScale+'px',width:'612px',height:'30.9px'
                     }">
-                    <div class="title" v-html="item.title"></div>
+                    <div class="title" v-html="item.title"
+                    :style="item.titleDetail?{
+                        color:item.titleDetail.color,
+                        fontSize:item.titleDetail.fontSize+'px',
+                        fontFamily:item.titleDetail.fontFamily
+                    }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                 </div>
               <component  :is="getComponentName(item.modelId)"
                           :ref="`pptPage_${index-1}`"

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

@@ -105,7 +105,7 @@ export default {
         //判断遮罩layers是否显示
         isLayerShow(){
           //在图层编辑模式/标题编辑模式+是当前ppt+是编辑模式
-          return (this.isEditLayer||this.isEditTitle)&&this.type==='edit'&&this.choosedId===this.pageItem.id
+          return (this.isEditLayer/* ||this.isEditTitle */)&&this.type==='edit'&&this.choosedId===this.pageItem.id
         },
         //判断该渲染哪个图层组件
         getLayerElName(item){

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

@@ -122,8 +122,16 @@ $titleColor:#333333;
             border: none;
             width:100%;
             height:auto;
-            overflow-y: hidden;
+            /* overflow-y: hidden; */
             resize: none;
+            &.el-textarea__inner{
+                padding:0;
+                line-height: 1;
+                /* height:auto !important; */
+                color:var(--titleColor);
+                font-size:var(--fontSize);
+                font-family: var(--fontFamily);
+            }
         }
         .normal-title{
             font-size: 16px;

src/views/ppt_manage/newVersion/pptEditor.vue

@@ -75,14 +75,34 @@
                                 left:'10%',top:'7%',width:'68%',height:'5%',
                             }">
                             <!-- <div class="title" v-html="item.title"></div> -->
-                            <textarea type="text" placeholder="单击输入标题" v-model="item.title" 
+                            <!-- <el-input type="textarea" placeholder="单击输入标题" v-model="item.title" 
+                                autosize resize="none"
                                 spellcheck="false"
                                 :style="item.titleDetail?{
                                     color:item.titleDetail.color,
                                     fontSize:item.titleDetail.fontSize+'px',
-                                    fontFamily:item.titleDetail.fontFamily
+                                    fontFamily:item.titleDetail.fontFamily,
+                                    '--titleColor':item.titleDetail.color,
+                                    '--fontSize':item.titleDetail.fontSize,
+                                    '--fontFamily':item.titleDetail.fontFamily,
                                 }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"
-                                @focus="handleEditTitle(item)"></textarea> 
+                                @focus="handleEditTitle(item)"
+                                v-click-title-outside="exitEditTitle"></el-input>  -->
+                                <div contenteditable="true" spellcheck="false" 
+                                :id="`page_title__${index}`"
+                                class="title-editor"
+                                :style="item.titleDetail?{
+                                    color:item.titleDetail.color,
+                                    fontSize:item.titleDetail.fontSize+'px',
+                                    fontFamily:item.titleDetail.fontFamily,
+                                    '--titleColor':item.titleDetail.color,
+                                    '--fontSize':item.titleDetail.fontSize,
+                                    '--fontFamily':item.titleDetail.fontFamily,
+                                    outline:0,
+                                }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica',outline:0}"
+                                    v-click-title-outside="exitEditTitle"
+                                    @focus="handleEditTitle(item)"
+                                    @input="(e)=>testInput(e,item)"></div>
                         </div>
                         <!-- 内容 -->
                         <component  :is="getComponentName(item.modelId)"
@@ -256,7 +276,6 @@
             <div class="title-edit-box" v-if="isEditTitle">
                 <p>
                     {{$t('Slides.page_title_style_setting')}}
-                    <el-button type="text" @click="isEditTitle=false">确认</el-button>
                 </p>
                 <TitleEditorTool 
                     ref="titleEditor"
@@ -480,8 +499,6 @@ export default {
       //遍历pageList,初始化图表,文字
       await this.initPPTAllPage(this.pageList)
       for(let i=0;i<this.pageList.length;i++){
-        //标题自定义遗留的问题，将富文本标题重置为纯文本
-        this.pageList[i].title = getPlainText(this.pageList[i].title)
         //计算图表总数
         const chartElements = this.pageList[i].elements.filter((item) => {
           return item.type === "chart";

src/views/ppt_manage/newVersion/pptPresent.vue

@@ -61,14 +61,19 @@
                 <!-- 自定义标题 -->
                 <div class="custom-title-wrap editor-content" 
                     :style="currentItem.titleDetail?{
-                        left:currentItem.titleDetail.baseLeft*contentScale+'px',
-                        top:currentItem.titleDetail.baseTop*contentScale+'px',
-                        width:currentItem.titleDetail.baseWidth+'px',
-                        height:currentItem.titleDetail.baseHeight+'px',
+                        left:(currentItem.titleDetail.baseLeft||90)*contentScale+'px',
+                        top:(currentItem.titleDetail.baseTop||43.39)*contentScale+'px',
+                        width:(currentItem.titleDetail.baseWidth||612)+'px',
+                        height:(currentItem.titleDetail.baseHeight||30.9)+'px',
                     }:{
-                        left:90*contentScale+'px',top:34.65*contentScale+'px',width:'612px',height:'44.1px'
+                        left:90*contentScale+'px',top:43.39*contentScale+'px',width:'612px',height:'30.9px'
                     }">
-                    <div class="title" v-html="currentItem.title"></div>
+                        <div class="title" v-html="currentItem.title"
+                        :style="currentItem.titleDetail?{
+                            color:currentItem.titleDetail.color,
+                            fontSize:currentItem.titleDetail.fontSize+'px',
+                            fontFamily:currentItem.titleDetail.fontFamily
+                        }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                 </div>
                 <component
                   :ref="`pptPage_${currentIndex-1}`" 
@@ -132,12 +137,12 @@
                 <!-- 自定义标题 -->
                 <div class="custom-title-wrap editor-content" 
                     :style="currentItem.titleDetail?{
-                        left:currentItem.titleDetail.baseLeft*contentScale+'px',
-                        top:currentItem.titleDetail.baseTop*contentScale+'px',
-                        width:currentItem.titleDetail.baseWidth+'px',
-                        height:currentItem.titleDetail.baseHeight+'px',
+                        left:(currentItem.titleDetail.baseLeft||90)*contentScale+'px',
+                        top:(currentItem.titleDetail.baseTop||43.39)*contentScale+'px',
+                        width:(currentItem.titleDetail.baseWidth||612)+'px',
+                        height:(currentItem.titleDetail.baseHeight||30.9)+'px',
                     }:{
-                        left:90*contentScale+'px',top:34.65*contentScale+'px',width:'612px',height:'44.1px'
+                        left:90*contentScale+'px',top:43.39*contentScale+'px',width:'612px',height:'30.9px'
                     }">
                     <div class="title" v-html="currentItem.title"></div>
                 </div>

src/views/ppt_manage/newVersion/pptPublish.vue

@@ -47,14 +47,19 @@
             <!-- 自定义标题 -->
             <div class="custom-title-wrap content" 
                 :style="item.titleDetail?{
-                    left:item.titleDetail.baseLeft*contentScale+'px',
-                    top:item.titleDetail.baseTop*contentScale+'px',
-                    width:item.titleDetail.baseWidth+'px',
-                    height:item.titleDetail.baseHeight+'px',
+                    left:(item.titleDetail.baseLeft||90)*contentScale+'px',
+                    top:(item.titleDetail.baseTop||43.39)*contentScale+'px',
+                    width:(item.titleDetail.baseWidth||612)+'px',
+                    height:(item.titleDetail.baseHeight||30.9)+'px',
                 }:{
-                    left:90*contentScale+'px',top:34.65*contentScale+'px',width:'612px',height:'44.1px'
+                    left:90*contentScale+'px',top:43.39*contentScale+'px',width:'612px',height:'30.9px'
                 }">
-                <div class="title" v-html="item.title"></div>
+                <div class="title" v-html="item.title"
+                :style="item.titleDetail?{
+                    color:item.titleDetail.color,
+                    fontSize:item.titleDetail.fontSize+'px',
+                    fontFamily:item.titleDetail.fontFamily
+                }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
             </div>
             <component
               :is="getComponentName(item.modelId)"

src/views/ppt_manage/newVersion/utils/config.js

@@ -519,7 +519,7 @@ export const pptSlideMaster = {
 	title: "幻灯片母版",
 	objects: [
 		{
-			placeholder: {
+			/* placeholder: {
 				options: {
 					name: "slideTitle",
 					type: "title",
@@ -532,7 +532,7 @@ export const pptSlideMaster = {
                     valign:'middle',
 					fontSize:24*0.75,
 				},
-			},
+			}, */
 		},
 		{
 			image: {
@@ -551,7 +551,7 @@ export const pptSlideMasterEn = {
   title: "幻灯片母版",
 	objects: [
 		{
-			placeholder: {
+			/* placeholder: {
 				options: {
 					name: "slideTitle",
 					type: "title",
@@ -564,7 +564,7 @@ export const pptSlideMasterEn = {
                     valign:'middle',
 					fontSize:24*0.75,
 				},
-			},
+			}, */
 		},
 		{
 			image: {

src/views/ppt_manage/newVersion/utils/tinymceSetting.js

@@ -141,5 +141,6 @@ export const fontFamily = [
     }
 ]
 export const titleDefault = {
-    top:7,left:10,width:68,height:5,color:'#333',fontFamily:'helvetica',fontSize:22
+    top:7,left:10,width:68,height:5,
+    color:'#333',fontFamily:'helvetica',fontSize:22,
 }