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