js版本-ACE编辑器SQL格式化等功能_js sql编辑器

网上找了很多资源整合了下，封装成一个新的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);

控件下载