新增富文本全屏编辑功能

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

@@ -32,11 +32,17 @@
             <div class="right_title">阶段{{ saIndex + 1 }}</div>
             <div class="saBox">
               <div class="saLittleBox">
-                <div>
+                <div style="position: relative">
                   <editor-bar
                     v-model="sa.brief"
                     @change="upRaceAct"
                   ></editor-bar>
+                  <div
+                    class="fullCss"
+                    @click="fullTools(sa.brief, 1, '', saIndex)"
+                  >
+                    全屏编辑
+                  </div>
                 </div>
                 <div>
                   <div class="basic_box">
@@ -137,6 +143,20 @@
         </div>
       </div>
     </div>
+    <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>
 
@@ -167,6 +187,11 @@ export default {
           },
         ],
       },
+      fullBrief: "",
+      plaText: "",
+      isBrief: 0,
+      full: false,
+      jdIndex: 0,
       stage: 0,
     };
   },
@@ -174,6 +199,9 @@ export default {
     upRaceAct() {
       this.$emit("upRaceAct", this.raceAct);
     },
+    handleClose(done) {
+      done();
+    },
     addImg(e) {
       var el = e.currentTarget;
       el.getElementsByTagName("input")[0].click();
@@ -328,6 +356,30 @@ export default {
           });
       }
     },
+    fullTools(b, t, text,i) {
+      this.fullBrief = b;
+      this.isBrief = t;
+      this.plaText = text;
+      this.jdIndex = i;
+      this.full = !this.full;
+    },
+    addFullText() {
+      if (this.isBrief == 1) {
+        this.raceAct.stageBox[this.jdIndex].brief = this.fullBrief;
+      } else if (this.isBrief == 2) {
+        this.raceAct.stageBox[this.jdIndex].brief = this.fullBrief;
+      } else if (this.isBrief == 3) {
+        this.raceAct.stageBox[this.jdIndex].brief = this.fullBrief;
+      } else if (this.isBrief == 4) {
+        this.raceAct.stageBox[this.jdIndex].brief = this.fullBrief;
+      }
+      this.isBrief = 0;
+      this.fullBrief = "";
+      this.plaText = "";
+      this.jdIndex = 0;
+      this.full = !this.full;
+      this.upRaceAct();
+    },
   },
   created() {
     this.raceAct = this.raceProcess;
@@ -346,6 +398,19 @@ export default {
   .upTips {
     align-items: flex-start !important;
   }
+  .fullCss {
+    right: 1% !important;
+  }
+  .fullEditor >>> .el-dialog__footer {
+    padding: 4% 20px 20px !important;
+  }
+}
+.dialog_diy >>> .el-dialog__header {
+  background: #3c3c3c !important;
+  padding: 15px 20px;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
 }
 .pb_content {
   width: 100%;
@@ -733,4 +798,26 @@ export default {
   color: #999;
   font-size: 14px;
 }
+.fullCss {
+  position: absolute;
+  right: 2%;
+  top: 9px;
+  cursor: pointer;
+}
+.fullEditor >>> .text {
+  height: 100% !important;
+}
+.fullEditor >>> .el-dialog {
+  margin: 0 !important;
+  height: 100%;
+}
+.fullEditor >>> .el-dialog__body {
+  height: 70%;
+}
+.fullEditor >>> .editor {
+  height: 100%;
+}
+.fullEditor >>> .el-dialog__footer {
+  padding: 2% 20px 20px !important;
+}
 </style>

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

@@ -24,11 +24,14 @@
             <div class="right_title">项目成效与反思</div>
             <div class="saBox">
               <div class="saLittleBox">
-                <div>
+                <div style="position: relative">
                   <editor-bar
                     v-model="raceEff.brief"
                     @change="upproEff"
                   ></editor-bar>
+                  <div class="fullCss" @click="fullTools(raceEff.brief)">
+                    全屏编辑
+                  </div>
                 </div>
                 <div>
                   <div class="basic_box">
@@ -129,6 +132,20 @@
         </div>
       </div>
     </div>
+    <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>
 
@@ -143,12 +160,18 @@ export default {
         brief: "",
         data: [],
       },
+      fullBrief: "",
+      plaText: "",
+      full: false,
     };
   },
   methods: {
     change(val) {
       console.log(val);
     },
+    handleClose(done) {
+      done();
+    },
     upproEff() {
       this.$emit("upproEff", this.raceEff);
     },
@@ -301,6 +324,18 @@ export default {
           });
       }
     },
+    fullTools(b) {
+      this.fullBrief = b;
+      this.plaText = "";
+      this.full = !this.full;
+    },
+    addFullText() {
+      this.raceEff.brief = this.fullBrief;
+      this.fullBrief = "";
+      this.plaText = "";
+      this.full = !this.full;
+      this.upproEff();
+    },
   },
   created() {
     this.raceEff = this.raceEffect;
@@ -316,6 +351,19 @@ export default {
   .upTips {
     align-items: flex-start !important;
   }
+  .fullCss {
+    right: 1% !important;
+  }
+  .fullEditor >>> .el-dialog__footer {
+    padding: 4% 20px 20px !important;
+  }
+}
+.dialog_diy >>> .el-dialog__header {
+  background: #3c3c3c !important;
+  padding: 15px 20px;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
 }
 .pb_content {
   width: 100%;
@@ -765,4 +813,26 @@ export default {
   color: #999;
   font-size: 14px;
 }
+.fullCss {
+  position: absolute;
+  right: 2%;
+  top: 9px;
+  cursor: pointer;
+}
+.fullEditor >>> .text {
+  height: 100% !important;
+}
+.fullEditor >>> .el-dialog {
+  margin: 0 !important;
+  height: 100%;
+}
+.fullEditor >>> .el-dialog__body {
+  height: 70%;
+}
+.fullEditor >>> .editor {
+  height: 100%;
+}
+.fullEditor >>> .el-dialog__footer {
+  padding: 2% 20px 20px !important;
+}
 </style>

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

@@ -24,11 +24,14 @@
             <div class="right_title">项目成果交流与评价</div>
             <div class="saBox">
               <div class="saLittleBox">
-                <div>
+                <div style="position: relative">
                   <editor-bar
                     v-model="raceExc.brief"
                     @change="upExc"
                   ></editor-bar>
+                  <div class="fullCss" @click="fullTools(raceExc.brief)">
+                    全屏编辑
+                  </div>
                 </div>
                 <div>
                   <div class="basic_box">
@@ -129,6 +132,20 @@
         </div>
       </div>
     </div>
+    <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>
 
@@ -143,12 +160,18 @@ export default {
         brief: "",
         data: [],
       },
+      fullBrief: "",
+      plaText: "",
+      full: false,
     };
   },
   methods: {
     change(val) {
       console.log(val);
     },
+    handleClose(done) {
+      done();
+    },
     upExc() {
       this.$emit("upExc", this.raceExc);
     },
@@ -301,6 +324,18 @@ export default {
           });
       }
     },
+    fullTools(b) {
+      this.fullBrief = b;
+      this.plaText = "";
+      this.full = !this.full;
+    },
+    addFullText() {
+      this.raceExc.brief = this.fullBrief;
+      this.fullBrief = "";
+      this.plaText = "";
+      this.full = !this.full;
+      this.upExc();
+    },
   },
   created() {
     this.raceExc = this.raceExceva;
@@ -316,6 +351,19 @@ export default {
   .upTips {
     align-items: flex-start !important;
   }
+  .fullCss {
+    right: 1% !important;
+  }
+  .fullEditor >>> .el-dialog__footer {
+    padding: 4% 20px 20px !important;
+  }
+}
+.dialog_diy >>> .el-dialog__header {
+  background: #3c3c3c !important;
+  padding: 15px 20px;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
 }
 .pb_content {
   width: 100%;
@@ -765,4 +813,26 @@ export default {
   color: #999;
   font-size: 14px;
 }
+.fullCss {
+  position: absolute;
+  right: 2%;
+  top: 9px;
+  cursor: pointer;
+}
+.fullEditor >>> .text {
+  height: 100% !important;
+}
+.fullEditor >>> .el-dialog {
+  margin: 0 !important;
+  height: 100%;
+}
+.fullEditor >>> .el-dialog__body {
+  height: 70%;
+}
+.fullEditor >>> .editor {
+  height: 100%;
+}
+.fullEditor >>> .el-dialog__footer {
+  padding: 2% 20px 20px !important;
+}
 </style>

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

@@ -14,12 +14,7 @@
             </div>
             <div class="stepRightNav" @click="jump('jd' + staIndex + 1)">
               <div>阶段{{ staIndex + 1 }}</div>
-              <div
-                class="isFinishCss"
-                v-if="
-                  sta.staTitle != ''
-                "
-              >
+              <div class="isFinishCss" v-if="sta.staTitle != ''">
                 <div class="isFinish">
                   <img src="../../../../assets/icon/race/finish.png" alt="" />
                 </div>
@@ -97,6 +92,18 @@
                     v-model="race.driQuestion.brief"
                     @change="upRacePro"
                   ></editor-bar>
+                  <div
+                    class="fullCss"
+                    @click="
+                      fullTools(
+                        race.driQuestion.brief,
+                        1,
+                        '',saIndex,raIndex
+                      )
+                    "
+                  >
+                    全屏编辑
+                  </div>
                 </div>
                 <!-- <div>
                   <div class="basic_box">
@@ -217,6 +224,18 @@
                     v-model="race.tarDesign.brief"
                     @change="upRacePro"
                   ></editor-bar>
+                  <div
+                    class="fullCss"
+                    @click="
+                      fullTools(
+                        race.tarDesign.brief,
+                        2,
+                        '',saIndex,raIndex
+                      )
+                    "
+                  >
+                    全屏编辑
+                  </div>
                 </div>
                 <!-- <div>
                   <div class="basic_box">
@@ -336,6 +355,18 @@
                     v-model="race.actiDesign.brief"
                     @change="upRacePro"
                   ></editor-bar>
+                  <div
+                    class="fullCss"
+                    @click="
+                      fullTools(
+                        race.actiDesign.brief,
+                        3,
+                        '',saIndex,raIndex
+                      )
+                    "
+                  >
+                    全屏编辑
+                  </div>
                 </div>
                 <!-- <div>
                   <div class="basic_box">
@@ -456,6 +487,18 @@
                     v-model="race.evaDesign.brief"
                     @change="upRacePro"
                   ></editor-bar>
+                  <div
+                    class="fullCss"
+                    @click="
+                      fullTools(
+                        race.evaDesign.brief,
+                        4,
+                        '',saIndex,raIndex
+                      )
+                    "
+                  >
+                    全屏编辑
+                  </div>
                 </div>
                 <!-- <div>
                   <div class="basic_box">
@@ -590,6 +633,20 @@
         </div>
       </div>
     </div>
+    <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>
 
@@ -620,12 +677,21 @@ export default {
           },
         ],
       },
+      fullBrief: "",
+      plaText: "",
+      isBrief: 0,
+      full:false,
+      jdIndex:0,
+      rwIndex:0,
     };
   },
   methods: {
     change(val) {
       console.log(val);
     },
+    handleClose(done) {
+      done();
+    },
     addImg(e) {
       var el = e.currentTarget;
       el.getElementsByTagName("input")[0].click();
@@ -984,6 +1050,32 @@ export default {
           });
       }
     },
+    fullTools(b, t, text,i,j) {
+      this.fullBrief = b;
+      this.isBrief = t;
+      this.plaText = text;
+      this.jdIndex = i;
+      this.rwIndex = j;
+      this.full = !this.full;
+    },
+    addFullText() {
+      if (this.isBrief == 1) {
+        this.racePro.stageBox[this.jdIndex].actBox[this.rwIndex].driQuestion.brief = this.fullBrief;
+      } else if (this.isBrief == 2) {
+        this.racePro.stageBox[this.jdIndex].actBox[this.rwIndex].tarDesign.brief = this.fullBrief;
+      } else if (this.isBrief == 3) {
+        this.racePro.stageBox[this.jdIndex].actBox[this.rwIndex].actiDesign.brief = this.fullBrief;
+      } else if (this.isBrief == 4) {
+        this.racePro.stageBox[this.jdIndex].actBox[this.rwIndex].evaDesign.brief = this.fullBrief;
+      }
+      this.isBrief = 0;
+      this.fullBrief = "";
+      this.plaText = "";
+      this.jdIndex = 0;
+      this.rwIndex = 0;
+      this.full = !this.full;
+      this.upRacePro();
+    },
   },
   created() {
     this.racePro = this.raceProcess;
@@ -1005,6 +1097,19 @@ export default {
   .rwInput {
     width: 45% !important;
   }
+  .fullCss {
+    right: 1% !important;
+  }
+  .fullEditor >>> .el-dialog__footer {
+    padding: 4% 20px 20px !important;
+  }
+}
+.dialog_diy >>> .el-dialog__header {
+  background: #3c3c3c !important;
+  padding: 15px 20px;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
 }
 .pb_content {
   width: 100%;
@@ -1120,6 +1225,7 @@ export default {
 
 .editorCss {
   width: 90% !important;
+  position: relative;
 }
 
 .basic_box {
@@ -1519,4 +1625,26 @@ export default {
   width: 100%;
   height: 100%;
 }
+.fullCss {
+  position: absolute;
+  right: 2%;
+  top: 9px;
+  cursor: pointer;
+}
+.fullEditor >>> .text {
+  height: 100% !important;
+}
+.fullEditor >>> .el-dialog {
+  margin: 0 !important;
+  height: 100%;
+}
+.fullEditor >>> .el-dialog__body {
+  height: 70%;
+}
+.fullEditor >>> .editor {
+  height: 100%;
+}
+.fullEditor >>> .el-dialog__footer {
+  padding: 2% 20px 20px !important;
+}
 </style>

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

@@ -89,8 +89,18 @@
                   @change="upRaceOver"
                   :placeholder="'可包括阶段性问题和学科问题：阶段性问题是指在核心问题解决的不同阶段，通过提出驱动性问题，明确阶段子任务。学科问题是指从不同学科的角度以及分解和提出要研究解决的主要问题。'"
                 ></editor-bar>
-                <!-- <div class="fullCss">
-                  <img
+                <div
+                  class="fullCss"
+                  @click="
+                    fullTools(
+                      raceOver.driQuestion.brief,
+                      1,
+                      '可包括阶段性问题和学科问题：阶段性问题是指在核心问题解决的不同阶段，通过提出驱动性问题，明确阶段子任务。学科问题是指从不同学科的角度以及分解和提出要研究解决的主要问题。'
+                    )
+                  "
+                >
+                  全屏编辑
+                  <!-- <img
                     src="../../../../assets/full.png"
                     class="full"
                     @click="
@@ -100,8 +110,8 @@
                         '可包括阶段性问题和学科问题：阶段性问题是指在核心问题解决的不同阶段，通过提出驱动性问题，明确阶段子任务。学科问题是指从不同学科的角度以及分解和提出要研究解决的主要问题。'
                       )
                     "
-                  />
-                </div> -->
+                  /> -->
+                </div>
               </div>
               <div>
                 <div class="basic_box">
@@ -222,8 +232,18 @@
                   @change="upRaceOver"
                   :placeholder="'学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述'"
                 ></editor-bar>
-                <!-- <div class="fullCss">
-                  <img
+                <div
+                  class="fullCss"
+                  @click="
+                    fullTools(
+                      raceOver.tarDesign.brief,
+                      2,
+                      '学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述'
+                    )
+                  "
+                >
+                  全屏编辑
+                  <!-- <img
                     src="../../../../assets/full.png"
                     class="full"
                     @click="
@@ -233,8 +253,8 @@
                         '学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述'
                       )
                     "
-                  />
-                </div> -->
+                  /> -->
+                </div>
               </div>
               <div>
                 <div class="basic_box">
@@ -354,8 +374,18 @@
                   @change="upRaceOver"
                   :placeholder="'项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。'"
                 ></editor-bar>
-                <!-- <div class="fullCss">
-                  <img
+                <div
+                  class="fullCss"
+                  @click="
+                    fullTools(
+                      raceOver.actiDesign.brief,
+                      3,
+                      '项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。'
+                    )
+                  "
+                >
+                  全屏编辑
+                  <!-- <img
                     src="../../../../assets/full.png"
                     class="full"
                     @click="
@@ -365,8 +395,8 @@
                         '项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。'
                       )
                     "
-                  />
-                </div> -->
+                  /> -->
+                </div>
               </div>
               <div>
                 <div class="basic_box">
@@ -987,7 +1017,7 @@ export default {
     right: 15% !important;
   }
   .fullEditor >>> .el-dialog__footer {
-    padding: 3% 20px 20px !important;
+    padding: 4% 20px 20px !important;
   }
   .upTips {
     align-items: flex-start !important;
@@ -1471,6 +1501,7 @@ export default {
   position: absolute;
   right: 12%;
   top: 9px;
+  cursor: pointer;
 }
 .fullEditor >>> .text {
   height: 100% !important;