vue中使用codemirror实现在线编辑及预览代码

vue中使用codemirror实现在线编辑及预览代码

问题

• 先说使用过程中遇到的问题吧
• 问题：在vue中用v-for遍历vue-codemirro发现页面加载完了代码块不出来，需要点击下才能出来,而单独使用就没问题。
• 解决方法：在配置了配置了autoRrefsh:true 和line:true，还是没效果。于是乎想到了手动刷新…

  showExpansion(index) {
      if (this.$refs.codemirror[index]) {
        this.$refs.codemirror[index].refresh();
      }
   },

使用

• 具体主题等配置详见codemirror官网
• npm install vue-codemirror
• 具备在线编辑、语法高亮、搜索、代码块折叠、只读预览、格式化代码、撤销、重置、重做、复制等功能。

<template>
  <q-dialog
    v-model="codeVisible"
    persistent
    :maximized="true"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card>
      <q-card-section class="q-pa-none">
        <q-bar class="bg-primary">
          <q-btn
            dense
            flat
            icon="restore"
            size="md"
            class="text-white"
            @click="resetCode"
          >
            <q-tooltip>重置</q-tooltip>
          </q-btn>
          <q-btn
            dense
            flat
            icon="undo"
            size="md"
            class="text-white"
            @click="undoCode"
          >
            <q-tooltip>撤销</q-tooltip>
          </q-btn>
          <q-btn
            dense
            flat
            icon="redo"
            size="md"
            class="text-white"
            @click="redoCode"
          >
            <q-tooltip>重做</q-tooltip>
          </q-btn>
          <q-btn
            dense
            flat
            icon="search"
            size="md"
            class="text-white"
            @click="searchCode"
          >
            <q-tooltip>搜索</q-tooltip>
          </q-btn>
          <q-btn
            dense
            flat
            icon="code"
            size="md"
            class="text-white"
            @click="formatCode"
          >
            <q-tooltip>格式化代码</q-tooltip>
          </q-btn>
          <q-btn
            id="copyCode"
            dense
            flat
            icon="copy_all"
            size="md"
            class="text-white"
            :data-clipboard-text="code"
            @click="copyCode"
          >
            <q-tooltip>全部复制</q-tooltip>
          </q-btn>
          <q-space />
          <q-btn
            v-close-popup
            dense
            flat
            icon="close"
            size="md"
            class="text-white"
            @click="saveCode"
          >
            <q-tooltip>保存且关闭</q-tooltip>
          </q-btn>
        </q-bar>
      </q-card-section>
      <q-card-section class="q-pa-none dialog-codeMirror">
        <codemirror
          ref="codemirror"
          v-model="code"
          :options="codemirrorOptions"
          @copy="copyCode"
        ></codemirror>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { codemirror } from "vue-codemirror";
import ClipboardJS from "clipboard";
// eslint-disable-next-line camelcase
import { js_beautify } from "js-beautify";
import "codemirror/lib/codemirror.css";
import "codemirror/keymap/sublime";
import "codemirror/theme/eclipse.css";
import "codemirror/mode/javascript/javascript.js";

import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/selection/active-line";
import "codemirror/addon/scroll/annotatescrollbar.js";

import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/lint/javascript-lint.js";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
// 搜索
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/match-highlighter.js";
import "codemirror/addon/search/jump-to-line.js";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";

// 折叠
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/comment-fold";

export default {
  name: "CodeEditor",
  components: {
    codemirror,
  },
  props: {
    value: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      code: this.value,
      codeVisible: false,
      codemirrorOptions: {
        tabSize: 2, // tab的空格个数,默认为4
        theme: "eclipse", // 主题样式
        lineNumbers: true, // 是否显示行数
        lineWrapping: true, // 是否自动换行
        styleActiveLine: true, // line选择是是否加亮
        matchBrackets: true, // 括号匹配
        mode: "javascript", // 实现javascript代码高亮
        readOnly: false, // 是否只读
        foldGutter: true,
        lint: true,
        gutters: [
          "CodeMirror-linenumbers",
          "CodeMirror-foldgutter",
          "CodeMirror-lint-markers",
        ],
      },
    };
  },
  methods: {
    resetCode() {
      this.$refs.codemirror.codemirror.setValue(this.value);
    },
    undoCode() {
      this.$refs.codemirror.codemirror.execCommand("undo");
    },
    redoCode() {
      this.$refs.codemirror.codemirror.execCommand("redo");
    },
    searchCode() {
      this.$refs.codemirror.codemirror.execCommand("find");
    },
    formatCode() {
      const code = this.$refs.codemirror.codemirror.getValue();
      this.$refs.codemirror.codemirror.setValue(js_beautify(code));
    },
    copyCode() {
      const clipboard = new ClipboardJS("#copyCode");
      clipboard.on("success", (e) => {
        this.$q.notify({
          caption: "代码已复制到剪切板，可粘贴",
          message: "操作成功",
          type: "positive",
        });
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        this.$q.notify({
          message: "代码复制失败",
          type: "negative",
        });
        clipboard.destroy();
      });
    },
    saveCode() {
      this.$emit("input", this.code);
    },
  },
};
</script>

<style scoped></style>