vue2使用Codemirror代码编辑器插件

让我们先看看需求：一个有SQL语言提示代码编辑器

一 . 我这里用的是vue2 三种方法，得指定版本号，不指定就是默认最新，版本6以上都是vue3的版本，引入使用会报错

vue3的版本叫vue-codemirror，vue2的版本叫codemirror

// 我这里使用的5.46.0版本的，vue2.7，如果各位小伙伴5.46.0的版本不支持就安装5以下版本吧
npm install codemirror@5.46.0 --save

二 . 创建一个组件，直接cv进代码就好了，我的组件名叫CommonEditor.vue

主题请参考官网CodeMirror: Theme Demo，注意：使用主题前记得引入哦（主题位置有注释）

<template><div class="common-editor"><textarea ref="textarea" v-model="value"></textarea></div>
</template><script>
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-dark.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/markdown/markdown'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/shell/shell'
import 'codemirror/mode/powershell/powershell'const CodeMirror = require('codemirror/lib/codemirror')export default {name: 'CommonEditor',props: {value: {type: String,default: ''},language: {type: String,default: null}},data() {return {CommonEditor: false,code: '',coder: null,mode: 'javascript',theme: 'default',modes: [{ value: 'javascript', label: 'Javascript' },{ value: 'x-java', label: 'Java' },{ value: 'x-python', label: 'Python' },{ value: 'x-sql', label: 'SQL' },{ value: 'x-shell', label: 'Shell' },{ value: 'x-powershell', label: 'PowerShell' },{ value: 'x-php', label: 'PHP' }]}},watch: {language: {handler(language) {this.getCoder().then(() => {// 尝试从父容器获取语法类型if (language) {// 获取具体的语法类型对象const modeObj = this.getLanguage(language)// 判断父容器传入的语法是否被支持if (modeObj) {this.mode = modeObj.labelthis.coder.setOption('mode', `text/${modeObj.value}`)}}})},immediate: true}},computed: {coderOptions() {return {line: true,mode: 'application/json', // json数据高亮theme: 'blackboard', //设置主题 记得引入对应主题才有显示   import 'codemirror/theme/blackboard.css'tabSize: 1,lineNumbers: true, // 显示行号cursorHeight: 0.8, //光标高度，默认是1autoCloseBrackets: true,matchBrackets: true, // 括号匹配lineWrapping: 'wrap', // 文字过长时，是换行(wrap)还是滚动(scroll),默认是滚动showCursorWhenSelecting: true, // 文本选中时显示光标smartIndent: true, // 智能缩进completeSingle: false // 当匹配只有一项的时候是否自动补全}}},mounted() {// 初始化this.initialize()},methods: {// 初始化initialize() {// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置this.coder = CodeMirror.fromTextArea(this.$refs.textarea,this.coderOptions)this.coder.on('inputRead', () => {this.coder.showHint()})// 编辑器赋值if (this.value || this.code) {this.setCodeContent(this.value || this.code)} else {this.coder.setValue('')}// 支持双向绑定this.coder.on('change', (coder) => {this.code = coder.getValue()if (this.$emit) {this.$emit('input', this.code)}})},setCodeContent(val) {setTimeout(() => {if (!val) {this.coder.setValue('')} else {this.coder.setValue(val)}}, 300)},getCoder() {const that = thisreturn new Promise((resolve) => {;(function get() {if (that.coder) {resolve(that.coder)} else {setTimeout(get, 10)}})()})},getLanguage(language) {// 在支持的语法类型列表中寻找传入的语法类型return this.modes.find((mode) => {// 所有的值都忽略大小写，方便比较const currentLanguage = language.toLowerCase()const currentLabel = mode.label.toLowerCase()const currentValue = mode.value.toLowerCase()// 由于真实值可能不规范，例如 java 的真实值是 x-java ，所以讲 value 和 label 同时和传入语法进行比较return (currentLabel === currentLanguage || currentValue === currentLanguage)})},changeMode(val) {// 修改编辑器的语法配置this.coder.setOption('mode', `text/${val}`)// 获取修改后的语法const label = this.getLanguage(val).label.toLowerCase()// 允许父容器通过以下函数监听当前的语法值this.$emit('language-change', label)}}
}
</script>
<style lang="less">
.common-editor {width: 100%;height: 100%;.CodeMirror {// color: #ccc;direction: ltr;line-height: 20px;width: 100%;height: 100%;// background-color: #000;}.CodeMirror-hints {z-index: 9999 !important;}.custom-class .CodeMirror {width: 100%;}
}
.CodeMirror-hints {z-index: 1000;
}
</style>

使用

三. 到了最重要的使用环节了，确实也挺简单，在你的页面引入这个组件就好了

<template><div><CommonEditor:value="sqlContent.sqltext"language="sql"@input="changeTextarea"style="height: 80vh"></CommonEditor></div>
</template><script>
import CommonEditor from '@/components/CommonEditor.vue'export default {components: { CommonEditor },data() {return {sqlContent: {sqltext: 'select * from Data'}}},methods: {changeTextarea(val) {this.sqlContent.sqltext = val}},
}</script>

vue2使用Codemirror代码编辑器插件相关推荐

html java编辑器插件,5+用Java编写的最佳代码编辑器插件
本文概述如今, 开发工作正在突飞猛进, 如今你触手可及的基于云的IDE使你无论身在何处都能工作.这些服务中最重要的组件是代码编辑器.是的, 你可以在其中编辑代码的那个框用奇特的颜色, 自动完成和其他 ...
vue集成codemirror代码编辑器
点击上方" 青年码农 "关注回复"特效源码"可获取各种资料 CodeMirror是一个用 JavaScript 为浏览器实现的通用文本编辑器.它专门用于编辑代 ...
迄今为止最浮夸的代码编辑器插件
先来看一下效果有点天女散花或者开凿的感觉啊. 这是atom 编辑器的activation-power-mode插件的效果. atom 作为一块开源编辑器在网络编程方面应用比较广泛,主要开源特性比较令 ...
CodeMIrror.js在线代码编辑器简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便.CodeMirror 是一款在线 ...
[转]vue-codemirror 代码编辑器
codemirror 是一个非常强大的代码编辑器插件,但官方并没有提供 vue 的支持版本,不过跟 vue 集成的步骤并不复杂,以下是具体实现更多精彩更多技术博客,请移步 IT人才终生实训与职业进 ...
React基于monaco editor的在线代码编辑器开发
完整项目在这里:monaco-editor-app Monaco Editor App 本仓库用于演示Monoca Editor的用法运行 node 版本:14.18.1,npm 版本:6.14.1 ...
vue2项目使用codemirror插件实现代码编辑器功能
1.使用npm安装依赖 npm install --save codemirror 2.在页面中放入如下代码 <template><textarea ref="mycode ...
在线代码编辑器---codemirror插件
1.管网地址: http://codemirror.net/ 2.插件调用方法: 3.常用事件 1.onChange(instance,changeObj):codeMirror文本被修改后触发. i ...
vue2实现codemirror在线代码编辑器（代码提示，行数显示..）
项目需求需要在管理系统模块中实现用户SQL语句自查询,实现一个代码编辑器,要求有执行,清空,代码提示,行数显示功能,,实现效果如下: -------------------------------- ...

vue2使用Codemirror代码编辑器插件

使用

vue2使用Codemirror代码编辑器插件相关推荐

最新文章

热门文章