vue codemirror 代码编辑器

一、npm安装

npm i codemirror 

二、具体使用

1、依赖引入

import "codemirror/theme/ambiance.css";   //主题

import "codemirror/lib/codemirror.css";

import "codemirror/addon/hint/show-hint.css";

let CodeMirror = require("codemirror/lib/codemirror");

require("codemirror/addon/edit/matchbrackets");

require("codemirror/addon/selection/active-line");

require("codemirror/mode/vue/vue");  //引入语言模式（按需求引入）

require("codemirror/addon/hint/show-hint");

require("codemirror/addon/hint/html-hint");

require("codemirror/addon/hint/javascript-hint");

2、创建textarea

<textarea ref="mycode"></textarea>

3、初始化配置

let editor = CodeMirror.fromTextArea(this.$refs.mycode, {

      mode: "text/vue", //选择对应代码编辑器的语言

      indentWithTabs: true,

      smartIndent: true, //自动缩进是否开启

      lineNumbers: true, //是否使用行号

      //theme: theme, //主题

      //autofocus: true,

      // extraKeys: {

      //   Ctrl: "autocomplete",

      // }, //自定义快捷键

      hintOptions: {

        tables: {

          users: ["name", "score", "birthDate"],

          countries: ["name", "population", "size"],

        },

      }, //自定义提示选项

    });

 三、代码

<template>
  <ul class="codeBox">
    <li>
      <p>
        <button @click="runEvent">运行</button>
      </p>
      <textarea
        ref="mycode"
        class="codesql"
        v-model="code"
        style="height: 200px; width: 600px"
      ></textarea>
    </li>
    <li>
      <p>预览展示</p>
      <iframe class="preview" ref="preview"></iframe>
    </li>
  </ul>
</template>

<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";

let CodeMirror = require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/vue/vue");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/html-hint");
require("codemirror/addon/hint/javascript-hint");
export default {
  name: "codeMirror",
  data() {
    return {
      code: "<!--按Ctrl键进行代码提示-->",
      CodeMirrorEditor: null,
    };
  },
  mounted() {
    let mime = "text/vue";
    let editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      mode: mime, //选择对应代码编辑器的语言
      indentWithTabs: true,
      smartIndent: true, //自动缩进是否开启
      lineNumbers: true, //是否使用行号
      matchBrackets: true,
      //theme: "ambiance", //主题
      //autofocus: true,
      // extraKeys: {
      //   Ctrl: "autocomplete",
      // }, //自定义快捷键
      hintOptions: {
        tables: {
          users: ["name", "score", "birthDate"],
          countries: ["name", "population", "size"],
        },
      }, //自定义提示选项
    });
    //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
    editor.on("cursorActivity", function () {
      editor.showHint();
    });
    this.CodeMirrorEditor = editor;
  },
  methods: {
    //运行
    runEvent() {
      var code = this.CodeMirrorEditor.getValue();
      const iframe = this.$refs.preview;
      const document = iframe.contentDocument;
      document.open();
      document.write(code);
      document.close();
    },
  },
}
</script>

<style lang="less" scope>
.codesql {
  text-align: left;
  font-size: 11pt;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
.CodeMirror {
  text-align: left;
  height: calc(100% - 40px);
}
* {
  padding: 0;
  margin: 0;
}
.codeBox {
  width: 100%;
  height: 300px;
  line-height: 30px;
  li {
    width: 50%;
    display: inline-block;
    border: 1px solid #E1E5F2;
    // background-color: #DCDCDC;
    box-sizing: border-box;
    height: 100%;
    float: left;
    p {
      height: 30px;
      // border-bottom: 1px solid #DCDCDC;
      box-shadow: 5px 5px 5px #DCDCDC;
      margin-bottom: 10px;
    }
    div.preview {
      height: calc(100% - 40px);
    }
  }
}
</style>

四、文档说明 

1、配置项

this.CodeMirrorEditor = CodeMirror.fromTextArea("",{

        value:初始内容
         Mode:设置编译器编程语言关联内容，对应的mine值
        Theme:编译器的主题，需要引入对应的包
        tabSize：tab的空格宽度
        lineNumbers：是否使用行号
        smartIndent：自动缩进是否开启
        indentUnit：缩进单位
        keyMap：快捷键

});//两个参数：第一个参数表示textarea；第二个参数为按需配置对象；

2、方法

 this.CodeMirrorEditor.setValue("Hello Kitty"); //设置编辑器内容

      this.CodeMirrorEditor.getValue(); //获取编辑器内容

      // this.CodeMirrorEditor.getLine(n); //获取第n行的内容

      this.CodeMirrorEditor.lineCount(); //获取当前行数

      this.CodeMirrorEditor.lastLine(); //获取最后一行的行号

      this.CodeMirrorEditor.isClean(); //boolean类型判断编译器是否是clean的

      this.CodeMirrorEditor.getSelection(); //获取选中内容

      this.CodeMirrorEditor.getSelections(); //返回array类型选中内容

      this.CodeMirrorEditor.replaceSelection("替换后的内容"); //替换选中的内容

      this.CodeMirrorEditor.getCursor(); //获取光标位置,返回{line,char}

      this.CodeMirrorEditor.setOption("", ""); //设置编译器属性

      this.CodeMirrorEditor.getOption(""); //获取编译器属性

      this.CodeMirrorEditor.addKeyMap("", ""); //添加key-map键值，该键值具有比原来键值更高的优先级

      this.CodeMirrorEditor.removeKeyMap(""); //移除key-map

      this.CodeMirrorEditor.addOverlay(""); //Enable a highlighting overlay…没试出效果

      this.CodeMirrorEditor.removeOverlay(""); //移除Overlay

      // this.CodeMirrorEditor.setSize(width,height); //设置编译器大小

      // this.CodeMirrorEditor.scrollTo(x,y); //设置scroll到position位置

      this.CodeMirrorEditor.refresh(); //刷新编辑器

      this.CodeMirrorEditor.execCommand("命令"); //执行命令

标签：CodeMirrorEditor,vue,hint,true,require,编辑器,codemirror,addon
来源： https://blog.csdn.net/qq_42181155/article/details/121253626