网上找了很多资源整合了下,封装成一个新的JQ版本客户端控件供CtlCodeBox前端调用:
调用格式如下:
引入库:
<script src="codeformatter/ace/ace.js"></script>
<script src="codeformatter/ace/ext-language_tools.js"></script>
<script src="codeformatter/sqlFormatter/sql-formatter.min.js"></script>
<script src="codeformatter/jQuery/jquery-1.12.4.min.js"></script>
<script src="CodeCtl.js"></script>
定义元素(必须定义ID)
<div id="sqlEditor"></div>
初始化js对象创建控件:
<script>
$("#sqlEditor").CtlCodeBox({
height:500,//ace编辑框高度
lineHeight:25,//ace编辑框行高
fontSize:16,//编辑框字体大小
uppercase:false,//是否强制转大写
editable:true//是否可读写
});
</script>
一个基本的sql 格式化编辑器就创建好了。
内部控件调用对象为:
var editor = $("#sqlEditor").CtlCodeBox({....}).data("CtlCodeBox");
即控件创建好之后可以直接使用$(selector).data("CtlCodeBox")取得对象。
//设置值
editor.setValue(str);
//设置格式化的值
editor.setFormatValue(str);
//获取值
editor.getValue();
//获取格式化的值
editor.getFormatValue();
//获取压缩的值
editor.compressValue(str);
//是否只读 readOnly
editor.readOnly(true/false);