1. 全栈程序员必看首页

vue3 codemirror_mirror代码

全栈程序员-站长 • • 未分类 • 阅读 72

vue3 codemirror_mirror代码前言如果我们想在Web端实现在线代码编译的效果，那么需要使用组件vue-codemirror，他是将CodeMirror进行了再次封装支持代码高亮62种主题颜色，例如monokai等等支持js

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

如果我们想在Web端实现在线代码编译的效果，那么需要使用组件vue-codemirror，他是将CodeMirror进行了再次封装

  • 支持代码高亮
  • 62种主题颜色，例如monokai等等
  • 支持json, sql, javascript，css，xml, html，yaml, markdown, python编辑模式，默认为 json
  • 支持快速搜索
  • 支持自动补全提示
  • 支持自动匹配括号
     

环境准备

npm install jshint
npm install jsonlint
npm install script-loader
npm install vue-codemirror

 

封装组件

我们可以在项目中的components中将vue-codemirror进行再次封装

<template>
  <codemirror
    ref="myCm"
    v-model="editorValue"
    :options="cmOptions"
    @changes="onCmCodeChanges"
    @blur="onCmBlur"
    @keydown.native="onKeyDown"
    @mousedown.native="onMouseDown"
    @paste.native="OnPaste"
  >
  </codemirror>
</template>

<script>
import { codemirror } from "vue-codemirror";
import 'codemirror/keymap/sublime'
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "codemirror/mode/css/css.js";
import "codemirror/mode/yaml/yaml.js";
import "codemirror/mode/sql/sql.js";
import "codemirror/mode/python/python.js";
import "codemirror/mode/markdown/markdown.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/hint/xml-hint.js";
import "codemirror/addon/hint/css-hint.js";
import "codemirror/addon/hint/html-hint.js";
import "codemirror/addon/hint/sql-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/lint.js";
import "codemirror/addon/lint/json-lint";
import 'codemirror/addon/selection/active-line'
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
require("script-loader!jsonlint");
import "codemirror/addon/lint/javascript-lint.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/edit/closebrackets.js";
import "codemirror/addon/edit/closetag.js";
import "codemirror/addon/edit/matchtags.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/selection/active-line.js";
import "codemirror/addon/search/jump-to-line.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/addon/display/autorefresh.js";
import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/search/match-highlighter.js";
export default {
  name: "index",
  components: {codemirror},
  props: ["cmTheme", "cmMode", "cmIndentUnit", "autoFormatJson"],
  data() {
    return {
      editorValue: '{}',
      cmOptions: {
        theme: !this.cmTheme || this.cmTheme === "default" ? "default" : this.cmTheme,  // 主题
        mode: !this.cmMode || this.cmMode === "default" ? "application/json" : this.cmMode,  // 代码格式
        tabSize: 4,  // tab的空格个数
        indentUnit: !this.cmIndentUnit ? 2 : this.cmIndentUnit,  // 一个块（编辑语言中的含义）应缩进多少个空格
        autocorrect: true,  // 自动更正
        spellcheck: true,  // 拼写检查
        lint: true,  // 检查格式
        lineNumbers: true,  //是否显示行数
        lineWrapping: true, //是否自动换行
        styleActiveLine: true,  //line选择是是否高亮
        keyMap: 'sublime',  // sublime编辑器效果
        matchBrackets: true,  //括号匹配
        autoCloseBrackets: true,  // 在键入时将自动关闭括号和引号
        matchTags: { bothTags: true },  // 将突出显示光标周围的标签
        foldGutter: true,  // 可将对象折叠，与下面的gutters一起使用
        gutters: [
          "CodeMirror-lint-markers",
          "CodeMirror-linenumbers",
          "CodeMirror-foldgutter"
        ],
        highlightSelectionMatches: {
          minChars: 2,
          style: "matchhighlight",
          showToken: true
        },
      },
      enableAutoFormatJson: this.autoFormatJson == null ? true : this.autoFormatJson,  // json编辑模式下，输入框失去焦点时是否自动格式化，true 开启， false 关闭
    }
  },
  created() {
    try {
      if (!this.editorValue) {
        this.cmOptions.lint = false;
        return;
      }
      if (this.cmOptions.mode === "application/json") {
        if (!this.enableAutoFormatJson) {
          return;
        }
        this.editorValue = this.formatStrInJson(this.editorValue);
      }
    } catch (e) {
      console.log("初始化codemirror出错：" + e);
    }
  },
  methods: {
    resetLint() {
      if (!this.$refs.myCm.codemirror.getValue()) {
        this.$nextTick(() => {
          this.$refs.myCm.codemirror.setOption("lint", false);
        });
        return;
      }
      this.$refs.myCm.codemirror.setOption("lint", false);
      this.$nextTick(() => {
        this.$refs.myCm.codemirror.setOption("lint", true);
      });
    },
    // 格式化字符串为json格式字符串
    formatStrInJson(strValue) {
      return JSON.stringify(
        JSON.parse(strValue),
        null,
        this.cmIndentUnit
      );
    },
    onCmCodeChanges(cm, changes) {
      this.editorValue = cm.getValue();
      this.resetLint();
    },
    // 失去焦点时处理函数
    onCmBlur(cm, event) {
      try {
        let editorValue = cm.getValue();
        if (this.cmOptions.mode === "application/json" && editorValue) {
          if (!this.enableAutoFormatJson) {
            return;
          }
          this.editorValue = this.formatStrInJson(editorValue);
        }
      } catch (e) {
        // 啥也不做
      }
    },
    // 按下键盘事件处理函数
    onKeyDown(event) {
      const keyCode = event.keyCode || event.which || event.charCode;
      const keyCombination =
          event.ctrlKey || event.altKey || event.metaKey;
      if (!keyCombination && keyCode > 64 && keyCode < 123) {
        this.$refs.myCm.codemirror.showHint({ completeSingle: false });
      }
    },
    // 按下鼠标时事件处理函数
    onMouseDown(event) {
      this.$refs.myCm.codemirror.closeHint();
    },
    // 黏贴事件处理函数
    OnPaste(event) {
      if (this.cmOptions.mode === "application/json") {
        try {
          this.editorValue = this.formatStrInJson(this.editorValue);
        } catch (e) {
          // 啥都不做
        }
      }
    },
  }
}
</script>

<style scoped>

</style>

此组件默认配置了json编译器，cmOptions中是代码编译器的配置项，需要额外的功能也可以去看官方文档配置
接下来看展示效果
vue3 codemirror_mirror代码
可以看到我们输入了json格式的字符串，即使格式不正确，会给我们错误提示，并且也会给我们自动格式化
 

python编译器

我们封装的组件默认是json编译器，如果我们想使用其他语言，也很简单，只需要导入其他语言的mode

<template>
  <div>
    <el-button type="primary" icon="el-icon-circle-check-outline" @click="handleConfirm" round>
      点击保存
    </el-button>
    <el-button icon="el-icon-caret-right" type="info" @click="handleRunCode" round>
      在线运行
    </el-button>
  <code-editor
    :cmTheme="cmTheme"
    :cmMode="cmMode"
  >
  </code-editor>
  </div>
</template>

<script>
import codeEditor from '@/components/CodeEditor/index'
import 'codemirror/theme/monokai.css'  // 导入monokai主题
import 'codemirror/mode/python/python.js'  // 导入python
export default {
  name: "index",
  components: {
    codeEditor
  },
  data() {
    return {
      cmTheme: "monokai",
      cmMode: "python",
    }
  },
  methods: {
    handleConfirm() {},
    handleRunCode() {}
  }
}
</script>

<style>
.CodeMirror {
  position: relative;
  height: 100vh;
  overflow: hidden;
  margin-top: 10px;
}
</style>
<style lang="scss" scoped>
</style>

效果如下
vue3 codemirror_mirror代码

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/165346.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2022年7月31日 下午6:36
下一篇 2022年7月31日 下午6:36


相关推荐

  • label换行问题

    label换行问题

    label换行问题1 单行完全显示 Label AutoSize true 2 换行显示 Label AutoSize false Label 框高度用户指定 3 多行显示 并且根据字数自动控制高度 Label AutoSize true Label MaximumSize newSize w 0 注 w 用户设定的宽度

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月17日
    1
  • Shell脚本基础详解

    Shell脚本基础详解

    Shell脚本基础详解

    全栈程序员-站长的头像 全栈程序员-站长
    2021年6月4日
    126
  • 记念刘和珍君是什么文体_纪念原版

    记念刘和珍君是什么文体_纪念原版

    记念刘和珍君是什么文体_纪念原版转载自Tony2009年12月15日19:48阅读(6)评论(0)分类：休闲搞笑权限:公开刚和蘑菇头在安中楼楼下聊天，忽闻VeryCD被封的消息，网上骂声一片，满腔愤慨无处发泄，遂成此文。鲁迅先生先知，如今中国的种种奇景，先生几十年前便已洞悉一切。———————————————…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月10日
    13
  • 知识图谱构建举例

    知识图谱构建举例

    知识图谱构建举例笔者在去年的时候 给出了利用深度学习来构建知识图谱的一次尝试 文章为 利用关系抽取构建知识图谱的一次尝试 本文将会更出更多的例子 也是笔者近一个星期的忙碌结果 下面为知识图谱构建的例子 由笔者原创 是从新闻或者小说中直接抽取而来 加上大量时间的人工整理而得到 下面的图片是从 Neo4J 导出并截图 例子 1 平凡的世界 实体关系图 局部 例子 2 白鹿原 实体关系图 局部

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月16日
    2
  • ActiveMq和RabbitMq区别及其解析

    ActiveMq和RabbitMq区别及其解析

    ActiveMq和RabbitMq区别及其解析1 ActiveMq 传统的消息队列 使用 Java 语言编写 基于 JMS JavaMessageS 采用多线程并发 资源消耗比较大 支持 P2P 和发布订阅两种模式 2 RabbitMQ 基于 AMQP 协议实现 支持多种场景 社区活跃量大 高性能 高可用 支持海量数据 两者区别在于 JMS 和 AMQP 此图取自别处 JMS 提供了两种消息模型 peer 2 peer 点对点 以及

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月19日
    2
  • ActionList中Action的快捷鍵

    ActionList中Action的快捷鍵

    ActionList中Action的快捷鍵nbsp 本文的目的是說明 這里的快捷鍵是如何被觸發的 nbsp nbsp nbsp nbsp nbsp 從控件自身來看 快捷鍵的進入點是在 TWincontrol IsMenuKey 在分析 IsMenuKey 之前 我們先看一下 IsMenuKey 是哪里被調用的 nbsp nbsp nbsp nbsp 搜索 Controls Pas 可以發現 他是在 CNKeyDown 事件里被觸發的 如下 Line13 varMask Integer b

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月26日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号