在vue项目中使用codemirror插件实现代码html" target="_blank">编辑器功能(代码高亮显示及自动提示),具体内容如下所示:
1、使用npm安装依赖
npm install --save codemirror;
2、在页面中放入如下代码
<template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea> </template> <script> 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、话不多说,直接上图
总结
以上所述是小编给大家介绍的在vue项目中使用codemirror插件实现代码编辑器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
本文向大家介绍vue实现codemirror代码编辑器中的SQL代码格式化功能,包括了vue实现codemirror代码编辑器中的SQL代码格式化功能的使用技巧和注意事项,需要的朋友参考一下 vue实现codemirror代码编辑器中的SQL代码格式化功能 1、首先使用npm安装sql-formatter插件 npm install --save sql-formatter 2、然后引入该sql-
本文向大家介绍在 Vue 项目中引入 tinymce 富文本编辑器的完整代码,包括了在 Vue 项目中引入 tinymce 富文本编辑器的完整代码的使用技巧和注意事项,需要的朋友参考一下 项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大
本文向大家介绍Pycharm编辑器功能之代码折叠效果的实现代码,包括了Pycharm编辑器功能之代码折叠效果的实现代码的使用技巧和注意事项,需要的朋友参考一下 1、主题 在一些情况下,如果某些代码显得不太重要,我们可以通过Pycharm的代码折叠功能将其折叠为一行。在接下来的部分我们将介绍代码折叠功能基本用法。 2、代码可折叠轮廓线以及折叠开关 首先,我们观察一下代码左侧的折叠线。
本文向大家介绍使用vue实现grid-layout功能实例代码,包括了使用vue实现grid-layout功能实例代码的使用技巧和注意事项,需要的朋友参考一下 1.先clone项目到本地。 2.git reset --hard commit 命令可以使当前head指向某个commit。 完成html的基本布局 点击复制按钮来复制整个commit id。然后在项目根路径下运行 git reset 。
本文向大家介绍vue2.0项目中使用Ueditor富文本编辑器示例代码,包括了vue2.0项目中使用Ueditor富文本编辑器示例代码的使用技巧和注意事项,需要的朋友参考一下 最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件。 项目地址:https://github.com/suweiteng/vue2-management-platform 1.放入静态资源
本文向大家介绍vue el-table实现行内编辑功能,包括了vue el-table实现行内编辑功能的使用技巧和注意事项,需要的朋友参考一下 最近做一个vue前后端分离的项目,前端框架用element ui,在 使用 el-table 的过程中,需要实现行内编辑,效果大概是这样: 分为下面几个步骤: (1) 自定义 el-table 的表头(即添加 “新增” 按钮): 表头自定义了一个“添加”按