.

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

@@ -0,0 +1,121 @@
+<template>
+    <div class="title-editor-tool-wrap">
+        <el-collapse v-model="activeNames" class="tool-list">
+            <el-collapse-item title="位置设置" name="position">
+                <div>
+                    <span class="demonstration">上下（%）</span>
+                    <el-slider v-model="detail.top" :max="12"></el-slider>
+                </div>
+                <div>
+                    <span class="demonstration">左右（%）</span>
+                    <el-slider v-model="detail.left"></el-slider>
+                </div>
+                <!-- <el-button type="text" @click="changePosition">应用至整个PPT</el-button> -->
+            </el-collapse-item>
+            <el-collapse-item title="大小设置" name="size">
+                <div>
+                    <span class="demonstration">宽度（%）</span>
+                    <el-slider v-model="detail.width" :max="100 - detail.left"></el-slider>
+                </div>
+                <div>
+                    <span class="demonstration">高度（%）</span>
+                    <el-slider v-model="detail.height" :max="14-detail.top"></el-slider>
+                </div>
+                <el-button type="text" @click="changeSize">应用至整个PPT</el-button>
+            </el-collapse-item>
+            <el-collapse-item title="内容设置" 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>
+</template>
+
+<script>
+import tinymce from "tinymce";
+import Editor from "@tinymce/tinymce-vue";
+import "tinymce/themes/silver";
+import "tinymce/plugins/lists"; //列表插件
+import "tinymce/plugins/quickbars"; //快速栏插件
+import "tinymce/plugins/fullscreen"; //全屏插件
+import "tinymce/plugins/paste"; //黏贴插件
+import "tinymce/icons/default/icons";
+import {setting} from '../../utils/tinymceSetting'
+export default {
+    components:{Editor},
+    props:{
+        currentItem:{
+            type:Object,
+        }
+    },
+    data() {
+        return {
+            activeNames:'content',
+            content:'&*^%', //若设置为空,则init时没有标题就不会触发watch,随便设置几个字符即可
+            detail:{
+                left:0,top:0,width:0,height:0,
+            },
+            initFlag:false,
+            setting:{
+                ...setting,
+                language: "zh_CN",
+                language_url: require("../../utils/zh_CN.js"),
+                select:'#editorDom',//将编辑器渲染至该dom
+                fixed_toolbar_container: ".editor-tool",//将toolbar渲染至该dom
+                toolbar_persist:true,//是否一直显示toolbar
+                placeholder:this.$t('Slides.click_input_text_content'),
+            },
+        };
+    },
+    watch:{
+        content(con){
+            if(this.initFlag){
+                this.initFlag = false
+                return
+            }
+            const { elementId } = this.$refs.editor;
+            let richContent = tinymce.editors[elementId].getContent();
+            let val = tinymce.editors[elementId].getContent({ format: "text" });
+            this.$emit("textChange", { val, richContent });
+        },
+        detail:{
+            handler(newval){
+                //若init还未执行完成,不派发事件
+                if(this.initFlag) return
+                this.$emit("styleChange",newval)
+            },
+            deep:true
+        },
+    },
+    methods: {
+        initTitleEditor(){
+            const {left,top,width,height} = this.currentItem.titleDetail
+            this.detail = {left,top,width,height}
+            this.content = this.currentItem.titleContent
+        },
+        changePosition(){
+            const {left,top} = this.detail
+            this.$emit('changePositionAll',{top,left})
+        },
+        changeSize(){
+            this.changePosition()
+            const {width,height} = this.detail
+            this.$emit('changeSizeAll',{width,height})
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.title-editor-tool-wrap{
+    #editorDom{
+        min-height: 200px;
+        border:1px solid #ccc;
+        border-top: none;
+    }
+}
+</style>