codemirror java代码_codemirror使用(示例代码)
JS使用
使用bower下载
javascript bower i codemirror
引入样式文件
html
引入js文件
html
文档结构
html
初始化
javascript // 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中使用
下载
javascript npm i -S vue-codemirror
main.js中使用
javascript // codemirror 引入和使用 import VueCodemirror from ‘vue-codemirror‘ import ‘codemirror/lib/codemirror.css‘ Vue.use(VueCodemirror)
.vue文件中使用
template部分,使用双向绑定的写法
//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 java代码_codemirror使用(示例代码)相关推荐
- arcgis sample代码之SOE示例代码PageLayout REST Server Object Extension 的源码分析
0.前言 研究 arcgis object的代码是十分重要的,对于学习arcObject太重要了,因为没有这些代码,学习混乱的arcObject将会更佳的困难. 我的arcgis server 是10 ...
- html代码圣诞树位置代码,html 圣诞树(示例代码)
简介这篇文章主要介绍了html 圣诞树(示例代码)以及相关的经验技巧,文章约1263字,浏览量499,点赞数8,值得推荐! div{ width:0px; height:0px; background ...
- java工程化_(二)Java工程化--Maven实践(示例代码)
Maven项目版本号 默认版本号: 1.0-SNAPSHOT 最佳实践是约定该版本为不稳定版本,如果发布一定要删除; 建议的版本规则: 主版本号.次版本号.增量版本号- 如:1.0.0-RELEASE ...
- java登陆密码验证失败,java用户名密码验证示例代码分享
类:NameII 权限:public 方法:main 权限:public 参数:name,password,denglu,i; 参数介绍: name,数据类型 String ,用来存储一个 ...
- 堆排序java实例_堆排序(示例代码)
前言:网上有很多堆排序的案例,我只想写自己堆排序. 一:堆结构 即:一个父节点最多只能有两个子节点(可以没有),如下图 图1 图2 图3 图4 二: 数组 ...
- java异常代码_Java异常(示例代码)
Java异常处理 程序发生异常的原因有很多,通常包含以下几类: 用户输入非法数据 要打开的文件不存在 网络通信连接中断,或者JVM内存溢出 异常有的是因为用户错误引起的,有的是程序错误引起的,还有一些 ...
- idea java api_intellij idea怎么设置java帮助文档(示例代码)
打开idea我引用的jar包都放在 Project Structure-->Modules-->libs文件夹(双击) 双击jar包所在文件夹,跳出对话框. 1.如果api对应的javad ...
- java生成pdf表格示例代码
使用itext代码直接生成pdf文件 用到jar包 itextpdf-5.2.1.jar itext-asian-5.2.0.jar 优缺点 优点:生成快,代码直接能用 缺点:代码要写 ...
- java入门基础知识示例代码
本次更新给大家带来java的入门基础知识相关学习代码 模块一:java程序里的数据书写格式 package com.jiawei.literal;public class LiteralDemo {p ...
最新文章
- 操作系统学习笔记 第一章:操作系统概述(王道考研)
- Flutter开发之认识Flutter(一)
- C++语言之一个派生类继承了所有的基类方法,但下列情况除外
- mysql数据库在什么上运行_mysql – 在所有数据库上运行SQL查询
- jQuery 属性操作attr().prop().text().html().val()
- c语言打印字符的函数参数,C语言格式化打印函数vsnprintf()的实现
- 程序员看《长安十二时辰》的正确姿势~!
- 知识点old1908
- 全站HTTPS底层实现原理
- 【C语言】shape of you
- 【SpringBoot】Spring boot 测试类 找到不到MySQL 驱动
- 3.10 datetime
- 归并有效排序算法matlab,科学网—[用MATLAB写算法]之排序算法2)归并排序merge sort - 徐勇刚的博文...
- 戴尔PowerEdge 4路服务器全面升级 实现企业应用与核心业务工作负载的优异性能...
- 数据结构开发(11):双向循环链表的实现
- 【框架设计】泛型的应用
- 如何使用VBS调用VBA函数
- iOS系统自带的视频播放器
- python使用匿名函数计算长方形的面积
- 聊聊前端工程师如果做职业规划