您现在的位置:首页 > 博客 > 前端插件 > CodeMirror > 正文
CodeMirror在线代码编辑器使用以及如何取值
http://www.bbnsc.com/      2022/5/21 12:38:08      来源:贝恩斯网络·技术博客      点击:
⽬前CodeMirror在线代码编辑器在运⽤还蛮⼴泛的,⽀持多种语⾔,⾼度可定制。⽀持语⾔有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
//必须引⼊,是CodeMirror的核⼼样式⽂件
//是编辑器模板,可以根据需要修改
//全屏⽀持样式⽂件
//需要引⼊的核⼼js
页⾯展⽰:

关于配置:
 
当然,配置项有很多,以上只是⼀部分,具体的配置项内容可以参考官⽹,有很多,可以酌情使⽤。
接下来就是项⽬中运⽤到⽐较多的情况说明:
1. 设置代码框的⼤⼩
editor.setSize('800px', '950px');
2. 获取编辑器的内容
editor.getValue();
//仅仅单纯获取编辑器的⽂本内容,不能识别换⾏及⼀些特殊符号的转义
3. 给编辑器赋值
editor.setValue("");
以上的⼏种做法都没办法满⾜我当时在项⽬中遇到的问题就是:要取出代码编辑器的内容传给服务端,⽽且服务端还要将我传的内容再返给
我供页⾯初始化值⽤,但是因为getValue取出的内容是不能转义甚⾄不能识别换⾏,导致报错,所以我要将编辑器取到的内容显⽰再
textarea⾥⾯。于是即是:
${item.funAttri!}
//因为我⽤的beetl模板,所以可以直接读取后台穿的值${item.funAttri!}
先将编辑器设置内容,⽽这个内容就是服务端传过来的
editor.setValue($("#funAttri").html());
这个时候直接取出编辑器的内容即可:
 editor.save();//同步CodeMirror的数据到textarea(这⼀步⾄关重要)
 var funattri = $("#funAttri").val();//直接取出即可,之后可以作为内容再次提交给服务端
好了,以上便是我所遇到的问题,其实最关键的⼀步就是将value值同步到textarea⾥⾯,这样取出的就是html了
发表评论(0)
姓名 *
评论内容 *
验证码 *图片看不清?点击重新得到验证码