codeMirror插件使用讲解

前端之家收集整理的这篇文章主要介绍了codeMirror插件使用讲解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

codeMirror是一款十分强大的代码编辑插件,提供了十分丰富的API,最近在项目中用到了这款插件,于是在这里给大家分享下使用方法和心得:

codeMirror调用非常方便

首先在页面中载入插件CSS及JS文件

注意文件的放置位置

下一步在html页面中编写好代码

shell dio" name="script_once_type" id="script_once_type2"> bat dio" name="script_once_type" id="script_once_type3"> python
@H_301_26@default @H_301_26@3024-night

调用关键代码如下:

显示行号 mode:"shell", //默认脚本编码 lineWrapping:true,//是否强制换行 });

JS配置代码如下:

方法 }); //选择脚本类型JS var txt1=$("#script_once_code").val(); var txt2=''; var txt3=$("#code2").val(); $(".ck-code").click(function(){ var txt=editor.getValue(); //editor.getValue()获取textarea中的值 var lang=$(this).prop("id"); if(lang=="script_once_type1") { editor.setOption("mode","shell");//editor.setOption()设置脚本类型 editor.setValue(txt1);// editor.setValue()设置textarea中的值 } else if(lang=="script_once_type2") { editor.setOption("mode","perl"); editor.setValue(txt2); } else { editor.setOption("mode","python"); editor.setValue(txt3); } });

最终界面如下:

如需配置更多参数,可以访问codeMirror插件官网: 查看其配置文档。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/js/42455.html

猜你在找的JavaScript相关文章