耀极客论坛

 找回密码
 立即注册
查看: 702|回复: 0

vue codemirror实现在线代码编译器效果

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-7 01:31:52 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了vue-codemirror实现在线代码编译器 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
前言
  如果我们想在Web端实现在线代码编译的效果,那么需要使用组件vue-codemirror,他是将CodeMirror进行了再次封装
       
  • 支持代码高亮   
  • 62种主题颜色,例如monokai等等   
  • 支持json, sql, javascript,css,xml, html,yaml, markdown, python编辑模式,默认为 json   
  • 支持快速搜索   
  • 支持自动补全提示   
  • 支持自动匹配括号
环境准备
  1. npm install jshint
  2. npm install jsonlint
  3. npm install script-loader
  4. npm install vue-codemirror
复制代码
封装组件
  我们可以在项目中的components中将vue-codemirror进行再次封装
  1. ‹template>
  2.   ‹codemirror
  3.     ref="myCm"
  4.     v-model="editorValue"
  5.     :options="cmOptions"
  6.     @changes="onCmCodeChanges"
  7.     @blur="onCmBlur"
  8.     @keydown.native="onKeyDown"
  9.     @mousedown.native="onMouseDown"
  10.     @paste.native="OnPaste"
  11.   >
  12.   ‹/codemirror>
  13. ‹/template>
  14. ‹script>
  15. import { codemirror } from "vue-codemirror";
  16. import 'codemirror/keymap/sublime'
  17. import "codemirror/mode/javascript/javascript.js";
  18. import "codemirror/mode/xml/xml.js";
  19. import "codemirror/mode/htmlmixed/htmlmixed.js";
  20. import "codemirror/mode/css/css.js";
  21. import "codemirror/mode/yaml/yaml.js";
  22. import "codemirror/mode/sql/sql.js";
  23. import "codemirror/mode/python/python.js";
  24. import "codemirror/mode/markdown/markdown.js";
  25. import "codemirror/addon/hint/show-hint.css";
  26. import "codemirror/addon/hint/show-hint.js";
  27. import "codemirror/addon/hint/javascript-hint.js";
  28. import "codemirror/addon/hint/xml-hint.js";
  29. import "codemirror/addon/hint/css-hint.js";
  30. import "codemirror/addon/hint/html-hint.js";
  31. import "codemirror/addon/hint/sql-hint.js";
  32. import "codemirror/addon/hint/anyword-hint.js";
  33. import "codemirror/addon/lint/lint.css";
  34. import "codemirror/addon/lint/lint.js";
  35. import "codemirror/addon/lint/json-lint";
  36. import 'codemirror/addon/selection/active-line'
  37. import "codemirror/addon/hint/show-hint.js";
  38. import "codemirror/addon/hint/anyword-hint.js";
  39. require("script-loader!jsonlint");
  40. import "codemirror/addon/lint/javascript-lint.js";
  41. import "codemirror/addon/fold/foldcode.js";
  42. import "codemirror/addon/fold/foldgutter.js";
  43. import "codemirror/addon/fold/foldgutter.css";
  44. import "codemirror/addon/fold/brace-fold.js";
  45. import "codemirror/addon/fold/xml-fold.js";
  46. import "codemirror/addon/fold/comment-fold.js";
  47. import "codemirror/addon/fold/markdown-fold.js";
  48. import "codemirror/addon/fold/indent-fold.js";
  49. import "codemirror/addon/edit/closebrackets.js";
  50. import "codemirror/addon/edit/closetag.js";
  51. import "codemirror/addon/edit/matchtags.js";
  52. import "codemirror/addon/edit/matchbrackets.js";
  53. import "codemirror/addon/selection/active-line.js";
  54. import "codemirror/addon/search/jump-to-line.js";
  55. import "codemirror/addon/dialog/dialog.js";
  56. import "codemirror/addon/dialog/dialog.css";
  57. import "codemirror/addon/search/searchcursor.js";
  58. import "codemirror/addon/search/search.js";
  59. import "codemirror/addon/display/autorefresh.js";
  60. import "codemirror/addon/selection/mark-selection.js";
  61. import "codemirror/addon/search/match-highlighter.js";
  62. export default {
  63.   name: "index",
  64.   components: {codemirror},
  65.   props: ["cmTheme", "cmMode", "cmIndentUnit", "autoFormatJson"],
  66.   data() {
  67.     return {
  68.       editorValue: '{}',
  69.       cmOptions: {
  70.         theme: !this.cmTheme || this.cmTheme === "default" ? "default" : this.cmTheme,  // 主题
  71.         mode: !this.cmMode || this.cmMode === "default" ? "application/json" : this.cmMode,  // 代码格式
  72.         tabSize: 4,  // tab的空格个数
  73.         indentUnit: !this.cmIndentUnit ? 2 : this.cmIndentUnit,  // 一个块(编辑语言中的含义)应缩进多少个空格
  74.         autocorrect: true,  // 自动更正
  75.         spellcheck: true,  // 拼写检查
  76.         lint: true,  // 检查格式
  77.         lineNumbers: true,  //是否显示行数
  78.         lineWrapping: true, //是否自动换行
  79.         styleActiveLine: true,  //line选择是是否高亮
  80.         keyMap: 'sublime',  // sublime编辑器效果
  81.         matchBrackets: true,  //括号匹配
  82.         autoCloseBrackets: true,  // 在键入时将自动关闭括号和引号
  83.         matchTags: { bothTags: true },  // 将突出显示光标周围的标签
  84.         foldGutter: true,  // 可将对象折叠,与下面的gutters一起使用
  85.         gutters: [
  86.           "CodeMirror-lint-markers",
  87.           "CodeMirror-linenumbers",
  88.           "CodeMirror-foldgutter"
  89.         ],
  90.         highlightSelectionMatches: {
  91.           minChars: 2,
  92.           style: "matchhighlight",
  93.           showToken: true
  94.         },
  95.       },
  96.       enableAutoFormatJson: this.autoFormatJson == null ? true : this.autoFormatJson,  // json编辑模式下,输入框失去焦点时是否自动格式化,true 开启, false 关闭
  97.     }
  98.   },
  99.   created() {
  100.     try {
  101.       if (!this.editorValue) {
  102.         this.cmOptions.lint = false;
  103.         return;
  104.       }
  105.       if (this.cmOptions.mode === "application/json") {
  106.         if (!this.enableAutoFormatJson) {
  107.           return;
  108.         }
  109.         this.editorValue = this.formatStrInJson(this.editorValue);
  110.       }
  111.     } catch (e) {
  112.       console.log("初始化codemirror出错:" + e);
  113.     }
  114.   },
  115.   methods: {
  116.     resetLint() {
  117.       if (!this.$refs.myCm.codemirror.getValue()) {
  118.         this.$nextTick(() => {
  119.           this.$refs.myCm.codemirror.setOption("lint", false);
  120.         });
  121.         return;
  122.       }
  123.       this.$refs.myCm.codemirror.setOption("lint", false);
  124.       this.$nextTick(() => {
  125.         this.$refs.myCm.codemirror.setOption("lint", true);
  126.       });
  127.     },
  128.     // 格式化字符串为json格式字符串
  129.     formatStrInJson(strValue) {
  130.       return JSON.stringify(
  131.         JSON.parse(strValue),
  132.         null,
  133.         this.cmIndentUnit
  134.       );
  135.     },
  136.     onCmCodeChanges(cm, changes) {
  137.       this.editorValue = cm.getValue();
  138.       this.resetLint();
  139.     },
  140.     // 失去焦点时处理函数
  141.     onCmBlur(cm, event) {
  142.       try {
  143.         let editorValue = cm.getValue();
  144.         if (this.cmOptions.mode === "application/json" && editorValue) {
  145.           if (!this.enableAutoFormatJson) {
  146.             return;
  147.           }
  148.           this.editorValue = this.formatStrInJson(editorValue);
  149.         }
  150.       } catch (e) {
  151.         // 啥也不做
  152.       }
  153.     },
  154.     // 按下键盘事件处理函数
  155.     onKeyDown(event) {
  156.       const keyCode = event.keyCode || event.which || event.charCode;
  157.       const keyCombination =
  158.           event.ctrlKey || event.altKey || event.metaKey;
  159.       if (!keyCombination && keyCode > 64 && keyCode ‹ 123) {
  160.         this.$refs.myCm.codemirror.showHint({ completeSingle: false });
  161.       }
  162.     },
  163.     // 按下鼠标时事件处理函数
  164.     onMouseDown(event) {
  165.       this.$refs.myCm.codemirror.closeHint();
  166.     },
  167.     // 黏贴事件处理函数
  168.     OnPaste(event) {
  169.       if (this.cmOptions.mode === "application/json") {
  170.         try {
  171.           this.editorValue = this.formatStrInJson(this.editorValue);
  172.         } catch (e) {
  173.           // 啥都不做
  174.         }
  175.       }
  176.     },
  177.   }
  178. }
  179. ‹/script>
  180. ‹style scoped>
  181. ‹/style>
复制代码
  此组件默认配置了json编译器,cmOptions中是代码编译器的配置项,需要额外的功能也可以去看官方文档配置
接下来看展示效果

  可以看到我们输入了json格式的字符串,即使格式不正确,会给我们错误提示,并且也会给我们自动格式化
python编译器
  我们封装的组件默认是json编译器,如果我们想使用其他语言,也很简单,只需要导入其他语言的mode
  1. ‹template>
  2.   ‹div>
  3.     ‹el-button type="primary" icon="el-icon-circle-check-outline" @click="handleConfirm" round>
  4.       点击保存
  5.     ‹/el-button>
  6.     ‹el-button icon="el-icon-caret-right" type="info" @click="handleRunCode" round>
  7.       在线运行
  8.     ‹/el-button>
  9.   ‹code-editor
  10.     :cmTheme="cmTheme"
  11.     :cmMode="cmMode"
  12.   >
  13.   ‹/code-editor>
  14.   ‹/div>
  15. ‹/template>
  16. ‹script>
  17. import codeEditor from '@/components/CodeEditor/index'
  18. import 'codemirror/theme/monokai.css'  // 导入monokai主题
  19. import 'codemirror/mode/python/python.js'  // 导入python
  20. export default {
  21.   name: "index",
  22.   components: {
  23.     codeEditor
  24.   },
  25.   data() {
  26.     return {
  27.       cmTheme: "monokai",
  28.       cmMode: "python",
  29.     }
  30.   },
  31.   methods: {
  32.     handleConfirm() {},
  33.     handleRunCode() {}
  34.   }
  35. }
  36. ‹/script>
  37. ‹style>
  38. .CodeMirror {
  39.   position: relative;
  40.   height: 100vh;
  41.   overflow: hidden;
  42.   margin-top: 10px;
  43. }
  44. ‹/style>
  45. ‹style lang="scss" scoped>
  46. ‹/style>
复制代码
  效果如下

  到此这篇关于vue codemirror实现在线代码编译器 的文章就介绍到这了,更多相关vue codemirror在线代码编译器 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:02 , Processed in 0.085032 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表