codemirror编辑html,CodeMirror的使用方法

最近项目中用到了CodeMirror这个代码编辑器，感觉非常好用，可以设置很多种代码格式。默认前提是你已经正确引入了所有的js文件和css文件。

下面是我在项目中用到过和在网上搜集整理的使用方法：

1、首先在html界面中建立textarea标签，用于生成代码框

2、根据textarea的id获取到标签元素，将容器转换为编辑器

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {//定义CodeMirror代码编辑器

lineNumbers: true, //显示行号

indentUnit: 4, //缩进单位为4

styleActiveLine: true, //当前行背景高亮

matchBrackets: true, //括号匹配

mode: 'htmlmixed', //HMTL混合模式

lineWrapping: true, //自动换行

theme: 'monokai', //编辑器主题

});

API

editor.setSize(width,height)//设置编辑框的尺寸

editor.getValue()//获取经过转义的编辑器文本内容

editor.toTextArea()或editor.getTextArea().value//该方法得到的结果是未经过转义的数据

editor.setValue(text)//设置编辑器文本内容

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

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

editor.getLine(line)//获取指定行的文本内容

editor.lineCount()//统计编辑器内容行数

editor.firstLine()//获取第一行行数，默认为0，从开始计数

editor.lastLine()//获取最后一行行数

editor.getLineHandle(line)//根据行号获取行句柄

editor.getSelection()//获取鼠标选中区域的代码

editor.replaceSelection(str)//替换选中区域的代码

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

editor.somethingSelected()//判断是否被选择

editor.getEditor()//获取CodeMirror对像

editor.undo()//撤销

editor.redo()//回退

可能整理的不全，欢迎补充。

前端交流群，期待你的加入！群号：127768464

codemirror编辑html,CodeMirror的使用方法相关推荐

codemirror 执行PHP,CodeMirror 使用大全
标签:CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您 ...
php如何实现区分编辑,php实现编辑和保存文件的方法
php实现编辑和保存文件的方法发布于 2015-09-26 11:54:35 | 66 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext Prep ...
linux_vim编辑文件无法高亮显示解决方法
linux_vim编辑文件无法高亮显示解决方法参考文章: (1)linux_vim编辑文件无法高亮显示解决方法 (2)https://www.cnblogs.com/lxyuuuuu/p/96177 ...
php保存文件的方法,php实现编辑和保存文件的方法
本文实例讲述了php实现编辑和保存文件的方法.分享给大家供大家参考.具体如下: save_file.php: session_start(); $handle = fopen($_post['orig ...
html双击变成可编辑状态,JS实现双击编辑可修改状态的方法
本文实例讲述了JS实现双击编辑可修改状态的方法.分享给大家供大家参考.具体如下: 这是现在流行的一个表单特效,在网页上单击某文字,文字变为编辑状态,或者是让输入新文字,这就是JavaScript控制表 ...
Vscode——编辑setting.json，但显示“无法在只读编辑器中编辑”的一种解决方法
Vscode--编辑setting.json,但显示"无法在只读编辑器中编辑"的一种解决方法一.遇到的问题二.解决方法 1.打开"设置",输入想编辑的参数名 ...
thinkphp3.1.3 getshell_C# / VB.NET 在PPT中创建、编辑PPT SmartArt图形的方法详解_C#教程...
本文介绍通过C#和程序代码来创建和编辑PPT文档中的SmartArt图形.文中将分两个操作示例来演示创建和编辑结果. 使用工具:Spire.Presentation for .NET hotfix 5 ...
利用C语言编辑画图程序的实现方法
不知道大家在进行开发县级电网调度自动化系统的时候,是否都会遇到一个问题就是:要绘制一个电力系统一次接线图.大家都应该知道其实电力系统的一次接线图是较为复杂的,如果想要使用一般的编程方法来进行绘制的话, ...
catia 如何提取cgr面_CGR文件转化为可编辑数据都有哪些方法呢？ _ 设计学院_设计软件教程自学网...
近期有网友咨询我CGR文件能不能转成可编辑的数据,CGR文件使用起来不方便,不能编辑修改,只能测量,CGR文件实际上是可以变成可编辑的数据,这个方法应该是10多年前就可以办到,但是基本没人用,所以也就 ...

codemirror编辑html,CodeMirror的使用方法

codemirror编辑html,CodeMirror的使用方法相关推荐

最新文章

热门文章