标签：CodeMirrorEditor vue hint true require 编辑器 codemirror addon

一、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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。