Vue 中使用 codemirror

一、安装

官网地址：https://codemirror.net/

npm 插件地址：https://www.npmjs.com/package/vue-codemirror

vue 项目中安装，

npm install vue-codemirror --save

可在 package.json 文件中看到，当前是 4.0.6 版

二、使用

1、引入

这里是局部引入，vue 文件中引入

主题 dracula 是目前我觉得还比较好看的样式，可在路径 node_modules\codemirror\mode 下换其它样式；

mode 是 vue 类型，就不用单独设置 JavaScript、CSS 和 html；

<script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/keymap/sublime' //sublime编辑器效果
import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
</script>

2、options

cmOptions: {tabSize: 4,// tab的空格个数theme: 'dracula',//主题样式lineNumbers: true,//是否显示行数lineWrapping: true, //是否自动换行styleActiveLine: true,//line选择是是否加亮matchBrackets: true,//括号匹配mode: "vue", //实现javascript代码高亮readOnly: false//只读
}

3、完成代码

<template><codemirror class="code" v-model="code" :options="cmOptions"></codemirror>
</template><script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/keymap/sublime' //sublime编辑器效果
import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为trueexport default {components: {codemirror},data() {return {// 代码code: codes,cmOptions: {tabSize: 4,// tab的空格个数theme: 'dracula',//主题样式lineNumbers: true,//是否显示行数lineWrapping: true, //是否自动换行styleActiveLine: true,//line选择是是否加亮matchBrackets: true,//括号匹配mode: "vue", //实现javascript代码高亮readOnly: false//只读}}}
}
</script><style lang="stylus" scoped>
.code {position: absolute;left: 0;right: 0;top: 0;bottom:0;
}
</style>
<style lang="stylus">
.CodeMirror {height: 100%;
}
</style>

三、效果

Vue 中使用 codemirror相关推荐

vue中使用CodeMirror解析yaml语言
vue中使用CodeMirror解析yaml语言一.CodeMirror插件使用 1.CodeMirror插件安装二.CodeMirror基本配置三.CodeMirror具体使用 1.首先创建一 ...
vue中使用codemirror
https://blog.csdn.net/oumaharuki/article/details/79268498 别人的记载,写的很不错,还有下载的方法以下是自己使用过的,做出来的例子: 做出来 ...
Vue 中CodeMirror使用方法
2021的Vue 中CodeMirror使用方法. 1.包括项目的安装 .官网地址. package.json信息 2.基本使用:引入方法.参数注释.案例 2018的Vue-CodeMirror. 1 ...
# Vue 中 JSON 编辑器使用
Vue 中 JSON 编辑器使用文章目录 Vue 中 JSON 编辑器使用背景描述 vue-json-edit 安装依赖测试页面效果图 bin-code-editor 安装依赖测试页面效果 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...