ppt内标题编辑：去掉富文本，增加字体字号颜色设置

src/views/ppt_manage/mixins/pptEditorMixins.js

@@ -8,6 +8,7 @@ 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';
 export default{
   data(){
     return {
@@ -26,7 +27,9 @@ export default{
       refreshLoading:null,//一键刷新的loading
       refreshBtnLoading:false,//一键刷新的按钮loading
 
-      isEditTitle:false,
+      isEditTitle:false,//是否是标题编辑模式
+      titleSetting:null
+
     }
   },
   directives: {
@@ -54,14 +57,15 @@ export default{
     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 +73,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 +89,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,7 +97,8 @@ 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) 
     },
@@ -141,6 +146,24 @@ 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=>{
+            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.$message.success(this.$t('MsgPrompt.set_success_msg'))
     },
     //显示切换模板弹窗

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

@@ -28,7 +28,7 @@
                         width:item.titleDetail.baseWidth+'px',
                         height:item.titleDetail.baseHeight+'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>

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

@@ -1,44 +1,76 @@
 <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>字体设置</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>字号设置</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>字体颜色</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 +83,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 +97,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 +109,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 +129,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 +140,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,fontSize,color} = 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 +152,9 @@ export default {
             this.changePosition()
             const {width,height} = this.detail
             this.$emit('changeSizeAll',{width,height})
+        },
+        applyToAll(){
+            this.$emit('applyToAll',this.detail)
         }
     },
 };
@@ -119,10 +162,54 @@ 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:20px;
+            .setting-item{
+                display:flex;
+                justify-content:space-between;
+                align-items:center;
+                margin-bottom:10px;
+                .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/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;
@@ -115,6 +115,16 @@ $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;
+        }
         .normal-title{
             font-size: 16px;
             word-break: break-all;

src/views/ppt_manage/newVersion/pptEditor.vue

@@ -60,7 +60,7 @@
                             <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,17 @@
                                 width:item.titleDetail.width+'%',
                                 height:item.titleDetail.height+'%',
                             }:{
-                                left:'10%',top:'5.5%',width:'68%',height:'7%'
+                                left:'10%',top:'7%',width:'68%',height:'5%',
                             }">
-                            <div class="title" v-html="item.title"></div>
+                            <!-- <div class="title" v-html="item.title"></div> -->
+                            <textarea type="text" placeholder="单击输入标题" v-model="item.title" 
+                                spellcheck="false"
+                                :style="item.titleDetail?{
+                                    color:item.titleDetail.color,
+                                    fontSize:item.titleDetail.fontSize+'px',
+                                    fontFamily:item.titleDetail.fontFamily
+                                }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"
+                                @focus="handleEditTitle(item)"></textarea> 
                         </div>
                         <!-- 内容 -->
                         <component  :is="getComponentName(item.modelId)"
@@ -246,14 +254,18 @@
             </div>
             <!-- 标题编辑 -->
             <div class="title-edit-box" v-if="isEditTitle">
-                <p>{{$t('Slides.page_title_style_setting')}}</p>
+                <p>
+                    {{$t('Slides.page_title_style_setting')}}
+                    <el-button type="text" @click="isEditTitle=false">确认</el-button>
+                </p>
                 <TitleEditorTool 
                     ref="titleEditor"
                     :currentItem="currentItem"
                     @changeSizeAll="changeSizeAll"
                     @changePositionAll="changePositionAll"
                     @styleChange="handleTitelStyleChange"
-                    @textChange="handleTextChange"/>
+                    @textChange="handleTextChange"
+                    @applyToAll="changeSettingAll"/>
             </div>
           </div>
     </div>
@@ -309,7 +321,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";
@@ -468,6 +480,8 @@ 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";
@@ -1632,10 +1646,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/utils/tinymceSetting.js

@@ -62,4 +62,84 @@ export const setting = {
             }
         })
     }
+}
+
+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:'Black',
+        value:'arial black,avant garde',
+    },
+    {
+        label:'Impact',
+        value:'impact,chicago',
+    },
+    {
+        label:'Georgia',
+        value:'georgia,palatino',
+    },
+    {
+        label:'Courier New',
+        value:'courier new',
+    },
+    {
+        label:'Comic Sans MS',
+        value:'comic sans ms,sans-serif',
+    },
+    {
+        label:'Book Antiqua',
+        value:'book antiqua,palatino'
+    },
+    {
+        label:'Andale Mono',
+        value:'andale mono,times'
+    }
+]
+export const titleDefault = {
+    top:7,left:10,width:68,height:5,color:'#333',fontFamily:'helvetica',fontSize:22
 }