Эх сурвалжийг харах

标题自定义字段改为title,调整富文本配置

cxmo 5 сар өмнө
parent
commit
be8f3eb9b9

+ 1 - 5
src/views/ppt_manage/mixins/pptEditorMixins.js

@@ -64,9 +64,6 @@ export default{
             this.activeLayerEl = {}
             
             //初始化该页标题的数据
-            if(!this.currentItem.titleContent){
-                this.currentItem.titleContent = this.currentItem.title||''
-            }
             if(!this.currentItem.titleDetail){
                 this.currentItem.titleDetail = {top:5.5,left:10,width:68,height:7}
                 this.$set(this.pageList,this.currentIndex,this.currentItem) 
@@ -80,8 +77,7 @@ export default{
     },
     //获取标题内容
     handleTextChange({val,richContent}){
-        this.currentItem.title = val
-        this.currentItem.titleContent = richContent
+        this.currentItem.title = richContent/* val */
         this.$set(this.pageList,this.currentIndex,this.currentItem) 
     },
     //获取标题样式 需要存一份px单位

+ 3 - 3
src/views/ppt_manage/mixins/pptMixins.js

@@ -84,9 +84,9 @@ export default {
   methods: {
     //配置自定义标题内容
     setPPTTitle(slide,page){
-        const {titleDetail,titleContent,title} = page
+        const {titleDetail,title} = page
         //兼容之前的ppt
-        if(!titleDetail||!titleContent){
+        if(!titleDetail){
             slide.addText(title, {
                 placeholder:"slideTitle",
                 x:'10%',
@@ -97,7 +97,7 @@ export default {
               });
         }else{
             const {left,top,width,height} = titleDetail
-            const text = toTextProps(toJson(titleContent))
+            const text = toTextProps(toJson(title))
             slide.addText(text,{
                 /* placeholder:"slideTitle", */ //加上后会走母版slideTitle的设置
                 x:left+'%',

+ 5 - 1
src/views/ppt_manage/newVersion/components/IndexItem.vue

@@ -5,7 +5,7 @@
         <div class="wrap">
             <div class="item-flex">
                 <div class="item-icon-left"></div>
-                <div class="item-name">{{pageItem.title}}</div> 
+                <div class="item-name">{{getPlainText(pageItem.title)}}</div> 
                 <div class="item-icon-right none">
                   <el-dropdown @command="handleOperateCommand" trigger="click" v-if="showCloseBtn" v-show="!ctrlKeyActive">
                     <span class="el-dropdown-link"> 
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import {getPlainText} from '@/views/ppt_manage/newVersion/utils/untils';
 export default {
   props:{
     pageItem:{//ppt页
@@ -118,6 +119,9 @@ export default {
       },
       handleOperateCommand(command){
         this.$emit('operatePpt',{type:command.key,pageItem:this.pageItem})
+      },
+      getPlainText(str){
+        return getPlainText(str)
       }
   },
 };

+ 1 - 2
src/views/ppt_manage/newVersion/components/catalog/pptContent.vue

@@ -30,8 +30,7 @@
                     }:{
                         left:'90px',top:'34.65px',width:'612px',height:'44.1px'
                     }">
-                    <div class="title" v-html="item.titleContent" v-if="item.titleContent"></div>
-                    <div v-else class="normal-title">{{item.title}}</div>
+                    <div class="title" v-html="item.title"></div>
                 </div>
               <component  :is="getComponentName(item.modelId)"
                           :ref="`pptPage_${index-1}`"

+ 1 - 2
src/views/ppt_manage/newVersion/components/catalog/pptContentEn.vue

@@ -29,8 +29,7 @@
                     }:{
                         left:'90px',top:'34.65px',width:'612px',height:'44.1px'
                     }">
-                    <div class="title" v-html="item.titleContent" v-if="item.titleContent"></div>
-                    <div v-else class="normal-title">{{item.title}}</div>
+                    <div class="title" v-html="item.title"></div>
                 </div>
               <component  :is="getComponentName(item.modelId)"
                           :ref="`pptPage_${index-1}`"

+ 2 - 2
src/views/ppt_manage/newVersion/components/editor/InsertPageDialog.vue

@@ -77,7 +77,7 @@
 <script>
 import {pptInterface } from "@/api/api.js";
 import {pptEnInterface} from '@/api/modules/pptEnApi.js';
-import {changeCatalogArr} from '@/views/ppt_manage/newVersion/utils/untils';
+import {changeCatalogArr,getPlainText} from '@/views/ppt_manage/newVersion/utils/untils';
 export default {
   props:{
     insertPageShow:{
@@ -185,7 +185,7 @@ export default {
       data.forEach((item,index)=>{
         let temp = {}
         temp.key = index
-        temp.label = `${this.$i18n.locale == 'zh' ?`第${index+1}页`:` Slide${index+1}`} ${item.title||this.$t('Slides.untitled_title')}`
+        temp.label = `${this.$i18n.locale == 'zh' ?`第${index+1}页`:` Slide${index+1}`} ${getPlainText(item.title||this.$t('Slides.untitled_title'))}`
         temp.disabled = false
         list.push(temp)
       })

+ 1 - 1
src/views/ppt_manage/newVersion/components/editor/TitleEditorTool.vue

@@ -95,7 +95,7 @@ export default {
         initTitleEditor(){
             const {left,top,width,height} = this.currentItem.titleDetail
             this.detail = {left,top,width,height}
-            this.content = this.currentItem.titleContent
+            this.content = this.currentItem.title
         },
         changePosition(){
             const {left,top} = this.detail

+ 2 - 20
src/views/ppt_manage/newVersion/components/editor/chooseCover/TextEl.vue

@@ -54,6 +54,7 @@
     import "tinymce/plugins/fullscreen"; //全屏插件
     import "tinymce/plugins/paste"; //黏贴插件
     import "tinymce/icons/default/icons";
+    import {setting} from '@/views/ppt_manage/newVersion/utils/tinymceSetting'
     export default {
         mixins: [elMixin],
         props: {
@@ -78,33 +79,14 @@
         data() {
             return {
                 setting: {
+                    ...setting,
                     language: "zh_CN",
                     language_url: require("../../../utils/zh_CN.js"),
-                    menubar: false,
-                    toolbar: [
-                        "indent outdent alignleft aligncenter alignright alignjustify forecolor",
-                        "bold italic underline strikethrough numlist bullist backcolor",
-                        "fontselect fontsizeselect",
-                    ],
-                    quickbars_selection_toolbar: false,
-                    quickbars_insert_toolbar: false,
-                    plugins: "lists quickbars paste",
                     height: 350,
                     inline: true,
                     selector: `#${this.elementInfo.id}-editorDom`,
                     paste_as_text: true,
-                    fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 36px 48px',
-                    font_formats: `微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';
-                        楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;
-                        Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;
-                        Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;
-                        Courier New=courier new,courier;Georgia=georgia,palatino;
-                        Helvetica=helvetica;Impact=impact,chicago;
-                        Webdings=webdings;Wingdings=wingdings`,
                     fixed_toolbar_container: ".cover-text-toolbar", //将toolbar放到指定div上
-                    skin_url: "/static/css",
-                    content_url: "/static/css",
-                    //加placeholder
                     placeholder:this.$t('Slides.click_input_text_content')
                 }
             };

+ 2 - 22
src/views/ppt_manage/newVersion/components/formatEl/TextEl.vue

@@ -43,6 +43,7 @@ import "tinymce/plugins/quickbars"; //快速栏插件
 import "tinymce/plugins/fullscreen"; //全屏插件
 import "tinymce/plugins/paste"; //黏贴插件
 import "tinymce/icons/default/icons";
+import {setting} from '@/views/ppt_manage/newVersion/utils/tinymceSetting'
 export default {
   components:{Editor},
   props:{
@@ -56,36 +57,15 @@ export default {
   data() {
     return {
       setting: {
+        ...setting,
         language: "zh_CN",
         language_url: require("../../utils/zh_CN.js"),
-        menubar: false,
-        toolbar: [
-          "indent outdent alignleft aligncenter alignright alignjustify forecolor",
-          "bold italic underline strikethrough numlist bullist backcolor",
-          "fontselect fontsizeselect",
-        ],
-        quickbars_selection_toolbar:false,  
-        quickbars_insert_toolbar: false,
-        plugins: "lists quickbars paste",
         height: 350,
-        inline: true,
         selector: `#text_${this.index}_${this.position}`,
         paste_as_text: true,
        /*  paste_block_drop: true, 开启后阻止drop事件*/
-        fontsize_formats:'12px 14px 16px 18px 20px 22px 24px 36px 48px',
-        font_formats:`微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';
-                      楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;
-                      Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;
-                      Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;
-                      Courier New=courier new,courier;Georgia=georgia,palatino;
-                      Helvetica=helvetica;Impact=impact,chicago;
-                      Webdings=webdings;Wingdings=wingdings`,
-        /* toolbar_persist:true,//始终显示toolbar */
         fixed_toolbar_container: ".richtext-tool",//将toolbar放到指定div上
-        skin_url: "/static/css",
-        content_url: "/static/css",
         placeholder:this.$t('Slides.click_input_text_content')
-       
       },
       content:'',
       initFlag: false,

+ 2 - 22
src/views/ppt_manage/newVersion/components/layer/Element/TextShape.vue

@@ -58,6 +58,7 @@ import "tinymce/plugins/quickbars"; //快速栏插件
 import "tinymce/plugins/fullscreen"; //全屏插件
 import "tinymce/plugins/paste"; //黏贴插件
 import "tinymce/icons/default/icons";
+import {setting} from '@/views/ppt_manage/newVersion/utils/tinymceSetting'
 export default {
   mixins:[shapeMixin],
   props:{
@@ -72,34 +73,13 @@ export default {
   data() {
     return {
       setting: {
+        ...setting,
         language: "zh_CN",
         language_url: require("../../../utils/zh_CN.js"),
-        menubar: false,
-        toolbar: [
-          "indent outdent alignleft aligncenter alignright alignjustify forecolor",
-          "bold italic underline strikethrough numlist bullist backcolor",
-          "fontselect fontsizeselect",
-        ],
-        quickbars_selection_toolbar:false,  
-        quickbars_insert_toolbar: false,
-        plugins: "lists quickbars paste",
         height: 350,
-        inline: true,
         selector: `#${this.elementInfo.id}-editorDom`,
         paste_as_text: true,
-        fontsize_formats:'12px 14px 16px 18px 20px 22px 24px 36px 48px',
-        font_formats:`微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';
-                      楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;
-                      Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;
-                      Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;
-                      Courier New=courier new,courier;Georgia=georgia,palatino;
-                      Helvetica=helvetica;Impact=impact,chicago;
-                      Webdings=webdings;Wingdings=wingdings`,
-        /* toolbar_persist:true,//始终显示toolbar */
         fixed_toolbar_container: ".layer-text-toolbar",//将toolbar放到指定div上
-        skin_url: "/static/css",
-        content_url: "/static/css",
-        //加placeholder
         placeholder:this.$t('Slides.click_input_text_content')
       }
     };

+ 3 - 0
src/views/ppt_manage/newVersion/css/common.scss

@@ -35,6 +35,9 @@ $titleColor:#333333;
     .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
         left:10px !important;
     }
+    .mce-content-body.placeholder-hidden:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{
+        display: none;
+    }
     .tox .tox-tbtn--bespoke .tox-tbtn__select-label{
         width:4.5em !important;
       }

+ 1 - 2
src/views/ppt_manage/newVersion/pptEditor.vue

@@ -74,8 +74,7 @@
                             }:{
                                 left:'10%',top:'5.5%',width:'68%',height:'7%'
                             }">
-                            <div class="title" v-html="item.titleContent" v-if="item.titleContent"></div>
-                            <div v-else class="normal-title">{{item.title}}</div>
+                            <div class="title" v-html="item.title"></div>
                         </div>
                         <!-- 内容 -->
                         <component  :is="getComponentName(item.modelId)"

+ 2 - 2
src/views/ppt_manage/newVersion/pptEnEditor.vue

@@ -72,8 +72,8 @@
                             }:{
                                 left:'10%',top:'5.5%',width:'68%',height:'7%'
                             }">
-                            <div class="title" v-html="item.titleContent" v-if="item.titleContent"></div>
-                            <div v-else class="normal-title">{{item.title}}</div>
+                            <div class="title" v-html="item.title"></div>
+                            <!-- <div v-else class="normal-title">{{item.title}}</div> -->
                         </div>
                     <!-- 内容 -->
                     <component  :is="getComponentName(item.modelId)"

+ 4 - 4
src/views/ppt_manage/newVersion/pptEnPresent.vue

@@ -68,8 +68,8 @@
                     }:{
                         left:'90px',top:'34.65px',width:'612px',height:'44.1px'
                     }">
-                    <div class="title" v-html="currentItem.titleContent" v-if="currentItem.titleContent"></div>
-                    <div v-else class="normal-title">{{currentItem.title}}</div>
+                    <div class="title" v-html="currentItem.title"></div>
+                    <!-- <div v-else class="normal-title">{{currentItem.title}}</div> -->
                 </div>
                 <component
                   :ref="`pptPage_${currentIndex-1}`" 
@@ -140,8 +140,8 @@
                     }:{
                         left:'90px',top:'34.65px',width:'612px',height:'44.1px'
                     }">
-                    <div class="title" v-html="currentItem.titleContent" v-if="currentItem.titleContent"></div>
-                    <div v-else class="normal-title">{{currentItem.title}}</div>
+                    <div class="title" v-html="currentItem.title"></div>
+                    <!-- <div v-else class="normal-title">{{currentItem.title}}</div> -->
                 </div>
                 <component
                   :ref="`pptPage_${currentIndex-1}`" 

+ 2 - 2
src/views/ppt_manage/newVersion/pptEnPublish.vue

@@ -48,8 +48,8 @@
                 }:{
                     left:'90px',top:'34.65px',width:'612px',height:'44.1px'
                 }">
-                <div class="title" v-html="item.titleContent" v-if="item.titleContent"></div>
-                <div v-else class="normal-title">{{item.title}}</div>
+                <div class="title" v-html="item.title"></div>
+                <!-- <div v-else class="normal-title">{{item.title}}</div> -->
             </div>
             <component
               :is="getComponentName(item.modelId)"

+ 2 - 4
src/views/ppt_manage/newVersion/pptPresent.vue

@@ -68,8 +68,7 @@
                     }:{
                         left:'90px',top:'34.65px',width:'612px',height:'44.1px'
                     }">
-                    <div class="title" v-html="currentItem.titleContent" v-if="currentItem.titleContent"></div>
-                    <div v-else class="normal-title">{{currentItem.title}}</div>
+                    <div class="title" v-html="currentItem.title"></div>
                 </div>
                 <component
                   :ref="`pptPage_${currentIndex-1}`" 
@@ -140,8 +139,7 @@
                     }:{
                         left:'90px',top:'34.65px',width:'612px',height:'44.1px'
                     }">
-                    <div class="title" v-html="currentItem.titleContent" v-if="currentItem.titleContent"></div>
-                    <div v-else class="normal-title">{{currentItem.title}}</div>
+                    <div class="title" v-html="currentItem.title"></div>
                 </div>
                 <component
                   :ref="`pptPage_${currentIndex-1}`" 

+ 1 - 2
src/views/ppt_manage/newVersion/pptPublish.vue

@@ -54,8 +54,7 @@
                 }:{
                     left:'90px',top:'34.65px',width:'612px',height:'44.1px'
                 }">
-                <div class="title" v-html="item.titleContent" v-if="item.titleContent"></div>
-                <div v-else class="normal-title">{{item.title}}</div>
+                <div class="title" v-html="item.title"></div>
             </div>
             <component
               :is="getComponentName(item.modelId)"

+ 9 - 0
src/views/ppt_manage/newVersion/utils/tinymceSetting.js

@@ -52,5 +52,14 @@ export const setting = {
                 } 
             }
         });
+        //中文输入法和placeholder并存的问题
+        editor.on('input',function(){
+            let content = editor.getContent()
+            if(content){
+                editor.getBody().classList.add('.placeholder-hidden')
+            }else{
+                editor.getBody().classList.remove('.placeholder-hidden')
+            }
+        })
     }
 }

+ 8 - 0
src/views/ppt_manage/newVersion/utils/untils.js

@@ -727,3 +727,11 @@ export const isShowPPTTitle = (Source,MyChartType)=>{
     const sense_2 = [2,5,6,7,8,9].includes(Source)
     return sense_1||sense_2
 }
+
+//获取富文本字符串的纯文本
+export const getPlainText = (richText='')=>{
+    let tempDiv = document.createElement("div");
+    tempDiv.innerHTML = richText;
+    let plainText = tempDiv.textContent || tempDiv.innerText || "";
+    return plainText.trim(); // 使用trim()移除可能的前后空格
+}