测试全屏富文本

src/components/pages/race/addRace/raceOverview.vue

@@ -19,12 +19,7 @@
             </div>
             <div class="stepRightNav" @click="jump('first')">
               <div>驱动问题</div>
-              <div
-                class="isFinishCss"
-                v-if="
-                  raceOver.driQuestion.brief != ''
-                "
-              >
+              <div class="isFinishCss" v-if="raceOver.driQuestion.brief != ''">
                 <div class="isFinish">
                   <img src="../../../../assets/icon/race/finish.png" alt="" />
                 </div>
@@ -38,12 +33,7 @@
             </div>
             <div class="stepRightNav" @click="jump('second')">
               <div>学习目标</div>
-              <div
-                class="isFinishCss"
-                v-if="
-                  raceOver.tarDesign.brief != ''
-                "
-              >
+              <div class="isFinishCss" v-if="raceOver.tarDesign.brief != ''">
                 <div class="isFinish">
                   <img src="../../../../assets/icon/race/finish.png" alt="" />
                 </div>
@@ -57,12 +47,7 @@
             </div>
             <div class="stepRightNav" @click="jump('third')">
               <div>评价设计</div>
-              <div
-                class="isFinishCss"
-                v-if="
-                  raceOver.actiDesign.brief != ''
-                "
-              >
+              <div class="isFinishCss" v-if="raceOver.actiDesign.brief != ''">
                 <div class="isFinish">
                   <img src="../../../../assets/icon/race/finish.png" alt="" />
                 </div>
@@ -104,6 +89,13 @@
                   @change="upRaceOver"
                   :placeholder="'可包括阶段性问题和学科问题：阶段性问题是指在核心问题解决的不同阶段，通过提出驱动性问题，明确阶段子任务。学科问题是指从不同学科的角度以及分解和提出要研究解决的主要问题。'"
                 ></editor-bar>
+                <div class="fullCss">
+                  <img
+                    src="../../../../assets/full.png"
+                    class="full"
+                    @click="fullTools(1,'可包括阶段性问题和学科问题：阶段性问题是指在核心问题解决的不同阶段，通过提出驱动性问题，明确阶段子任务。学科问题是指从不同学科的角度以及分解和提出要研究解决的主要问题。')"
+                  />
+                </div>
               </div>
               <div>
                 <div class="basic_box">
@@ -219,6 +211,13 @@
                   @change="upRaceOver"
                   :placeholder="'学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述'"
                 ></editor-bar>
+                <div class="fullCss">
+                  <img
+                    src="../../../../assets/full.png"
+                    class="full"
+                    @click="fullTools(2,'学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述')"
+                  />
+                </div>
               </div>
               <div>
                 <div class="basic_box">
@@ -333,6 +332,13 @@
                   @change="upRaceOver"
                   :placeholder="'项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。'"
                 ></editor-bar>
+                <div class="fullCss">
+                  <img
+                    src="../../../../assets/full.png"
+                    class="full"
+                    @click="fullTools(3,'项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。')"
+                  />
+                </div>
               </div>
               <div>
                 <div class="basic_box">
@@ -486,6 +492,25 @@
         <el-button type="primary" @click="isAddOrUpdateLine">确定</el-button>
       </span>
     </el-dialog>
+    <el-dialog
+      title="编辑富文本"
+      :visible.sync="full"
+      :append-to-body="true"
+      width="100%"
+      :before-close="handleClose"
+      class="dialog_diy fullEditor"
+    >
+      <editor-bar
+        v-model="fullBrief"
+        :placeholder="plaText"
+      ></editor-bar>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="full = false">取 消</el-button>
+        <el-button type="primary" @click="addFullText"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -510,8 +535,12 @@ export default {
       AttTextIndex: 0,
       dialogVisible: false,
       dialogVisible1: false,
+      full: false,
       line: "",
       lineCount: 0,
+      fullBrief:"",
+      plaText:"",
+      isBrief:0,
     };
   },
   methods: {
@@ -529,6 +558,9 @@ export default {
     change1(val) {
       console.log(val);
       this.$forceUpdate();
+    },
+    upFullBrief(){
+
     },
     addImg(e) {
       var el = e.currentTarget;
@@ -894,6 +926,25 @@ export default {
       this.lineType = 1;
       this.dialogVisible1 = true;
     },
+    fullTools(t,text) {
+      this.isBrief = t;
+      this.plaText = text;
+      this.full = !this.full;
+    },
+    addFullText(){
+      if(this.isBrief == 1){
+        this.raceOver.driQuestion.brief = this.fullBrief;
+      }else if(this.isBrief == 2){
+        this.raceOver.tarDesign.brief = this.fullBrief;
+      }else if(this.isBrief == 3){
+        this.raceOver.actiDesign.brief = this.fullBrief;
+      }
+      this.isBrief = 0;
+      this.fullBrief = "";
+      this.plaText = "";
+      this.full = !this.full;
+      this.upRaceOver();
+    },
   },
   created() {
     this.raceOver.driQuestion = this.raceOverView.driQuestion;
@@ -905,6 +956,9 @@ export default {
 
 <style scoped>
 @media screen and (max-width: 1280px) {
+  .fullCss {
+    right: 15% !important;
+  }
 }
 .dialog_diy >>> .el-dialog__header {
   background: #3c3c3c !important;
@@ -1374,4 +1428,22 @@ export default {
   width: 100%;
   height: 100%;
 }
+.full,
+.closeImg {
+  height: 22px;
+  cursor: pointer;
+  background: #000;
+}
+.fullCss {
+  position: absolute;
+  right: 12%;
+  top: 9px;
+}
+.fullEditor>>>.text{
+  height: 700px !important;
+}
+.fullEditor>>>.el-dialog{
+  margin: 0 !important;
+  height: 100%;
+}
 </style>