在vue项目中使用codemirror插件实现代码编辑器功能_vue-codemirrorvue3

codemirror

4 浏览量更新于2023-05-04 评论 1 收藏 51KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

在在vue项目中使用项目中使用codemirror插件实现代码编辑器功能插件实现代码编辑器功能

在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示），具体内容如下所示：

1、使用npm安装依赖

npm install --save codemirror;

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

</template>

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()

})

}

</script>

<style>

.codesql {

font-size: 11pt;

font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,

serif;

}

</style>

3、话不多说，直接上图

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38643127

粉丝: 8
资源: 921

会员权益专享

在vue项目中使用codemirror插件实现代码编辑器功能

评论0

会员权益专享

最新资源

在vue项目中使用codemirror插件实现代码编辑器功能

评论0

vueup-quill:Vue 3插件或组件的Quill编辑器

Vue的编辑器

Vuehtml5editor是一个Vue的富文本编辑器插件

写段vue代码使用codemirror插件实现点击按钮时执行codemirror代码拼写检查功能

vue2实现codemirror在线代码编辑器

写段vue代码使用codemirror插件写出所有能够实现点击按钮时执行codemirror代码拼写检查功能

codemirror插件 在vue2中如何使用

写段vue代码使用codemirror插件实现，点击按钮时，格式化代码

vue2使用codemirror

写端vue代码实现codemirror代码检测功能

vue codemirror 代码提示

vue 使用 vue-codemirror 最详细的流程

代码import { codemirror } from 'vue-codemirror'意思，’vue-codemirror’的作用

写段vue代码使用codemirror内部插件实现，点击按钮时，格式化代码

vue2 vue-codemirror

vue-codemirror xml代码提示

vue3使用codemirror

vue-codemirror Java 代码高亮显示

vue-codemirror 可折叠

Vue怎么在界面上生成一个代码编辑器

会员权益专享

最新资源

codemirror插件在vue2中如何使用