代码编辑器

package-lock.json

@@ -12,6 +12,7 @@
         "@microsoft/fetch-event-source": "^2.0.1",
         "@vue-office/docx": "^1.6.2",
         "@vue/composition-api": "^1.7.2",
+        "ace-builds": "^1.41.0",
         "axios": "^0.21.1",
         "cacache": "^16.1.1",
         "clipboard": "^2.0.10",
@@ -65,6 +66,7 @@
         "vue-router": "^3.0.1",
         "vue-video-player": "^5.0.2",
         "vue-wordcloud": "^1.1.1",
+        "vue2-ace-editor": "^0.0.15",
         "vuedraggable": "^2.24.3",
         "vuex": "^3.6.2",
         "wangeditor": "^4.6.14",
@@ -657,6 +659,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ace-builds": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.41.0.tgz",
+      "integrity": "sha512-tiEUfw7V/FpHuI4tG7KS+muOTMIuPh6zReBAD2Uqhe9t00tLeyVGxjXu0tSqz5OIPWy7/wvuJBVXAsNWx0rYvQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/acorn": {
       "version": "5.7.4",
       "resolved": "https://registry.npmmirror.com/acorn/download/acorn-5.7.4.tgz?cache=0&sync_timestamp=1611561275462&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-5.7.4.tgz",
@@ -2269,6 +2277,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "node_modules/brace": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmmirror.com/brace/-/brace-0.11.1.tgz",
+      "integrity": "sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q==",
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010709807&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
@@ -18147,6 +18161,15 @@
         "vue-resize-directive": "^1.0.0"
       }
     },
+    "node_modules/vue2-ace-editor": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmmirror.com/vue2-ace-editor/-/vue2-ace-editor-0.0.15.tgz",
+      "integrity": "sha512-e3TR9OGXc71cGpvYcW068lNpRcFt3+OONCC81oxHL/0vwl/V3OgqnNMw2/RRolgQkO/CA5AjqVHWmANWKOtNnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "brace": "^0.11.0"
+      }
+    },
     "node_modules/vuedraggable": {
       "version": "2.24.3",
       "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
@@ -19924,6 +19947,11 @@
         "negotiator": "0.6.2"
       }
     },
+    "ace-builds": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.41.0.tgz",
+      "integrity": "sha512-tiEUfw7V/FpHuI4tG7KS+muOTMIuPh6zReBAD2Uqhe9t00tLeyVGxjXu0tSqz5OIPWy7/wvuJBVXAsNWx0rYvQ=="
+    },
     "acorn": {
       "version": "5.7.4",
       "resolved": "https://registry.npmmirror.com/acorn/download/acorn-5.7.4.tgz?cache=0&sync_timestamp=1611561275462&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-5.7.4.tgz",
@@ -21354,6 +21382,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "brace": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmmirror.com/brace/-/brace-0.11.1.tgz",
+      "integrity": "sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010709807&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
@@ -22028,6 +22061,7 @@
         "@microsoft/fetch-event-source": "^2.0.1",
         "@vue-office/docx": "^1.6.2",
         "@vue/composition-api": "^1.7.2",
+        "ace-builds": "^1.41.0",
         "autoprefixer": "^7.1.2",
         "axios": "^0.21.1",
         "babel-core": "^6.22.1",
@@ -22115,6 +22149,7 @@
         "vue-template-compiler": "^2.5.2",
         "vue-video-player": "^5.0.2",
         "vue-wordcloud": "^1.1.1",
+        "vue2-ace-editor": "^0.0.15",
         "vuedraggable": "^2.24.3",
         "vuex": "^3.6.2",
         "wangeditor": "^4.6.14",
@@ -22606,6 +22641,11 @@
             "negotiator": "0.6.2"
           }
         },
+        "ace-builds": {
+          "version": "1.41.0",
+          "resolved": "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.41.0.tgz",
+          "integrity": "sha512-tiEUfw7V/FpHuI4tG7KS+muOTMIuPh6zReBAD2Uqhe9t00tLeyVGxjXu0tSqz5OIPWy7/wvuJBVXAsNWx0rYvQ=="
+        },
         "acorn": {
           "version": "5.7.4",
           "resolved": "https://registry.npmmirror.com/acorn/download/acorn-5.7.4.tgz?cache=0&sync_timestamp=1611561275462&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-5.7.4.tgz",
@@ -24036,6 +24076,11 @@
           "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
           "dev": true
         },
+        "brace": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/brace/-/brace-0.11.1.tgz",
+          "integrity": "sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q=="
+        },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": "https://registry.npmmirror.com/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010709807&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
@@ -36929,6 +36974,14 @@
             "vue-resize-directive": "^1.0.0"
           }
         },
+        "vue2-ace-editor": {
+          "version": "0.0.15",
+          "resolved": "https://registry.npmmirror.com/vue2-ace-editor/-/vue2-ace-editor-0.0.15.tgz",
+          "integrity": "sha512-e3TR9OGXc71cGpvYcW068lNpRcFt3+OONCC81oxHL/0vwl/V3OgqnNMw2/RRolgQkO/CA5AjqVHWmANWKOtNnQ==",
+          "requires": {
+            "brace": "^0.11.0"
+          }
+        },
         "vuedraggable": {
           "version": "2.24.3",
           "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
@@ -50227,6 +50280,14 @@
         "vue-resize-directive": "^1.0.0"
       }
     },
+    "vue2-ace-editor": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmmirror.com/vue2-ace-editor/-/vue2-ace-editor-0.0.15.tgz",
+      "integrity": "sha512-e3TR9OGXc71cGpvYcW068lNpRcFt3+OONCC81oxHL/0vwl/V3OgqnNMw2/RRolgQkO/CA5AjqVHWmANWKOtNnQ==",
+      "requires": {
+        "brace": "^0.11.0"
+      }
+    },
     "vuedraggable": {
       "version": "2.24.3",
       "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "@vue-office/docx": "^1.6.2",
     "@vue/composition-api": "^1.7.2",
+    "ace-builds": "^1.41.0",
     "axios": "^0.21.1",
     "cacache": "^16.1.1",
     "clipboard": "^2.0.10",
@@ -67,6 +68,7 @@
     "vue-router": "^3.0.1",
     "vue-video-player": "^5.0.2",
     "vue-wordcloud": "^1.1.1",
+    "vue2-ace-editor": "^0.0.15",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",
     "wangeditor": "^4.6.14",

src/components/pages/aiAddCourse/addCourse.vue

@@ -841,7 +841,7 @@
                           @click="checkKnowInfoData(item1.fileid)"></div>
                         <div class="chapter_upload_l" style="padding: 1px 0 0 10px">
                           <div v-if="item1.type == 2" class="chapter_upload_l_i2"></div>
-                          <div v-if="item1.type == 3" class="chapter_upload_l_i3" style="margin-left: 1px">
+                          <div v-if="item1.type == 3 || item1.type == 16" class="chapter_upload_l_i3" style="margin-left: 1px">
                           </div>
                           <div v-if="item1.type == 6" class="chapter_upload_l_i6" style="margin-left: 1px">
                           </div>
@@ -3437,7 +3437,7 @@
                                   ">
                                   <div class="chapter_upload_l" style="padding: 1px 0 0 10px">
                                     <div v-if="item1.type == 2" class="chapter_upload_l_i2"></div>
-                                    <div v-if="item1.type == 3" class="chapter_upload_l_i3" style="margin-left: 1px">
+                                    <div v-if="item1.type == 3 || item1.type == 16" class="chapter_upload_l_i3" style="margin-left: 1px">
                                     </div>
                                     <div v-if="item1.type == 6" class="chapter_upload_l_i6" style="margin-left: 1px">
                                     </div>
@@ -3457,6 +3457,27 @@
                                   ></div>
                                   </div>
                                   <div class="chapter_upload_n">
+                                    <input
+                                      readonly="true"
+                                      v-if="
+                                        item1.type == 16
+                                      "
+                                      :placeholder="item1.name"
+                                      @click="
+                                        openCodeEditor(1,item1, unitIndex,itemTaskIndex, index1)
+                                      "
+                                      style="
+                                      border: none;
+                                      outline: none;
+                                      width: 80%;
+                                      minwidth: 215px;
+                                      z-index: 99;
+                                      font-size: 14px;
+                                      white-space: nowrap;
+                                      overflow: hidden;
+                                      text-overflow: ellipsis;
+                                    "
+                                    />
                                     <input readonly="true" v-if="
                                         item1.type == 2 ||
                                         item1.type == 3 ||
@@ -3573,6 +3594,17 @@
                                       ">
                                       <div></div>
                                     </div>
+                                    <div
+                                      class="chapter_upload_ic_edit"
+                                      v-if="
+                                        item1.type == 16
+                                      "
+                                      @click.stop="
+                                        openCodeEditor(1,item1, unitIndex,itemTaskIndex, index1)
+                                      "
+                                    >
+                                      <div></div>
+                                    </div>
                                     <div class="chapter_upload_ic_edit" v-if="item1.type == 6" @click="
                                         selectAttText(itemTaskIndex, index1)
                                       ">
@@ -3651,6 +3683,12 @@
                           >
                             智能应用
                           </button>
+                          <button
+                            class="c_pub_button_add pub_btn_add_img"
+                            @click="openCodeEditor(0,'',unitIndex,itemTaskIndex ,'')"
+                          >
+                            代码编辑器
+                          </button>
                           </div>
                           <div v-if="
                               unitJson[unitIndex].chapterInfo[0].taskJson[
@@ -7595,6 +7633,8 @@
     <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
     <wOffice :dialogVisibleOffice.sync="dialogVisibleOffice" :url="wurl"></wOffice>
     <appDialog ref="appDialog" @success="selectAppSuccess"></appDialog>
+    <CodeEditor ref="CodeEditorRef" @success="addHtmlSuccess"></CodeEditor>
+
   </div>
 </template>
 
@@ -7637,6 +7677,7 @@ import ConvertApi from 'convertapi-js'
 let convertApi = ConvertApi.auth('secret_U1EO5rhgMCnoBnBT')
 import appDialog from '../components/appDialog.vue'
 import { myMixin } from "@/mixins/mixin.js"
+import CodeEditor from "../components/CodeEditor";
 
 var OpenCC = require("opencc-js");
 let converter = OpenCC.Converter({
@@ -7690,6 +7731,7 @@ const getFile = (url) => {
 export default {
   mixins: [ myMixin ],
   components: {
+    CodeEditor,
     EditorBar,
     Mind,
     Time,
@@ -26101,6 +26143,31 @@ ${msg}
         this.knowInfoDataLoading = false
         console.log(e);
       });
+    },
+     openCodeEditor(type,val, unitIndex,itemTaskIndex,index1){
+      console.log('openCodeEditor',type,val,unitIndex,itemTaskIndex,index1);
+
+      this.$refs.CodeEditorRef.open(type,val, unitIndex,itemTaskIndex, index1)
+    },
+    addHtmlSuccess({Tname,url,type,unitIndex,itemTaskIndex,index1}){
+      console.log('addHtmlSuccess',Tname,url,'type:',type,'unitIndex',unitIndex,'itemTaskIndex',itemTaskIndex,'index1',index1);
+      if (type == 1) {
+        this.unitJson[unitIndex].chapterInfo[0].taskJson[
+          itemTaskIndex 
+        ].chapterData.splice(index1,1,{
+          name: Tname,
+          url: url,
+          type: 16
+        })
+      }else{
+        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
+          itemTaskIndex 
+        ].chapterData.push({
+          name: Tname,
+          url: url,
+          type: 16
+        });
+      }
     },
     openAddApp(i) {
       this.lineCount = i;

src/components/pages/aiEasy/addCourse.vue

@@ -455,7 +455,7 @@
                               <div class="chapter_upload_noc" style="margin-left: 10px;"  v-else></div>
                               <div class="chapter_upload_l" style="padding: 1px 0 0 10px">
                                 <div v-if="item1.type == 2" class="chapter_upload_l_i2"></div>
-                                <div v-if="item1.type == 3" class="chapter_upload_l_i3" style="margin-left: 1px">
+                                <div v-if="item1.type == 3 || item1.type == 16" class="chapter_upload_l_i3" style="margin-left: 1px">
                                 </div>
                                 <div v-if="item1.type == 6" class="chapter_upload_l_i6" style="margin-left: 1px">
                                 </div>
@@ -473,6 +473,10 @@
                                 </div>
                               </div>
                               <div class="chapter_upload_n" :class="{dataTips: !item1.fileid}">
+
+                                <div v-if="item1.type == 16" class="chapter_upload_box" @click="
+                                   openCodeEditor(1,item1, unitIndex,0, index1)
+                                  " >{{ item1.name }}</div>
                                 <div v-if="
                                   item1.type == 2 ||
                                   item1.type == 3 ||
@@ -546,6 +550,11 @@
                                   ">
                                   <div></div>
                                 </div>
+                                <div class="chapter_upload_ic_edit" v-if="item1.type == 16" @click="
+                                      openCodeEditor(1,item1, unitIndex,0, index1)
+                                  ">
+                                  <div></div>
+                                </div>
                                 <div class="chapter_upload_ic_edit" v-if="item1.type == 8 || item1.type == 15"
                                   @click="selectLine(0, index1)">
                                   <div></div>
@@ -608,8 +617,14 @@
                             class="c_pub_button_add pub_btn_add_img"
                             @click="openAddApp(0)"
                           >
-                            智能应用
-                          </button>
+                          智能应用
+                        </button>
+                        <button
+                          class="c_pub_button_add pub_btn_add_img"
+                          @click="openCodeEditor(0,'',unitIndex,0 ,'')"
+                        >
+                          代码编辑器
+                        </button>
                       </div>
                       <div v-if="
                         unitJson[unitIndex].chapterInfo[0].taskJson[
@@ -7041,6 +7056,7 @@
     <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
     <wOffice :dialogVisibleOffice.sync="dialogVisibleOffice" :url="wurl" ></wOffice>
     <appDialog ref="appDialog" @success="selectAppSuccess"></appDialog>
+    <CodeEditor ref="CodeEditorRef" @success="addHtmlSuccess"></CodeEditor>
   </div>
 </template>
 
@@ -7083,6 +7099,7 @@ import ConvertApi from 'convertapi-js'
 let convertApi = ConvertApi.auth('secret_U1EO5rhgMCnoBnBT')
 import appDialog from '../components/appDialog.vue'
 import { myMixin } from "@/mixins/mixin.js"
+import CodeEditor from "../components/CodeEditor";
 
 var OpenCC = require("opencc-js");
 let converter = OpenCC.Converter({
@@ -7136,6 +7153,7 @@ const getFile = (url) => {
 export default {
   mixins: [ myMixin ],
   components: {
+    CodeEditor,
     EditorBar,
     Mind,
     Time,
@@ -25437,6 +25455,31 @@ ${msg}
         console.log(e);
       });
     },
+    openCodeEditor(type,val, unitIndex,itemTaskIndex,index1){
+      console.log('openCodeEditor',type,val,unitIndex,itemTaskIndex,index1);
+
+      this.$refs.CodeEditorRef.open(type,val, unitIndex,itemTaskIndex, index1)
+    },
+    addHtmlSuccess({Tname,url,type,unitIndex,itemTaskIndex,index1}){
+      console.log('addHtmlSuccess',Tname,url,'type:',type,'unitIndex',unitIndex,'itemTaskIndex',itemTaskIndex,'index1',index1);
+      if (type == 1) {
+        this.unitJson[unitIndex].chapterInfo[0].taskJson[
+          itemTaskIndex 
+        ].chapterData.splice(index1,1,{
+          name: Tname,
+          url: url,
+          type: 16
+        })
+      }else{
+        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
+          itemTaskIndex 
+        ].chapterData.push({
+          name: Tname,
+          url: url,
+          type: 16
+        });
+      }
+    },
     openAddApp(i) {
       this.lineCount = i;
       let _index = this.unitJson[this.unitIndex].chapterInfo[0].taskJson[

src/components/pages/components/CodeEditor.vue

@@ -0,0 +1,208 @@
+<template>
+    <div>
+         <el-dialog
+            :title="type == 0 ? '添加HTML' : '修改HTML'"
+            :visible.sync="CodeVisible"
+            :append-to-body="true"
+            width="70%"
+            :before-close="handleClose"
+            class="dialog_diy"
+            >
+            <template v-loading="loading">
+              <el-form>
+                  <el-form-item label="标题">
+                  <el-input
+                      ref="fuInput"
+                      v-model="titCon"
+                      auto-complete="off"
+                      placeholder="请输入标题..."
+                  ></el-input>
+                  </el-form-item>
+                  <!-- <div>代码编辑器</div> -->
+                <ace-editor
+                  v-model="code"
+                  :options="editorOptions"
+                  style="height: 300px; width: 100%;"
+                  ></ace-editor>
+              </el-form>
+              <span slot="footer" class="dialog-footer">
+                  <el-button @click="handleClose">取 消</el-button>
+                  <el-button type="primary" @click="upLoad">确定</el-button>
+              </span>
+            </template>            
+            </el-dialog>
+
+    </div>
+</template>
+
+<script>
+import AceEditor from 'vue2-ace-editor';
+import 'ace-builds/src-noconflict/ace';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/theme-monokai';
+import axios from "axios"
+
+    export default {
+        components: { AceEditor },
+        data(){
+            return {
+                CodeVisible:false,
+                titCon:'',
+                loading:false,
+                type:'',
+                code: '',
+                itemTaskIndex:'',
+                unitIndex:'',
+                index1:'',
+                editorOptions: {
+                    theme: 'ace/theme/monokai',
+                    mode: 'ace/mode/javascript',
+                },
+            }
+        },
+        methods:{
+            upLoad(){
+              if (!this.titCon.trim()) return this.$message.info('请将名称信息补充完整')
+              if (!this.code.trim()) return this.$message.info('请将代码信息补充完整')
+
+              this.loading=true
+              // console.log(this.code)
+              // 创建Blob对象
+            
+              const blob = new Blob([this.code], { type: 'text/html' });
+              const file = new File([blob], `${this.titCon}.html`, {
+                type: 'text/html',
+                lastModified: Date.now() // 使用当前时间戳
+              });
+              this.beforeUpload(file)
+              console.log('file',file);
+            },
+            loadHtmlFile(url) {
+             axios.get(url)
+              .then(response => {
+                console.log('response',response.data);
+
+                this.code = JSON.parse(JSON.stringify( response.data)); // 更新内容
+              })
+              .catch(error => {
+                console.error('加载 HTML 文件时出错:', error);
+              });
+            },
+            beforeUpload(file) {
+              // this.$refs.upload1.uploadFiles;
+              // this.uploadLoading1 = true;
+              // var file = data;
+              var credentials = {
+                accessKeyId: "AKIATLPEDU37QV5CHLMH",
+                secretAccessKey: "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"
+              }; //秘钥形式的登录上传
+              window.AWS.config.update(credentials);
+              window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+              var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+              var _this = this;
+
+              if (file) {
+                var params = {
+                  Key:
+                    file.name.split(".")[0] +
+                    new Date().getTime() +
+                    "." +
+                    file.name.split(".")[file.name.split(".").length - 1],
+                  ContentType: file.type,
+                  Body: file,
+                  "Access-Control-Allow-Credentials": "*",
+                  ACL: "public-read"
+                }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+                var options = {
+                  partSize: 2048 * 1024 * 1024,
+                  queueSize: 2,
+                  leavePartsOnError: true
+                };
+                bucket
+                  .upload(params, options)
+                  .on("httpUploadProgress", function(evt) {
+                    //这里可以写进度条
+                    // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+                  })
+                  .send(function(err, data) {
+                    // _this.uploadLoading1 = false;
+                    if (err) {
+                      // var a = _this.$refs.upload1.uploadFiles;
+                      // a.splice(a.length - 1, a.length);
+                      this.loading=false
+
+                      _this.$message.error("上传失败");
+                    } else {
+                      //上传成功处理
+                      // _this.unitJson[_this.unitIndex].chapterInfo[0].fileList1.push({
+                      //   name: file.name,
+                      //   url: data.Location,
+                      //   uid: file.uid
+                      // });
+                      // _this.imgChange();
+
+                      // console.log('333',_this.titCon,data.Location);
+                      
+                      _this.$emit("success",{Tname:_this.titCon,url:data.Location,type:_this.type,unitIndex:_this.unitIndex,itemTaskIndex:_this.itemTaskIndex,index1:_this.index1})
+                      _this.handleClose()
+                      this.loading=false
+
+                    }
+                  });
+              }
+            },
+            open(type,data, unitIndex,itemTaskIndex,index1){
+                if (type == 1) {
+                  this.titCon = data.name;
+                  this.loadHtmlFile(data.url)
+                }
+                console.log('itemTaskIndex',itemTaskIndex);
+                
+                this.index1=index1
+                this.itemTaskIndex=itemTaskIndex
+                this.unitIndex = unitIndex
+                this.type = type
+                this.CodeVisible = true
+            },
+            handleClose(){
+                this.CodeVisible = false
+                this.loading=false
+                this.code = ''
+                this.type = ''
+                this.titCon = ''
+                this.unitIndex = ''
+                this.index1 = ''
+                this.itemTaskIndex = ''
+            }
+        }
+    }
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog__header {
+  background: #3c3c3c !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+</style>

src/components/pages/easy/addCourse.vue

@@ -481,7 +481,7 @@
                                     class="chapter_upload_l_i2"
                                   ></div>
                                   <div
-                                    v-if="item1.type == 3"
+                                    v-if="item1.type == 3 || item1.type == 16"
                                     class="chapter_upload_l_i3"
                                     style="margin-left: 1px"
                                   ></div>
@@ -519,6 +519,27 @@
                                 </div>
                                 <div class="chapter_upload_n">
                                   <input
+                                    readonly="true"
+                                    v-if="
+                                      item1.type == 16
+                                    "
+                                    :placeholder="item1.name"
+                                    @click="
+                                        openCodeEditor(1,item1, unitIndex,itemTaskIndex, index1)
+                                    "
+                                    style="
+                                    border: none;
+                                    outline: none;
+                                    width: 80%;
+                                    minwidth: 215px;
+                                    z-index: 99;
+                                    font-size: 14px;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                  "
+                                  />
+                                   <input
                                     readonly="true"
                                     v-if="
                                       item1.type == 2 ||
@@ -657,6 +678,17 @@
                                   >
                                     <div></div>
                                   </div>
+                                  <div
+                                    class="chapter_upload_ic_edit"
+                                    v-if="
+                                      item1.type == 16
+                                    "
+                                    @click.stop="
+                                        openCodeEditor(1,item1, unitIndex,itemTaskIndex, index1)
+                                    "
+                                  >
+                                    <div></div>
+                                  </div>
                                   <div
                                     class="chapter_upload_ic_edit"
                                     v-if="item1.type == 6"
@@ -743,6 +775,12 @@
                           >
                             智能应用
                           </button>
+                          <button
+                            class="c_pub_button_add pub_btn_add_img"
+                                @click="openCodeEditor(0,'',unitIndex,0 ,'')"
+                          >
+                            代码编辑器
+                          </button>
                           <!-- <button class="info_btn" @click="addImg($event)">
                               其他附件
                               <input type="file" accept="*" style="display: none" v-if="inputShow" @change="beforeUpload2($event, unitIndex, 12, itemTaskIndex)
@@ -8152,6 +8190,7 @@
       @setEnglishVoiceJson="setEnglishVoiceJson"
     ></EnglishVoice>
     <appDialog ref="appDialog" @success="selectAppSuccess"></appDialog>
+    <CodeEditor ref="CodeEditorRef" @success="addHtmlSuccess"></CodeEditor>
   </div>
 </template>
 
@@ -8172,7 +8211,7 @@ import englishRight from "./commpont/englishRight.vue";
 import EnglishVoice from "../EnglishVoice/index.vue";
 import appDialog from "../components/appDialog.vue";
 import { myMixin } from "@/mixins/mixin.js"
-
+import CodeEditor from "../components/CodeEditor";
 var OpenCC = require("opencc-js");
 let converter = OpenCC.Converter({
   from: "hk",
@@ -8182,6 +8221,7 @@ let converter = OpenCC.Converter({
 export default {
   mixins: [ myMixin ],
   components: {
+    CodeEditor,
     EditorBar,
     Mind,
     Time,
@@ -13927,6 +13967,31 @@ export default {
           });
       });
     },
+    openCodeEditor(type,val, unitIndex,itemTaskIndex = 0,index1){
+      console.log('openCodeEditor',type,val,unitIndex,itemTaskIndex,index1);
+
+      this.$refs.CodeEditorRef.open(type,val, unitIndex,itemTaskIndex, index1)
+    },
+    addHtmlSuccess({Tname,url,type,unitIndex,itemTaskIndex,index1}){
+      console.log('addHtmlSuccess',name,url,'type:',type,'unitIndex',unitIndex,'itemTaskIndex',itemTaskIndex,'index1',index1);
+      if (type == 1) {
+        this.unitJson[unitIndex].chapterInfo[0].taskJson[
+          itemTaskIndex 
+        ].chapterData.splice(index1,1,{
+          name: Tname,
+          url: url,
+          type: 16
+        })
+      }else{
+        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
+          itemTaskIndex 
+        ].chapterData.push({
+          name: Tname,
+          url: url,
+          type: 16
+        });
+      }
+    },
     openAddApp(i) {
       this.lineCount = i;
       let _index = this.unitJson[this.unitIndex].chapterInfo[0].taskJson[

src/components/pages/newCourse/addCourse.vue

@@ -1172,7 +1172,7 @@
                                       class="chapter_upload_l_i2"
                                     ></div>
                                     <div
-                                      v-if="item1.type == 3"
+                                      v-if="item1.type == 3 || item1.type == 16"
                                       class="chapter_upload_l_i3"
                                       style="margin-left: 1px"
                                     ></div>
@@ -1210,6 +1210,27 @@
                                   ></div>
                                   </div>
                                   <div class="chapter_upload_n">
+                                    <input
+                                    readonly="true"
+                                    v-if="
+                                      item1.type == 16
+                                    "
+                                    :placeholder="item1.name"
+                                    @click="
+                                        openCodeEditor(1,item1, unitIndex,itemTaskIndex, index1)
+                                    "
+                                    style="
+                                    border: none;
+                                    outline: none;
+                                    width: 80%;
+                                    minwidth: 215px;
+                                    z-index: 99;
+                                    font-size: 14px;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                  "
+                                  />
                                     <input
                                       readonly="true"
                                       v-if="
@@ -1362,6 +1383,17 @@
                                     >
                                       <div></div>
                                     </div>
+                                    <div
+                                      class="chapter_upload_ic_edit"
+                                      v-if="
+                                        item1.type == 16
+                                      "
+                                      @click.stop="
+                                        openCodeEditor(1,item1, unitIndex,itemTaskIndex, index1)
+                                      "
+                                    >
+                                      <div></div>
+                                    </div>
                                     <div
                                       class="chapter_upload_ic_edit"
                                       v-if="item1.type == 6"
@@ -1459,6 +1491,13 @@
                           >
                             智能应用
                           </button>
+                          
+                           <button
+                            class="c_pub_button_add pub_btn_add_img"
+                                @click="openCodeEditor(0,'',unitIndex,itemTaskIndex ,'')"
+                          >
+                            代码编辑器
+                          </button>
                           </div>
                           <div
                             v-if="
@@ -7450,6 +7489,8 @@
       @setEnglishVoiceJson="setEnglishVoiceJson"
     ></EnglishVoice>
     <appDialog ref="appDialog" @success="selectAppSuccess"></appDialog>
+    <CodeEditor ref="CodeEditorRef" @success="addHtmlSuccess"></CodeEditor>
+
   </div>
 </template>
 
@@ -7472,6 +7513,7 @@ import evaBox from "../evaBox/index.vue";
 import EnglishVoice from "../EnglishVoice/index.vue";
 import appDialog from '../components/appDialog.vue'
 import { myMixin } from "@/mixins/mixin.js"
+import CodeEditor from "../components/CodeEditor";
 
 var OpenCC = require("opencc-js");
 let converter = OpenCC.Converter({
@@ -7482,6 +7524,7 @@ let converter = OpenCC.Converter({
 export default {
   mixins: [ myMixin ],
   components: {
+    CodeEditor,
     EditorBar,
     Mind,
     Time,
@@ -14533,6 +14576,31 @@ export default {
           console.error(err);
         });
     },
+    openCodeEditor(type,val, unitIndex,itemTaskIndex,index1){
+      console.log('openCodeEditor',type,val,unitIndex,itemTaskIndex,index1);
+
+      this.$refs.CodeEditorRef.open(type,val, unitIndex,itemTaskIndex, index1)
+    },
+    addHtmlSuccess({Tname,url,type,unitIndex,itemTaskIndex,index1}){
+      console.log('addHtmlSuccess',name,url,'type:',type,'unitIndex',unitIndex,'itemTaskIndex',itemTaskIndex,'index1',index1);
+      if (type == 1) {
+        this.unitJson[unitIndex].chapterInfo[0].taskJson[
+          itemTaskIndex 
+        ].chapterData.splice(index1,1,{
+          name: Tname,
+          url: url,
+          type: 16
+        })
+      }else{
+        this.unitJson[this.unitIndex].chapterInfo[0].taskJson[
+          itemTaskIndex 
+        ].chapterData.push({
+          name: Tname,
+          url: url,
+          type: 16
+        });
+      }
+    },
     openAddApp(i) {
       this.lineCount = i;
       let _index = this.unitJson[this.unitIndex].chapterInfo[0].taskJson[