codemirror使用
JS使用
使用bower下载
bower i codemirror
引入样式文件
<link rel="stylesheet" type="text/css" href="bower_components/codemirror/lib/codemirror.css">
引入js文件
<script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="bower_components/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="bower_components/codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="bower_components/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script type="text/javascript" src="bower_components/codemirror/mode/css/css.js"></script>
文档结构
<div class="container">
<textarea class="marpad " tyle="width:70%;height:300px;" id="editor" >
<!-- 放入编辑对应的文本 -->
</textarea>
</div>
初始化
// mode: "text/javascript",
// mode: "text/css"
window.onload = function(){
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
lineNumbers: true,
mode: "text/html"
});
}
- mode需要注意的是,编辑器解析某种文本,必须引入mode下面对应的js文件,否则还是以纯文本的格式显示或者default
- 若是mode: "text/html",则必须在htmlmixed.js文件引入之上引入xml.js,否则html是不能被正确解析显示的
vue-cli中使用
下载
npm i -S vue-codemirror
main.js中使用
// codemirror 引入和使用
import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodemirror)
.vue文件中使用
template部分,使用双向绑定的写法
//v-model="infor.codeCss" 双向绑定的数据源
//:options="cssOptions" codemirror的配置项
<codemirror v-model="infor.codeCss" :options="cssOptions"></codemirror>
script部分
//引入xml,html,css,js对应的js解析文件
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/htmlmixed/htmlmixed.js' // 引入主题样式文件
import 'codemirror/theme/monokai.css'
//Vue实例中设置配置项
data(){
return {
infor:{
codeCss:''
},
cssOptions: {
tabSize: 4,
mode: 'text/css',
theme: 'monokai',
lineNumbers: true,
line: true,
}
}
}
codemirror使用的更多相关文章
- CodeMirror简介
Javascript由于其作为Web标准的独特地位,很多人甚至希望它能一统前后端开发. Javascript的本质工作首先肯定的Web前端开发,本文主要想介绍的CodeMirror是一款Web Edi ...
- 如何用Selenium 向CodeMirror 编辑器输入
用Selenium 自动填写Jenkins上面一个文本输入框,通过css定位很容易,但是输入文字的时候会报错 ElementNotVisibleException: Message: Element ...
- codeMirror的简单使用,js比较文本差异(标注出增删改)
最近项目需要使用比较文本的差异的功能,在同事的推荐下,使用js脚本来比较,所以codeMirror变成了选择. 当然codeMirror中有其他功能,比较文本差异的只是其中一个功能,本人不在此做介绍, ...
- codeMirror插件使用讲解
codeMirror是一款十分强大的代码编辑插件,提供了十分丰富的API,最近在项目中用到了这款插件,于是在这里给大家分享下使用方法和心得: codeMirror调用非常方便 首先在页面中载入插件CS ...
- 在线代码编辑器CodeMirror简介
1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一 ...
- 关于codeMirror插件使用的一个坑
codeMirror插件可以做语法高亮渲染,但它操作过程是这样的:先从 textarea中读取值放到codemirror动态生成的div中,根据textarea中的换行个数确定行数,根据正则表达来高亮 ...
- codemirror和ace editor的语法高亮
两个javascript库用做在线代码编辑器都是非常优秀的选择 我这两天对这两个类库做了简单的研究,重点是语法高亮的自定义: ace editor的主要思路是生成状态机,从一个startstate开始 ...
- 使用CodeMirror在浏览器中实现编辑器的代码高亮效果
使用CodeMirror在浏览器中实现编辑器的代码高亮效果 在网站后台管理中希望能够对网站的样式表css与js文件以及模板html进行管理,在编辑的时候只是以普通文本展示又太普通,显得好难看,于是便在 ...
- CodeMIrror 简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便. codeMirror可以直接在 ...
- codemirror 插件
做在线词典编辑的时候.里面有些自定义标签.类似html标签一样. 为了让编辑编辑.改成了 <动词></动词> 所以引用了 codemirror插件 此插件绝对牛逼 它主要功能 ...
随机推荐
- Android和IOS启动第三方地图APP
最近客户新提了需求,地址字段要能通过第三方的地图进行定位,于是对Android和IOS端进行了调整. 以下是调用地图部分的代码. android可按照包名来判断app是否存在: 方法: /* * ch ...
- kafka笔记6
我们讨论可靠性时,一般使用保证这个词,它是确保系统在各种不同的环境下能够发生一致的行为.Kafka可以在哪些方面作出保证呢? 1.Kafka可以保证分区消息的顺序 2.只有消息被写入分区的所有同步副本 ...
- java泛型方法返回泛型结果
public class Test { static HashMap<String, String> sMap = new HashMap<String, String>(); ...
- MCtalk对话尚德机构:AI讲师,假套路还是真功夫?
一间容纳百人的被挤得满满的教室,老师讲.学生听.线下课堂曾是职业教育最普遍的形式.随着移动互联网的普及,大量的学习行为逐渐转化到线上进行,传统教育机构如何抓住这轮技术转型的契机,而不是被它吞噬? 近日 ...
- Java---使用EWS读取exchange邮件
第一步: 下载EWS API相关包: 从如下路径下载EWS API包:http://code.msdn.microsoft.com/Exchange-EWS-Java-API-12-1a5a1143 ...
- chromedriver配置
需要先安装chrome浏览器,添加chrome源 sudo vim /etc/yum.repos.d/google-chrome.repo 添加以下内容 [google-chrome] name=go ...
- Nginx查看并发连接数
Nginx查看并发连接 通过界面查看 通过界面查看通过web界面查看时Nginx需要开启status模块,也就是安装Nginx时加上 --with-http_stub_status_module 然后 ...
- centos7搭建基于SAMBA的网络存储
学习目标: 通过本实验理解Linux系统下SAMBA服务器和客户端的配置,实现客户机可自动挂载服务端的共享存储. 操作步骤: 1. SAMBA服务器搭建 2. SAMBA客户端配置 参考命令: ...
- Codeforces 755A:PolandBall and Hypothesis(暴力)
http://codeforces.com/problemset/problem/755/A 题意:给出一个n,让你找一个m使得n*m+1不是素数. 思路:暴力枚举m判断即可. #include &l ...
- 如何提高Sprint Review的质量?
Sprint Review不是回顾,其目标是演示这个Sprint中自己的工作成果,参会人员包括设计师.开发人员和Product Owner.在Worktile,我们尽量保持Sprint评审会的轻松随意 ...