配置代码编辑依赖

heimawl

2023-06-26 12cf420ba7b6f85ebd7883fa799df5d8b5cd0ecf

配置代码编辑依赖

 package.json

@@ -39,6 +39,7 @@
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.24.0",
    "clipboard": "2.0.8",
    "codemirror": "^5.65.13",
    "core-js": "^3.25.3",
    "cos-js-sdk-v5": "^1.4.18",
    "dayjs": "^1.11.7",
@@ -60,6 +61,7 @@
    "sortablejs": "1.10.2",
    "vue": "2.6.12",
    "vue-cli": "^2.9.6",
    "vue-codemirror": "^4.0.6",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
    "vue-meta": "2.4.0",

 src/main.js

@@ -20,7 +20,14 @@
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 Vue.use(VueQuillEditor);
 // å¼•å…¥
import { codemirror } from "vue-codemirror";
import "@/utils/cm-setting.js";
Vue.component("codemirror", codemirror);
//  import VueCodeMirror from 'vue-codemirror'
//  import 'vue-codemirror/dist/codemirror.css'
//  Vue.use(VueCodeMirror)

 //实现quill-editor编辑器拖拽上传图片
//  import Quill from 'quill'

 src/utils/cm-setting.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
// cm-setting.js
// ç»„件样式
import "codemirror/lib/codemirror.css";
// ä¸»é¢˜
import "codemirror/theme/3024-day.css"; // å¼•å…¥ä¸»é¢˜æ ·å¼ï¼Œæ ¹æ®è®¾ç½®çš„theme的主题引入
import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/monokai.css";
import 'codemirror/theme/rubyblue.css'
// html代码高亮
import "codemirror/mode/htmlmixed/htmlmixed.js"; 
// è¯­è¨€æ¨¡å¼
import 'codemirror/mode/javascript/javascript.js'


 src/views/Intelligentcenter/centercontrol/index.vue

@@ -76,16 +76,37 @@
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="leftvalu-code">
        <codemirror v-model="code" :options="options"></codemirror>
      </div>
    </div>
  </div>
</template>

<script>
// import { codemirror } from "vue-codemirror";
export default {
  name: "education",

  data() {
    return {
      code: "",
      options: {
        line: true,
        theme: "rubyblue", // ä¸»é¢˜
        tabSize: 4, // åˆ¶è¡¨ç¬¦çš„宽度
        indentUnit: 2, // ä¸€ä¸ªå—应该缩进多少个空格（无论这在编辑语言中意味着什么）。默认值为 2。
        firstLineNumber: 1, // ä»Žå“ªä¸ªæ•°å­—开始计算行数。默认值为 1。
        readOnly: false, // åªè¯»
        autorefresh: true,
        smartIndent: true, // ä¸Šä¸‹æ–‡ç¼©è¿›
        lineNumbers: true, // æ˜¯å¦æ˜¾ç¤ºè¡Œå·
        styleActiveLine: true, // é«˜äº®é€‰ä¸­è¡Œ
        viewportMargin: Infinity, //处理高度自适应时搭配使用
        showCursorWhenSelecting: true, // å½“选择处于活动状态时是否应绘制游标
        mode: "javascript",
      },

      editableTabsValue: "2-2-3",
      editableTabslist: [
        {
@@ -183,6 +204,17 @@
.educationmanagement {
  display: flex;
}
.leftvalu-code {
  // background: #3a3d42;
  // height: 300px;
  // ::v-deep.CodeMirror {
  //   position: relative;
  //   overflow: hidden;
  //   background: #3a3d42;
  //   color: #3a92ef;
  //   font-size: 20px;
  // }
}
.sidecolumn {
  width: 300px;
  min-height: 100vh;
@@ -219,6 +251,7 @@
    display: center !important;
  }
}

.qrcode-dialo {
  text-align: center;
  //   display: flex;