codemirror 光标定位_在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）...

清疚 2023-01-10 03:49 194阅读 0赞

在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示)

1、使用npm安装依赖

npm install --save codemirror;

2、在页面中放入如下代码

import 'codemirror/theme/ambiance.css'

import 'codemirror/lib/codemirror.css'

import 'codemirror/addon/hint/show-hint.css'

let CodeMirror = require('codemirror/lib/codemirror')

require('codemirror/addon/edit/matchbrackets')

require('codemirror/addon/selection/active-line')

require('codemirror/mode/sql/sql')

require('codemirror/addon/hint/show-hint')

require('codemirror/addon/hint/sql-hint')

export default \{

name: 'CodeMirror',

data () \{

return \{

code: '//按Ctrl键进行代码提示'

\},

mounted () \{

debugger

let mime = 'text/x-mariadb'

// let theme = 'ambiance'//设置主题，不设置的会使用默认主题

let editor = CodeMirror.fromTextArea(this.$refs.mycode, \{

mode: mime, // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可

indentWithTabs: true,

smartIndent: true,

lineNumbers: true,

matchBrackets: true,

// theme: theme,

// autofocus: true,

// extraKeys: \{ Ctrl: 'autocomplete' \}, // 自定义快捷键

hintOptions: \{

// 自定义提示选项

tables: \{

users: \['name', 'score', 'birthDate'\],

countries: \['name', 'population', 'size'\]

\})

// 代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死

editor.on('cursorActivity', function () \{

editor.showHint()

\})

.codesql \{

font-size: 11pt;

font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,

DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;

编译器的事件触发器

触发器使用方法：(change事件为例)

this.CodeMirrorEditor.on("change",function()\{

//事件触发后执行事件

alert("change")

\});

取消触发器方法：

this.CodeMirrorEditor.off("change")

“changes”：每次编辑器内容更改时触发

“beforeChange”：事件在更改生效前触发

“cursorActivity”：当光标或选中(内容)发生变化，或者编辑器的内容发生了更改的时候触发。

“keyHandled”:快捷键映射(key map)中的快捷键被处理(handle)后触发

“inputRead”:当用户输入或粘贴时编辑器时触发。

“electrictInput”:收到指定的electrict输入时触发

“beforeSelectionChange”:此事件在选中内容变化前触发

“viewportChange”：编辑器的视口( view port )改变(滚动，编辑或其它动作)时触发

“gutterClick”：编辑器的gutter(行号区域)点击时触发

“focus”：编辑器收到焦点时触发

“blur”:编辑器失去焦点时触发

“scroll”:编辑器滚动条滚动时触发

“keydown”, “keypress”, “keyup”，“mousedown”, “dblclick”硬件事件触发器

API

this.CodeMirrorEditor.setValue(“Hello Kitty”)：设置编辑器内容

this.CodeMirrorEditor.getValue()：获取编辑器内容

this.CodeMirrorEditor.getLine(n):获取第n行的内容

this.CodeMirrorEditor.lineCount()：获取当前行数

this.CodeMirrorEditor.lastLine()：获取最后一行的行号

this.CodeMirrorEditor.isClean():boolean类型判断编译器是否是clean的

this.CodeMirrorEditor.getSelection()：获取选中内容

this.CodeMirrorEditor.getSelections():返回array类型选中内容

this.CodeMirrorEditor.replaceSelection(“替换后的内容”):替换选中的内容

this.CodeMirrorEditor.getCursor():获取光标位置,返回\{line,char\}

this.CodeMirrorEditor.setOption("",""):设置编译器属性

this.CodeMirrorEditor.getOption(""):获取编译器属性

this.CodeMirrorEditor.addKeyMap("",""):添加key-map键值，该键值具有比原来键值更高的优先级

this.CodeMirrorEditor.removeKeyMap(""):移除key-map

this.CodeMirrorEditor.addOverlay(""):Enable a highlighting overlay…没试出效果

this.CodeMirrorEditor.removeOverlay(""):移除Overlay

this.CodeMirrorEditor.setSize(width,height):设置编译器大小

this.CodeMirrorEditor.scrollTo(x,y):设置scroll到position位置

this.CodeMirrorEditor.refresh():刷新编辑器

this.CodeMirrorEditor.execCommand(“命令”):执行命令

codemirror 光标定位_在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue代码编辑器vue-codemirror的简单使用更改样式和切换主题等

相关 codemirror 光标定位_在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）...

相关代码高亮编辑器封装成vue组件

相关 jQuery实现代码高亮编辑器

相关 vue2项目使用codemirror插件实现代码编辑器功能

相关 CodeMirror 多功能在线代码编辑器

相关 nuxt.js使用代码编辑器codemirror

相关 codeMirror代码编辑器使用学习

相关 create-react-app中使用CodeMirror轻量级代码编辑器，实现自动提示，自动补全代码问题

相关 CodeMIrror.js在线代码编辑器简单使用