CodeMirror在线代码编辑器使⽤以及如何取值
网页模板编辑器⽬前CodeMirror在线代码编辑器在运⽤还蛮⼴泛的，⽀持100多种语⾔，⾼度可定制。⽀持语⾔有C、C++、C#、Java、Perl、HTML、CSS、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等。以及diff、LaTeX、SQL、wiki、Markdown等⽂件格式。CodeMirror为各种编程语⾔实现关键字、函数、变量等代码⾼亮显⽰，丰富的API和可扩展功能以及多个主题样式。如果要在页⾯中需要嵌⼊⼀个代码编辑区，CodeMirror是最佳的选择。
关于下载可以直接到官⽹上去下载
CodeMirror的官⽹是：
代码托管在Github上，下载地址：
下⾯是需要引⼊的css
<link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">//必须引⼊，是CodeMirror的核⼼样式⽂件
<link href="codemirror/theme/monokai.css" rel="stylesheet" type="text/css">//是编辑器模板，可以根据需要修改
<link href="codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">//全屏⽀持样式⽂件
<script type="text/javascript" src="codemirror/lib/codemirror.js"></script>//需要引⼊的核⼼js
页⾯展⽰：
<textarea id="code" name="code"></textarea>
关于配置：
<script>
var editor = CodeMirror.ElementById("code"), {
lineNumbers: true, // 显⽰⾏数
indentUnit: 4, // 缩进单位为4
styleActiveLine: true, // 当前⾏背景⾼亮
matchBrackets: true, // 括号匹配
mode: 'htmlmixed', // HMTL混合模式
lineWrapping: true, // ⾃动换⾏
theme: 'monokai', // 使⽤monokai模版
});
</script>
当然，配置项有很多，以上只是⼀部分，具体的配置项内容可以参考官⽹，有很多，可以酌情使⽤。
接下来就是项⽬中运⽤到⽐较多的情况说明：
1. 设置代码框的⼤⼩
editor.setSize('800px', '950px');
2. 获取编辑器的内容
/
/仅仅单纯获取编辑器的⽂本内容，不能识别换⾏及⼀些特殊符号的转义
3. 给编辑器赋值
editor.setValue("");
以上的⼏种做法都没办法满⾜我当时在项⽬中遇到的问题就是：要取出代码编辑器的内容传给服务端，⽽且服务端还要将我传的内容再返给我供页⾯初始化值⽤，但是因为getValue取出的内容是不能转义甚⾄不能识别换⾏，导致报错，所以我要将编辑器取到的内容显⽰再textarea⾥⾯。于是即是：
<textarea id="funAttri" >${item.funAttri!}</textarea>
//因为我⽤的beetl模板，所以可以直接读取后台穿的值${item.funAttri!}
先将编辑器设置内容，⽽这个内容就是服务端传过来的
editor.setValue($("#funAttri").html());
这个时候直接取出编辑器的内容即可：
editor.save();//同步CodeMirror的数据到textarea（这⼀步⾄关重要）
var funattri = $("#funAttri").val();//直接取出即可，之后可以作为内容再次提交给服务端
好了，以上便是我所遇到的问题，其实最关键的⼀步就是将value值同步到textarea⾥⾯，这样取出的就是html了
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论