在线代码编辑器---codemirror插件

1.管网地址: http://codemirror.net/

2.插件调用方法

3.常用事件

1.onChange(instance,changeObj):codeMirror文本被修改后触发。

instance是一个当前的codemirror对象,changeObj是一个{from,to,text[,removed][,origin]}对象。其中from,to分别表示起始行对象和结束行对象,行对象包括ch:改变位置距离行头的间隔字符,line:改变的行数。text是一个字符串数组表示被修改的文本内容,即你输入的内容。

2.onBeforeChange(instance,changObj):内容改变前被调用

3.onCursorActivity(instance):当鼠标点击内容区、选中内容、修改内容时被触发

4.onKeyHandled:(instance,name,event):当一个都dom元素的事件触发时调用,name为操作名称。

5.onInputRead(insatance,changeObj):当一个新的input从隐藏的textara读取出时调用

6.onBeforeSelectionChange(instance,obj):当选中的区域被改变时调用,obj对象是选择的范围和改变的内容(本人未测试成功)

7.onUpdate(instance):编辑器内容被改变时触发

8.onFocus(instance):编辑器获得焦点式触发

9.onBlur(instance):编辑器失去焦点时触发

常用方法:

getValue():获取编辑器文本内容

setValue(text):设置编辑器文本内容

getRange({line,ch},{line,ch}):获取指定范围内的文本内容第一个对象是起始坐标,第二个是结束坐标

replaceRange(replaceStr,{line,ch},{line,ch}):替换指定区域的内容

getLine(line):获取指定行的文本内容

lineCount():统计编辑器内容行数

firstLine():获取第一行行数,默认为0,从开始计数

lastLine():获取最后一行行数

getLineHandle(line):根据行号获取行句柄

getSelection():获取鼠标选中区域的代码

replaceSelection(str):替换选中区域的代码

setSelection({line:num,ch:num1},{line:num2,ch:num3}):设置一个区域被选中

somethingSelected():判断是否被选择

getEditor():获取CodeMirror对像

undo():撤销

redo():回退

原文地址:https://www.cnblogs.com/yangchunlong/p/8286785.html

时间: 2024-07-29 18:04:52

在线代码编辑器---codemirror插件的相关文章

在线代码编辑器CodeMirror简介

1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一款插件,其功能非常强大,用来实现网页端代码编辑器非常方便.如果想看效果图,可移步到这里----CodeOnline,这是我做的一个小项目,其中代码编辑器的就是用Code Mirror实现的. 2.使用Code Mirror 下面我将演示如何使用Code Mirror搭建一个简易的代码编辑器,并对其常

在线代码编辑器 CODEMIRROR 配置说明

转自:http://www.hyjiacan.com/codemirror-config/ CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支持语言的语法定义,theme目录下是支持的主题样式.一般在开发中,添加lib下的引用和mode下的引用就够了. 使用示例 首先,要引用是 lib 目录下的 codemirror.js,还有一个就是同目录下的c

20个最强的基于浏览器的在线代码编辑器

20个最强的基于浏览器的在线代码编辑器,你听过或者用过吗? 1. Compilr Compilr是一个在线编译器和在线IDE.可以用它来开发PHP, C, C++, Ruby.在浏览器中编译Java, C# 和 VB.net等. 马上使用 2. Dabblet 跨浏览器兼容,对前端攻城师们来说是一个不得不处理的问题.为了在浏览器间呈现统一的显示效果,攻城师们不仅要为每个游览器添加CSS前缀,甚至还需要用到一些特殊的CSS Hack技巧.于是,jsFiddle.JSBin等前端代码的在线测试工具应

简要揭秘在线代码编辑器

前言 好像园里没啥帖子介绍在线代码编辑器,网上也多少相关资料,我做在线代码编辑器http://www.wcodei.com/的时候走了一堆的弯路,现在分享一下经验吧,我记性很差,就只能想到哪儿写到哪儿了,希望大家别介意. 一.所见即所得编辑器与代码编辑器的技术对比 两者看上去貌似很相似,都不是传统的editarea,都需要编辑器中显示的内容能够支持带颜色. 所见即所得编辑器的技术核心就是contenteditable="true"属性,只要在一个html容器中使用该属性,则该html容

多语言在线代码编辑器,可运行程序

在线代码编辑器,网址:http://www.mcqyy.com/RunCode/c/ 可支持的语言有: php5.3.php5.4.php5.6.php7.python2.7.python3.C#.java.shell.c语言.c++.go.lua.perl.ruby.nodejs.Objective-C.erlang.rust.R语言.scala.haskell.D语言 如下图: 也可以在首页上找到链接,首先打开首页http://www.mcqyy.com/,然后在页面的最下面的“实用工具”中

CodeMirror:基于JavaScript的代码编辑器

官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionalit

java 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎 网站源码

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.2.5+ mybaits3.3  SSM 普通java we

java 网站源码 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎

前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 赠送pom.xml)  数据库:mysql --------

[HTML5]网页代码编辑器

本文介绍18款极具价值的网页代码编辑器.过两天筹备好了开始我的那个小项目,其中要用到下面的东东,觉得特别不错,特此记录下! 1.Codeanywhere Codeanywhere是运行在浏览器上的代码编辑器,内嵌一个强大的FTP客户端.目前支持多数流行的网页格式(HTML.PHP.JavaScript.CSS和XML). Codeanywhere支持编辑多种类型的文件,集成了桌面编辑器中所有好的特征:高亮显示语法.自动填充代码.智能缩进.支持无限次的撤销和重做.无数个tabs. 2.CodeRu