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 版本的插件,因此,安装下面两个插件,必须两个都安装哈,不能只安装一个嗷!
vue-codemirror 使用
具体根据上面提供的官方文档去看哈,我这就不展开说了,我就简单贴一下我的代码哈;
首先在需要代码编辑器的组件里面引入插件:
然后在 HTML 部分使用一下:
其中 v-model
就是你要绑定编辑的代码;@ready
绑定了一个函数,目的是在完成之后添加一个事件,用来代码提示用;style
绑定的是这个编辑器的样式,比如字体样式、字体大小之类的;options
很重要,是对编辑器的配置信息;
再一个就是引入一下必要的文件,我用到了这一些,一些样式,代码校验啥的:
然后再 data 里面创建一下必要参数:
其中在 option
绑定数据里面的 mode: 'text/javascript',
表示当前编辑器,解析的是 JavaScript
代码,这个很重要。
然后就是代码校验需要使用几个包,可能需要单独安装一下:
安装完成之后呢,把他们引入并且挂载 window
上面就行,他会自己找到使用:
最后就是代码提示,比如 js
的代码提示是吧!
但是代码提示框的层级可能会比较低,被其他元素盖住,可以提升一下层级:
然后就完事了!看一下效果:
其他
这玩意儿啊,除了可以编辑 JavaScript 代码,像是JSON、HTML、CSS都是可以的!
编写JSON
编写JSON的话,需要改一下模式:
看一下效果哈:
编写 HTML
编写 HTML 的话,需要改一下模式:
看一下效果哈:
编写 CSS
编写 CSS 的话,需要改一下模式:
看一下效果哈:
行,大体就这些东西!