Merge branch 'demand-199-copy'

src/lang/modules/Slides/pptPresent.js

@@ -100,7 +100,10 @@ export const presentEn = {
   title_size_width:'width',
   title_size_height:'height',
   title_content_settings:'Content Settings',
-  apply_to_the_entire:'Apply to the entire PPT'
+  apply_to_the_entire:'Apply to the entire PPT',
+  title_style_fontfamily:"Font Family",
+  title_style_fontsize:'Font Size',
+  title_style_color:'Font Color'
 };
 
 /* 中文 */
@@ -201,7 +204,10 @@ export const presentZh = {
   title_size_width:'宽度',
   title_size_height:'高度',
   title_content_settings:'内容设置',
-  apply_to_the_entire:'应用至整个PPT'
+  apply_to_the_entire:'应用至整个PPT',
+  title_style_fontfamily:"字体设置",
+  title_style_fontsize:'字号设置',
+  title_style_color:'字体颜色'
 };
 
 /**

src/views/ppt_manage/mixins/pptEditorMixins.js

@@ -8,6 +8,22 @@ import {dataBaseInterface} from "@/api/api.js"
 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 {
@@ -26,7 +42,9 @@ export default{
       refreshLoading:null,//一键刷新的loading
       refreshBtnLoading:false,//一键刷新的按钮loading
 
-      isEditTitle:false,
+      isEditTitle:false,//是否是标题编辑模式
+      titleSetting:null,//存储应用整个PPT的值
+
     }
   },
   directives: {
@@ -48,20 +66,46 @@ 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是否添加了页面
         if(this.pageList.length===0){
-        this.$message.warning(this.$t('Slides.msg_page_at_least_one'))
-        return
+            this.$message.warning(this.$t('Slides.msg_page_at_least_one'))
+            return
         }
         //如果点击的页不是当前页，将点击页切换至当前页
         if(this.currentItem.id!==item.id){
             this.changeCurrentItem(item)
         }
-        this.isEditTitle = !this.isEditTitle
+        //this.isEditTitle = !this.isEditTitle
+        this.isEditTitle = true
         if(this.isEditTitle){
             //进入标题编辑模式,需要退出其他模式
             this.isEditLayer = false
@@ -69,7 +113,7 @@ export default{
             
             //初始化该页标题的数据
             if(!this.currentItem.titleDetail){
-                this.currentItem.titleDetail = {top:5.5,left:10,width:68,height:7}
+                this.currentItem.titleDetail = this.titleSetting?_.cloneDeep(this.titleSetting):_.cloneDeep(titleDefault)
                 this.$set(this.pageList,this.currentIndex,this.currentItem) 
             }
             
@@ -85,7 +129,7 @@ export default{
         this.$set(this.pageList,this.currentIndex,this.currentItem) 
     },
     //获取标题样式 需要存一份px单位
-    handleTitelStyleChange({top,left,width,height}){
+    handleTitelStyleChange({top,left,width,height,color,fontSize,fontFamily}){
         const baseWidth = 900
         const baseHeight = 630
         this.currentItem.titleDetail = {
@@ -93,9 +137,11 @@ export default{
             baseTop:baseHeight*top/100,//px单位，基准为编辑页的ppt大小
             baseLeft:baseWidth*left/100,
             baseWidth:baseWidth*width/100,
-            baseHeight:baseHeight*height/100
+            baseHeight:baseHeight*height/100,
+            fontFamily,fontSize,color
         }
         this.$set(this.pageList,this.currentIndex,this.currentItem) 
+
     },
     //全局改变标题位置
     changePositionAll({left,top}){
@@ -141,6 +187,25 @@ export default{
                 baseLeft:baseLeft||defaultWidth*left/100,
             }
         })
+        //this.$message.success(this.$t('MsgPrompt.set_success_msg'))
+    },
+    //全局改变标题设置，并存储本次设置
+    changeSettingAll(detail){
+        this.titleSetting = detail
+        const baseWidth = 900
+        const baseHeight = 630
+        this.pageList.forEach((page,index)=>{
+            const {top,left,width,height,color,fontFamily,fontSize} = detail
+            page.titleDetail = {
+                top,left,width,height,
+                baseTop:baseHeight*top/100,//px单位，基准为编辑页的ppt大小
+                baseLeft:baseWidth*left/100,
+                baseWidth:baseWidth*width/100,
+                baseHeight:baseHeight*height/100,
+                color,fontFamily,fontSize
+            }
+            this.$set(this.pageList,index,page)
+        })
         this.$message.success(this.$t('MsgPrompt.set_success_msg'))
     },
     //显示切换模板弹窗

src/views/ppt_manage/mixins/pptMixins.js

@@ -89,7 +89,7 @@ export default {
         //兼容之前的ppt
         if(!titleDetail){
             slide.addText(title, {
-                placeholder:"slideTitle",
+                /* placeholder:"slideTitle", */
                 x:'10%',
                 y:'5.5%',
                 w:'68%',
@@ -97,16 +97,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
@@ -513,6 +516,7 @@ export default {
       const sheetElements = page.elements.filter((item)=>{
         return item.type === 'sheet'
       })
+      this.initPageTitle(page)
       if(type==='edit'){
         this.initTexts(textElements,page)
       }
@@ -522,6 +526,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 = []
@@ -621,7 +633,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||40.9)*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:40.9*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||'#333',
+                        fontSize:(item.titleDetail.fontSize||22)+'px',
+                        fontFamily:item.titleDetail.fontFamily||'helvetica'
+                    }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                 </div>
               <component  :is="getComponentName(item.modelId)"
                           :ref="`pptPage_${index-1}`"

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

@@ -22,14 +22,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||40.9)*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:40.9*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||'#333',
+                        fontSize:(item.titleDetail.fontSize||22)+'px',
+                        fontFamily:item.titleDetail.fontFamily||'helvetica'
+                    }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                 </div>
               <component  :is="getComponentName(item.modelId)"
                           :ref="`pptPage_${index-1}`"

src/views/ppt_manage/newVersion/components/editor/TitleEditorTool.vue

@@ -1,44 +1,79 @@
 <template>
     <div class="title-editor-tool-wrap">
-        <el-collapse v-model="activeNames" class="tool-list">
-            <!-- 位置设置 -->
-            <el-collapse-item :title="$t('Slides.title_location_settings')" name="position">
-                <div>
-                    <!-- 上下 -->
-                    <span class="demonstration">{{$t('Slides.title_location_up_down')}}（%）</span>
-                    <el-slider v-model="detail.top" :max="12"></el-slider>
+        <div class="scroll-box">
+            <el-collapse v-model="activeNames" class="tool-list">
+                <!-- 位置设置 -->
+                <el-collapse-item :title="$t('Slides.title_location_settings')" name="position">
+                    <div>
+                        <!-- 上下 -->
+                        <span class="demonstration">{{$t('Slides.title_location_up_down')}}（%）</span>
+                        <el-slider v-model="detail.top" :max="12" :step="0.1"></el-slider>
+                    </div>
+                    <div>
+                        <!-- 左右 -->
+                        <span class="demonstration">{{$t('Slides.title_location_left_right')}}（%）</span>
+                        <el-slider v-model="detail.left" :step="0.1"></el-slider>
+                    </div>
+                    <!-- <el-button type="text" @click="changePosition">应用至整个PPT</el-button> -->
+                </el-collapse-item>
+                <!-- 大小设置 -->
+                <el-collapse-item :title="$t('Slides.title_size_settings')" name="size">
+                    <div>
+                        <!-- 宽度 -->
+                        <span class="demonstration">{{$t('Slides.title_size_width')}}（%）</span>
+                        <el-slider v-model="detail.width" :max="100 - detail.left" :step="0.1"></el-slider>
+                    </div>
+                    <div>
+                        <!-- 高度 -->
+                        <span class="demonstration">{{$t('Slides.title_size_height')}}（%）</span>
+                        <el-slider v-model="detail.height" :max="14-detail.top" :step="0.1"></el-slider>
+                    </div>
+                </el-collapse-item>
+                <!-- <el-collapse-item :title="$t('Slides.title_content_settings')" name="content">
+                    <div class="editor-tool"></div>
+                    <div class="editor" id="editorDom">
+                        <Editor v-model="content" 
+                            :init="setting" 
+                            ref="editor"/>
+                    </div>
+                </el-collapse-item> -->
+            </el-collapse>
+            <div class="other-setting">
+                <div class="setting-item">
+                    <!-- 字体设置 -->
+                    <span>{{$t('Slides.title_style_fontfamily')}}</span>
+                    <el-select v-model="detail.fontFamily">
+                        <el-option v-for="item in fontFamily" :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
                 </div>
-                <div>
-                    <!-- 左右 -->
-                    <span class="demonstration">{{$t('Slides.title_location_left_right')}}（%）</span>
-                    <el-slider v-model="detail.left"></el-slider>
+                <div class="setting-item">
+                    <!-- 字号设置 -->
+                    <span>{{$t('Slides.title_style_fontsize')}}</span>
+                    <el-select v-model="detail.fontSize">
+                        <el-option v-for="item in fontSizeList" :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
                 </div>
-                <!-- <el-button type="text" @click="changePosition">应用至整个PPT</el-button> -->
-            </el-collapse-item>
-            <!-- 大小设置 -->
-            <el-collapse-item :title="$t('Slides.title_size_settings')" name="size">
-                <div>
-                    <!-- 宽度 -->
-                    <span class="demonstration">{{$t('Slides.title_size_width')}}（%）</span>
-                    <el-slider v-model="detail.width" :max="100 - detail.left"></el-slider>
+                <div class="setting-item">
+                    <!-- 字体颜色 -->
+                    <span>{{$t('Slides.title_style_color')}}</span>
+                    <el-color-picker
+                        v-model="detail.color"
+                        size="mini"
+                        show-alpha
+                        :predefine="['#333']"
+                    />
+                    </el-tooltip>
                 </div>
-                <div>
-                    <!-- 高度 -->
-                    <span class="demonstration">{{$t('Slides.title_size_height')}}（%）</span>
-                    <el-slider v-model="detail.height" :max="14-detail.top"></el-slider>
-                </div>
-                <!-- 应用至整个PPT -->
-                <el-button type="text" @click="changeSize">{{$t('Slides.apply_to_the_entire')}}</el-button>
-            </el-collapse-item>
-            <el-collapse-item :title="$t('Slides.title_content_settings')" name="content">
-                <div class="editor-tool"></div>
-                <div class="editor" id="editorDom">
-                    <Editor v-model="content" 
-                        :init="setting" 
-                        ref="editor"/>
-                </div>
-            </el-collapse-item>
-        </el-collapse>
+            </div>
+        </div>
+        <!-- 应用至整个PPT -->
+        <el-button type="primary" @click="applyToAll">{{$t('Slides.apply_to_the_entire')}}</el-button>
     </div>
 </template>
 
@@ -51,7 +86,7 @@ import "tinymce/plugins/quickbars"; //快速栏插件
 import "tinymce/plugins/fullscreen"; //全屏插件
 import "tinymce/plugins/paste"; //黏贴插件
 import "tinymce/icons/default/icons";
-import {setting} from '../../utils/tinymceSetting'
+import {setting,fontSizeList,fontFamily} from '../../utils/tinymceSetting'
 export default {
     components:{Editor},
     props:{
@@ -65,6 +100,7 @@ export default {
             content:'&*^%', //若设置为空,则init时没有标题就不会触发watch,随便设置几个字符即可
             detail:{
                 left:0,top:0,width:0,height:0,
+                color:'#333',fontSize:22,fontFamily:'helvetica'
             },
             initFlag:false,
             setting:{
@@ -76,9 +112,13 @@ export default {
                 toolbar_persist:true,//是否一直显示toolbar
                 placeholder:this.$t('Slides.click_input_text_content'),
             },
+            fontSizeList:fontSizeList,
+            fontFamily:fontFamily,
+
         };
     },
     watch:{
+        //不用富文本用不到
         content(con){
             if(this.initFlag){
                 this.initFlag = false
@@ -92,7 +132,10 @@ export default {
         detail:{
             handler(newval){
                 //若init还未执行完成,不派发事件
-                if(this.initFlag) return
+                if(this.initFlag){
+                    this.initFlag = false
+                    return 
+                }
                 this.$emit("styleChange",newval)
             },
             deep:true
@@ -100,9 +143,9 @@ export default {
     },
     methods: {
         initTitleEditor(){
-            const {left,top,width,height} = this.currentItem.titleDetail
-            this.detail = {left,top,width,height}
-            this.content = this.currentItem.title
+            const {left,top,width,height,fontFamily='helvetica',fontSize=22,color='#333'} = this.currentItem.titleDetail
+            this.detail = {left,top,width,height,fontFamily,fontSize,color}
+            //this.content = this.currentItem.title
         },
         changePosition(){
             const {left,top} = this.detail
@@ -112,6 +155,9 @@ export default {
             this.changePosition()
             const {width,height} = this.detail
             this.$emit('changeSizeAll',{width,height})
+        },
+        applyToAll(){
+            this.$emit('applyToAll',this.detail)
         }
     },
 };
@@ -119,10 +165,55 @@ export default {
 
 <style scoped lang="scss">
 .title-editor-tool-wrap{
+    flex:1;
+    display:flex;
+    flex-direction: column;
+    overflow-y:hidden;
     #editorDom{
         min-height: 200px;
         border:1px solid #ccc;
         border-top: none;
     }
+    .scroll-box{
+        flex:1;
+        overflow-y:auto;
+        overflow-x:hidden;
+        margin-bottom:20px;
+        padding-right:5px;
+        .el-collapse{
+            .el-slider{
+                padding:0 10px;
+            }
+        }
+        .other-setting{
+            margin-top:15px;
+            .setting-item{
+                display:flex;
+                justify-content:space-between;
+                /* align-items:center; */
+                margin-bottom:10px;
+                font-weight: bold;
+                .el-select{
+                    width:100px;
+                }
+            }
+        }
+    }
+}
+</style>
+<style lang="scss">
+.title-editor-tool-wrap{
+    .el-color-picker {
+      display: block;
+      &.el-color-picker--mini {
+        height: 30px;
+      }
+      .el-color-picker__trigger {
+        width: 60px;
+        height: 30px;
+        padding: 0;
+        border: 0;
+      }
+    }
 }
 </style>

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

@@ -74,7 +74,7 @@ $titleColor:#333333;
             align-items: center;
             transform-origin: 0 0;
             word-break: break-word;
-            input{
+            input,textarea{
                 font-size: 24px;
                 color:$titleColor;
                 background: transparent;
@@ -97,7 +97,7 @@ $titleColor:#333333;
         position: absolute;
         transform-origin: 0 0;
         &.editor-model{
-            background-color: #99999946;
+            //background-color: #99999946;
         }
         &.ppt-editor-title{
             border:1px dashed #999;
@@ -115,6 +115,24 @@ $titleColor:#333333;
                 list-style-type: decimal;
               }
         }
+        textarea{
+            font-size: 24px;
+            color:$titleColor;
+            background: transparent;
+            border: none;
+            width:100%;
+            height:auto;
+            /* 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;
             word-break: break-all;
@@ -131,6 +149,7 @@ $titleColor:#333333;
             }
             .el-collapse-item__header{
               margin-bottom: 0;
+              height: 40px;
             }
             .el-collapse-item__wrap{
               overflow: visible;

src/views/ppt_manage/newVersion/pptEditor.vue

@@ -54,13 +54,13 @@
                     <AddFormat @addPage="addPage($event,index)" :chooseModalId="chooseModalId"/>
                     <div class="ppt-item" :class="{'choose':currentItem.id===item.id}" 
                         v-loading="item.isUpdating" :element-loading-text="$t('Slides.updating_chart_loading')"
-                        @click="changeCurrentItem(item)">
+                        @click.stop="changeCurrentItem(item)">
                         <!-- 标题 -->
                         <!-- <div class="title-wrap" style="background-color: #999999;">
                             <input type="text" placeholder="单击输入标题" v-model="item.title"/> 
                         </div> -->
                         <!-- 自定义标题 -->
-                        <div @click.stop="handleEditTitle(item)"
+                        <div
                             :class="[
                                 'ppt-editor-title',
                                 'custom-title-wrap',
@@ -72,9 +72,35 @@
                                 width:item.titleDetail.width+'%',
                                 height:item.titleDetail.height+'%',
                             }:{
-                                left:'10%',top:'5.5%',width:'68%',height:'7%'
+                                left:'10%',top:'6.6%',width:'68%',height:'5%',
                             }">
-                            <div class="title" v-html="item.title"></div>
+                            <!-- <div class="title" v-html="item.title"></div> -->
+                            <!-- <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,
+                                    '--titleColor':item.titleDetail.color,
+                                    '--fontSize':item.titleDetail.fontSize,
+                                    '--fontFamily':item.titleDetail.fontFamily,
+                                }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"
+                                @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||'#333',
+                                    fontSize:(item.titleDetail.fontSize||22)+'px',
+                                    fontFamily:(item.titleDetail.fontFamily||'helvetica'),
+                                    outline:0,
+                                }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica',outline:0}"
+                                    v-click-title-outside="exitEditTitle"
+                                    @click.stop
+                                    @focus="handleEditTitle(item)"
+                                    @input="(e)=>testInput(e,item)"></div>
                         </div>
                         <!-- 内容 -->
                         <component  :is="getComponentName(item.modelId)"
@@ -246,14 +272,17 @@
             </div>
             <!-- 标题编辑 -->
             <div class="title-edit-box" v-if="isEditTitle">
-                <p>{{$t('Slides.page_title_style_setting')}}</p>
+                <p>
+                    {{$t('Slides.page_title_style_setting')}}
+                </p>
                 <TitleEditorTool 
                     ref="titleEditor"
                     :currentItem="currentItem"
                     @changeSizeAll="changeSizeAll"
                     @changePositionAll="changePositionAll"
                     @styleChange="handleTitelStyleChange"
-                    @textChange="handleTextChange"/>
+                    @textChange="handleTextChange"
+                    @applyToAll="changeSettingAll"/>
             </div>
           </div>
     </div>
@@ -309,7 +338,7 @@
 </template>
 
 <script>
-import {countComponentName,checkClipboardItems,createRandomCode,checkPPTpageElemant,getChartInfo} from './utils/untils';
+import {countComponentName,checkClipboardItems,createRandomCode,checkPPTpageElemant,getChartInfo,getPlainText} from './utils/untils';
 import {modelInfo,defaultPosition} from './utils/config'
 import http from '@/api/http.js';
 import { dataBaseInterface ,sandInterface } from "@/api/api.js";
@@ -1632,10 +1661,12 @@ $titleColor:#333333;
               }
             }
             .title-edit-box{
+                display:flex;
+                flex-direction: column;
+                padding:20px;
                 p{
                     font-size: 16px;
                     font-weight: bold;
-                    margin-top:16px;
                 }
             }
        }

src/views/ppt_manage/newVersion/pptEnEditor.vue

@@ -52,7 +52,7 @@
                 <AddFormat @addPage="addPage($event,index)" :chooseModalId="chooseModalId"/>
                 <div class="ppt-item" :class="{'choose':currentItem.id===item.id}" 
                   v-loading="item.isUpdating" :element-loading-text="$t('Slides.updating_chart_loading')"
-                  @click="changeCurrentItem(item)">
+                  @click.stop="changeCurrentItem(item)">
                     <!-- 标题 -->
                     <!-- <div class="title-wrap" style="left:8%;width:62%;">
                         <input type="text" :placeholder="$t('Slides.click_to_input_title')" v-model="item.title"/> 
@@ -70,10 +70,23 @@
                                 width:item.titleDetail.width+'%',
                                 height:item.titleDetail.height+'%',
                             }:{
-                                left:'10%',top:'5.5%',width:'68%',height:'7%'
+                                left:'10%',top:'6.6%',width:'68%',height:'5%'
                             }">
-                            <div class="title" v-html="item.title"></div>
+                            <!-- <div class="title" v-html="item.title"></div> -->
                             <!-- <div v-else class="normal-title">{{item.title}}</div> -->
+                            <div contenteditable="true" spellcheck="false" 
+                                :id="`page_title__${index}`"
+                                class="title-editor"
+                                :style="item.titleDetail?{
+                                    color:item.titleDetail.color||'#333',
+                                    fontSize:(item.titleDetail.fontSize||22)+'px',
+                                    fontFamily:(item.titleDetail.fontFamily||'helvetica'),
+                                    outline:0,
+                                }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica',outline:0}"
+                                    v-click-title-outside="exitEditTitle"
+                                    @click.stop
+                                    @focus="handleEditTitle(item)"
+                                    @input="(e)=>testInput(e,item)"></div>
                         </div>
                     <!-- 内容 -->
                     <component  :is="getComponentName(item.modelId)"
@@ -1634,10 +1647,12 @@ $titleColor:#333333;
               }
             }
             .title-edit-box{
+                display:flex;
+                flex-direction: column;
+                padding:20px;
                 p{
                     font-size: 16px;
                     font-weight: bold;
-                    margin-top:16px;
                 }
             }
        }

src/views/ppt_manage/newVersion/pptEnPresent.vue

@@ -61,15 +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||40.9)*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:40.9*contentScale+'px',width:'612px',height:'30.9px'
                     }">
-                    <div class="title" v-html="currentItem.title"></div>
-                    <!-- <div v-else class="normal-title">{{currentItem.title}}</div> -->
+                        <div class="title" v-html="currentItem.title"
+                        :style="currentItem.titleDetail?{
+                            color:currentItem.titleDetail.color||'#333',
+                            fontSize:(currentItem.titleDetail.fontSize||22)+'px',
+                            fontFamily:currentItem.titleDetail.fontFamily||'helvetica'
+                        }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                 </div>
                 <component
                   :ref="`pptPage_${currentIndex-1}`" 
@@ -133,15 +137,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 v-else class="normal-title">{{currentItem.title}}</div> -->
+                        <div class="title" v-html="currentItem.title"
+                        :style="currentItem.titleDetail?{
+                            color:currentItem.titleDetail.color||'#333',
+                            fontSize:(currentItem.titleDetail.fontSize||22)+'px',
+                            fontFamily:currentItem.titleDetail.fontFamily||'helvetica'
+                        }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                 </div>
                 <component
                   :ref="`pptPage_${currentIndex-1}`" 

src/views/ppt_manage/newVersion/pptEnPublish.vue

@@ -41,15 +41,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||40.9)*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:40.9*contentScale+'px',width:'612px',height:'30.9px'
                 }">
-                <div class="title" v-html="item.title"></div>
-                <!-- <div v-else class="normal-title">{{item.title}}</div> -->
+                <div class="title" v-html="item.title"
+                :style="item.titleDetail?{
+                    color:item.titleDetail.color||'#333',
+                    fontSize:(item.titleDetail.fontSize||22)+'px',
+                    fontFamily:item.titleDetail.fontFamily||'helvetica'
+                }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
             </div>
             <component
               :is="getComponentName(item.modelId)"

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||40.9)*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:40.9*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||'#333',
+                            fontSize:(currentItem.titleDetail.fontSize||22)+'px',
+                            fontFamily:currentItem.titleDetail.fontFamily||'helvetica'
+                        }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                 </div>
                 <component
                   :ref="`pptPage_${currentIndex-1}`" 
@@ -132,14 +137,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||40.9)*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:40.9*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||'#333',
+                            fontSize:(currentItem.titleDetail.fontSize||22)+'px',
+                            fontFamily:currentItem.titleDetail.fontFamily||'helvetica'
+                        }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                 </div>
                 <component
                   :ref="`pptPage_${currentIndex-1}`" 

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||40.9)*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:40.9*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||'#333',
+                    fontSize:(item.titleDetail.fontSize||22)+'px',
+                    fontFamily:item.titleDetail.fontFamily||'helvetica'
+                }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
             </div>
             <component
               :is="getComponentName(item.modelId)"

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

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

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

@@ -56,10 +56,91 @@ export const setting = {
         editor.on('input',function(){
             let content = editor.getContent()
             if(content){
-                editor.getBody().classList.add('.placeholder-hidden')
+                editor.getBody().classList.add('placeholder-hidden')
             }else{
-                editor.getBody().classList.remove('.placeholder-hidden')
+                editor.getBody().classList.remove('placeholder-hidden')
             }
         })
     }
+}
+
+export const fontSizeList = [
+    {
+        label:'14px',
+        value:14,
+    },{
+        label:'16px',
+        value:16,
+    },
+    {
+        label:'18px',
+        value:18,
+    },
+    {
+        label:'20px',
+        value:20,
+    },{
+        label:'22px',
+        value:22,
+    },{
+        label:'24px',
+        value:24,
+    },
+    {
+        label:'26px',
+        value:26,
+    },{
+        label:'28px',
+        value:28,
+    },
+    {
+        label:'36px',
+        value:36,
+    },
+    {
+        label:'48px',
+        value:48,
+    },
+]
+export const fontFamily = [
+    {
+        label:'Helvetica',
+        value:'helvetica',
+    },
+    {
+        label:'Arial',
+        value:'arial,helvetica,sans-serif',
+    },
+    {
+        label:'Georgia',
+        value:'Georgia,serif',
+    },
+    {
+        label:'Impact',
+        value:'impact,chicago',
+    },
+    {
+        label:'Tahoma',
+        value:'Tahoma,Geneva,sans-serif',
+    },
+    {
+        label:'Times New Roman',
+        value:"Times New Roman',Times,serif",
+    },
+    {
+        label:'Verdana',
+        value:'Verdana,Geneva,sans-serif',
+    },
+    {
+        label:'思源宋体',
+        value:'思源宋体'
+    },
+    {
+        label:'思源黑体',
+        value:'思源黑体'
+    }
+]
+export const titleDefault = {
+    top:6.6,left:10,width:68,height:5,
+    color:'#333',fontFamily:'helvetica',fontSize:22,
 }