codemirror 简单使用

代码压缩包地址 https://github.com/codemirror/codemirror

1. 网页引用<script src="js/codemirror.js"></script>

2. 网页引用<script src="js/clike.js"></script>（mode属性需要的js文件）

3. 初始化编辑框生成

var myTextarea = document.getElementById("smartTxt");

var editor = CodeMirror.fromTextArea(myTextarea,{
lineNumbers: true,
matchBrackets: true,
mode:"text/x-solidity", （此属性代表着代码风格，比如js，c/c++，java等，需要引用clike.js）
showCursorWhenSelecting: true,
inputStyle: "contenteditable",
styleActiveLine: { nonEmpty: true }

})

4.在做项目中还有用到一些属性

editor.focus(); 聚焦到编辑框

editor.setCursor(lineNumber); 为某行设置光标

editor.addLineClass(lineNumber， 'text', 'analysis-matched-line'); 为某一行添加class样式

editor.removeLineClass(lineNumber， 'text', 'analysis-matched-line'); 为某一行删除class样式

codemirror 简单使用相关推荐

codemirror mysql_Codemirror简单配置
codemirror是一个代码编译器,vue.react都有相应的codemirror,目录及用法都是一样的,也比较容易上手,vue中配置还是相应的比较简单,主要可以实现匹配括号,以及代码折叠的效果, ...
CodeMIrror.js在线代码编辑器简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便.CodeMirror 是一款在线 ...
python编辑代码的页面_使用CodeMirror实现Python3在线编辑器的示例代码
一.编写页面主要是引入相关的css文件和js文件,这里采用简单插入link和script标签的形式. Document click 二.配置CodeMirror 在index.js中配置CodeMi ...
【开源框架】Android之史上最全最简单最有用的第三方开源库收集整理，有助于快速开发，欢迎各位网友补充完善...
链接地址:http://www.tuicool.com/articles/jyA3MrU 时间 2015-01-05 10:08:18 我是程序猿,我为自己代言原文 http://blog.cs ...
在线代码编辑器 Codemirror 的轻量级 React 组件
代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codem- 特性: ? 自动根据 mode 配置加载 mode 文件. ...
codeMirror配置
介绍 CodeMirror是一款在线的支持语法高亮的代码编辑器.官网:http://codemirror.net/ 下载后,解压开到的文件夹中,lib下是放的是核心库和核心css,模式下放的是各种支持 ...
在线代码编辑器 CodeMirror 配置说明 - javascript开发的代码语法高亮显示引擎
CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支 ...
markdown在前端的简单使用
目录前言一.引用editor.md进行markdown编辑器使用介绍使用准备二.开始使用创建查看修改编辑三.总结与感悟四.最后前言最近女朋友在做一个项目,她想使用markdow ...
利用CodeMirror构建在线IDE随记
一.引入需要的js.css  <script src="/codemirror-5.33.0/lib/codemirror.js">& ...

codemirror 简单使用

codemirror 简单使用相关推荐

最新文章

热门文章