首页 > 其他分享 ># vue 使用代码编辑器插件 vue-codemirror

# vue 使用代码编辑器插件 vue-codemirror

时间:2024-07-19 10:57:21浏览次数:12  
标签:插件 vue codemirror fold import true addon

vue 使用代码编辑器插件 vue-codemirror

之前用过一次,当时用的一知半解的,所以也没有成文,前几天又因为项目有需求,所以说有用了一次,当然,依旧是一知半解,但是还是稍微写一下子吧!万一以后用到,不用满网找资料了,个人学习记录,仅供参考,切勿尽信!

vue-codemirror 说明

首先我的项目是 vue2 版本的,vue codemirror v5/v6已经发布。这是一个基于以下内容的新版本CodeMirror@6并且仅对Vue3可用。自从CodeMirror@6新版本将不再支持直接浏览器引用UMD模块。简而言之,新版本是与之前的版本完全不兼容。如果您希望继续使用Vue2或更低版本的CodeMirror。

任意门

vue-codemirror Github 地址: https://github.com/surmon-china/vue-codemirror
codemirror 中文文档:https://olindk.gitbooks.io/codemirror/content/configuration.html
codemirror 英文文档:https://codemirror.net/doc/manual.html#config

vue-codemirror 安装

因为最新版本已经不支持 vue2 了,所以我不能安装最细版本的,只能指定支持 vue2 版本的插件,因此,安装下面两个插件,必须两个都安装哈,不能只安装一个嗷!

npm i [email protected] --save

npm i [email protected] --save 

vue-codemirror 使用

具体根据上面提供的官方文档去看哈,我这就不展开说了,我就简单贴一下我的代码哈;

首先在需要代码编辑器的组件里面引入插件:

import { codemirror } from 'vue-codemirror'

components: {
  codemirror
},

然后在 HTML 部分使用一下:

<codemirror v-model="code" @ready="onCmReady" :style="codemirrorStyle" :options="cmOptions"></codemirror>

其中 v-model 就是你要绑定编辑的代码;@ready 绑定了一个函数,目的是在完成之后添加一个事件,用来代码提示用;style 绑定的是这个编辑器的样式,比如字体样式、字体大小之类的;options 很重要,是对编辑器的配置信息;

再一个就是引入一下必要的文件,我用到了这一些,一些样式,代码校验啥的:

import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/lint/javascript-lint'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/theme/base16-dark.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'
import 'codemirror/addon/fold/markdown-fold'
import 'codemirror/addon/fold/xml-fold'
import 'codemirror/addon/fold/indent-fold'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/xml-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/anyword-hint'
import 'codemirror/addon/search/match-highlighter'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/edit/closebrackets'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/vue/vue.js'

然后再 data 里面创建一下必要参数:

	  code: '',
      cmOptions: {
        mode: 'text/javascript',
        gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        lineNumbers: true,
        line: true,
        lint: true,
        lineWrapping: true,
        autofocus: true,
        autoCloseBrackets: true,
        foldGutter: true, // 块槽
        hintOptions: { completeSingle: true },
        matchTags: { bothTags: true },
        matchBrackets: true,
        showCursorWhenSelecting: true,
        styleSelectedText: true,
        styleActiveLine: true,
        autoRefresh: true,
        highlightSelectionMatches: {
          minChars: 2,
          trim: true,
          style: "matchhighlight",
          showToken: false
        },
      },
      codemirrorStyle: {
        fontSize: '18px',
        lineHeight: '150%',
        height: '450px',
        border: '1px solid #EBEEF5'
      }

其中在 option 绑定数据里面的 mode: 'text/javascript', 表示当前编辑器,解析的是 JavaScript 代码,这个很重要。

然后就是代码校验需要使用几个包,可能需要单独安装一下:

# 校验json相关
npm install jsonlint file system

# 校验js相关
npm install jshint

安装完成之后呢,把他们引入并且挂载 window 上面就行,他会自己找到使用:

import jsonlint from 'jsonlint'
import { JSHINT } from 'jshint'

window.JSHINT = JSHINT
window.jsonlint = jsonlint

最后就是代码提示,比如 js 的代码提示是吧!

    onCmReady(cm) {
      cm.on("inputRead", (cm, obj) => {
        if (obj.text && obj.text.length > 0) {
          let c = obj.text[0].charAt(obj.text[0].length - 1)
          if ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')) {
            cm.showHint({ completeSingle:false }) // 自动填充关闭了它
          }
        }
      })
    },

但是代码提示框的层级可能会比较低,被其他元素盖住,可以提升一下层级:

<style>
.CodeMirror-hints {
  z-index: 30000!important;  // 其实也不用这么大啦!
}
</style>

然后就完事了!看一下效果:

在这里插入图片描述

其他

这玩意儿啊,除了可以编辑 JavaScript 代码,像是JSON、HTML、CSS都是可以的!

编写JSON

编写JSON的话,需要改一下模式:

mode: 'application/json'

看一下效果哈:

在这里插入图片描述

编写 HTML

编写 HTML 的话,需要改一下模式:

mode: 'text/html'

看一下效果哈:

在这里插入图片描述

编写 CSS

编写 CSS 的话,需要改一下模式:

mode: 'text/css'

看一下效果哈:

在这里插入图片描述

行,大体就这些东西!

标签:插件,vue,codemirror,fold,import,true,addon
From: https://www.cnblogs.com/wjw1014/p/18311054

相关文章

  • Vue3+Elementplus 递归菜单展示
    这里只是做个笔记,js,css那些都没写子组件MenuItem<template><templatev-if="item.children"><el-sub-menu:index="item.value"><template#title>{{item.label}}</template><MenuItemv-for="childI......
  • Visual Studio 必备插件集合:AI 助力开发
     一、前言2024年AI浪潮席卷全球,编程界迎来全新的挑战与机遇。智能编程、自动化测试、代码审查,这一切都得益于AI技术的迅猛发展,它正在重塑开发者的日常,让编写代码变得更加高效、智能。精选出最受好评、最具实用价值的VisualStudio插件,涵盖代码编辑、调试、测试、版本控制等多个......
  • Vue脚手架安装(保姆级)
      ......
  • Vue2中Diff算法解析
    Vue2中Diff算法解析import{compileToFunction}from'./compiler/index.js';import{patch,createElm}from'./vdom/patch';//1.创建第一个虚拟节点letvm1=newVue({data:{name:'hs'}});letrender1=compileToFunction('<div>{{nam......
  • ts vue3 定义props写法参考
    写法1exportinterfaceConfig{arr1:Array<IObject>,obj1?:IObject}constprops=defineProps({title:{type:String, //必须的proprequired:true,default:'DefaultTitle'},//数组dicts:{type:Array,requ......
  • vue3 使用component is 动态组件
    使用方式父组件<template><divclass="box"><div><!--setup需要用变量的方式来写入is,如果是optionsapi方式可以用组件字符--><!--myProps属性可以直接传到动态组件--><component:is="childT"myProps="sldfjsklfjksf......
  • springboot+vue+mybatis销售评价系统+PPT+论文+讲解+售后
    随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,销售评价系统当然也不能排除在外。销售评价系统是以实际运用为开发背景,运用软件工程开发方法,采用Java技术构建的一个管理系统。整个开发过程首先对软件系统进行需求分......
  • vue3 watch watchEffect computed 使用差别
    概论watch监听明确的数据computed监听数据并返回计算结果watchEffect重视监听过程测试代码子组件<template><divclass='box'><div>props监听测试</div>computed返回的内容的深度属性:{{configTwo.obj1&&configTwo.obj1.xxx}}<div></div......
  • Vue3动态生成组件
    在Vue3中,要遍历funConfig并动态生成组件,可以使用Vue的defineAsyncComponent来加载异步组件,并结合v-for指令在模板中进行渲染。以下是一个示例代码来实现这个需求:1.配置文件确保配置文件导出的是一个reactive对象:import{reactive}from'vue';exportconst......
  • 渗透测试必备的浏览器插件
    目录WappalyzerFindSomethingX-Forwarded-ForHeaderUASwitcherandManagesuperSearchPlus点击浏览器右上角三条杠,再点扩展滑到最下面,点击寻找更多功能组件搜索wapp,点击第一个,然后添加扩展Wappalyzer简介:可以帮你快速定位网站使用的语言,框架还有富文本编......