vue集成codemirror代码编辑器
点击上方“ 青年码农 ”关注
回复“特效源码”可获取各种资料
CodeMirror是一个用 JavaScript 为浏览器实现的通用文本编辑器。它专门用于编辑代码，并带有多种语言模式和插件 ，可实现更高级的编辑功能。
本教程是基于vue2实现集成，使用vue-codemirror插件
1. 安装
# npm
npm install vue-codemirror -S
# yarn
yarn add vue-codemirror -S
2. 新建组件并引入
<template>
<div>
<codemirror
ref="cm"
v-model="value"
:options="options"
@input="inputChange"
> </codemirror>
</div>
</template>
<script>
// 全局引入vue-codemirror
import { codemirror } from "vue-codemirror";
// 引入css文件
import "codemirror/lib/codemirror.css";
// 引入主题 可多个
import "codemirror/theme/ayu-mirage.css";
// 引入语言模式 可多个
import "codemirror/mode/sql/sql.js";
export default {
name: "codemirror",
components: { codemirror },
props: {
value: {
default: ""
}
},
data() {
return {
options: {
// 语言及语法模式
mode: "text/x-sql",
// 主题
theme: "ayu-mirage",
// 显示函数
line: true,
lineNumbers: true,
// 软换行
lineWrapping: true,
// tab宽度
tabSize: 4
}
};
},
methods: {
inputChange(content) {
this.$nextTick(() => {
console.log("content:" + content);
});
}
}
};
</script>
主题引入多个，我们可以实现动态切换主题，语言模式支持多种语言。
options支持的属性很多，上面的例子只使用了几个常用的属性，更多属性请参照官方文档
https://codemirror.net/doc/manual.html#config
关于如何切换主题和语言模式，通过npm安装的vue-codemirror插件，可以在node_modules中找到codemirror文件夹，你想要的都在这里
只需要引入对应的文件，在options中切换即可。
3.最终效果
vue集成codemirror代码编辑器相关推荐
- vue2使用Codemirror代码编辑器插件
让我们先看看需求 :一个有SQL语言提示代码编辑器 一 . 我这里用的是vue2 三种方法,得指定版本号,不指定就是默认最新,版本6以上都是vue3的版本,引入使用会报错 vue3的版本叫vue-c ...
- vue.js AEC代码编辑器
AEC代码编辑器 安装 组件 效果 效果地址 安装 npm install ace-builds --save-dev 组件 <div class="ace-container&quo ...
- VUE 集成富文本编辑器及踩坑记录
一.查看 vue版本和vue cli版本 首先要知道自己所使用的VUE 版本和 脚手架(VUE CLI)版本 这样自己无论是在百度的时候还是选择富文本编辑器对应版本的时候都方便很多 1.查看vue 版 ...
- CodeMIrror.js在线代码编辑器简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便.CodeMirror 是一款在线 ...
- ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于 ...
- vue2项目使用codemirror插件实现代码编辑器功能
1.使用npm安装依赖 npm install --save codemirror 2.在页面中放入如下代码 <template><textarea ref="mycode ...
- vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器 自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板 最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
- 通过vue-codemirror和CodeMirror将代码编辑器添加到web项目中
前言 最近项目中有一个需求是,需要添加一个代码编辑器到项目中.也不知道是谁设计的,将代码编辑器添加到项目中? 费了九牛二虎之力终于找到了 vue-codemirror 和 CodeMirror 感觉是 ...
- vue2实现codemirror在线代码编辑器（代码提示，行数显示..）
项目需求 需要在管理系统模块中实现用户SQL语句自查询,实现一个代码编辑器,要求有执行,清空,代码提示,行数显示功能,,实现效果如下: -------------------------------- ...
最新文章
- excel粘贴时出现故障_了解这些信息，你会知道在ESXi5.0 的虚拟化系统下文件出现故障时，我们能做些什么？...
- Java实现堆排序及详细图解
- try to navigate from button to line item page
- NCRE四级网络工程师考题详解----LRU与LFU的区别
- php生成excel范例，支持任意行列
- 嵌入式Linux系统编程学习之十六用程序发送信号
- 妙啊，小米11保护壳先小米11一步上市了...
- WatiN-Html元素及元素属性识别-扩展
- Hi3518EV200 SDK 分析
- 液压伺服控制技术和电液比例控制技术
- [AngularJS面面观] 15. 依赖注入 --- 初识注入器(Injector)
- windows——win10如何远程控制另一台电脑
- 定义数字品牌资产，苏泽兰特CEO胡烜峰讲透元宇宙的价值与未来
- 常用的正则字母大小写转换
- 程序员应该知道的经济学常识
- 介绍一下xgb_xgboost实战，一篇就好
- 工程师文化：BAT为什么不喊老板？
- hive 使用beelin连接报错
- 怎么测试视频是哪个软件拍的,李子柒的视频是用什么设备拍摄的，又是用什么软件处理的？...
- 23普通话考试报名流程，注意各省已陆续开始报名