ace 基础使用

效果图：

1，导入包

在pom.xml文件中配置`

<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>ace</artifactId>
   <version>04.09.2013</version>
</dependency>

2，引入包

<script type="text/javascript" src="${ctx}/webjars/ace/04.09.2013/src/ace.js"></script>
<script type="text/javascript" src="${ctx}/webjars/ace/04.09.2013/src-noconflict/ext-language_tools.js"></script>

3，js代码

// 这里省略了样式的编写
    <div class="flex flex-jusity-betreen wrap">
        <div>
            <div class="backgroundf">
                <table id="mygrid2" lay-filter="mygrid2"></table>
            </div>
        </div>
        <div class="rightform layui-form" lay-filter="form">
      
            <div class="layui-form-item height26" style=" margin: 0px;">
                <label class="layui-form-label">错误消息</label>
                <div class="layui-input-inline marginleft10" style="width:250px">
                    <input type="text" name="msg" id="msg" value="${msg}" placeholder="请输入错误消息" autocomplete="off" class="layui-input" style="height: 32px;">
                </div>
            </div>

            <label class="layui-form-label">规则表达式</label>
            <div class="layui-input-block" style="margin-left: 0;font-size: 13px;">
            <textarea name="rule" id="rule" placeholder="请输入规则表达式" class="layui-textarea textheight">${rule}</textarea>
            </div>
            <div class="layui-form-item">
                <div class="flex flex-jusity-around tjbtn">
                    <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary qx">取消</button>
                    <button class="layui-btn layui-btn-radius layui-btn-sm " onclick="tosavejson()">保存</button>
                </div>
            </div>
        </div>
    </div>

4，配置参数

	function initEvent(){
        //引入语言工具
        ace.require("ace/ext/language_tools");
        editor = ace.edit("rule");
        //选择主题
        editor.setTheme("ace/theme/eclipse");
        //选择语言
        editor.session.setMode("ace/mode/javascript");
        //各项设置
        editor.setOptions({
            enableBasicAutoCompletion : true,
            enableSnippets : true,
            enableLiveAutocompletion : true//智能补全
        });
        //预设值
        if (typeof ace == "undefined" && typeof require == "undefined") {
            document.body.innerHTML = "<p style='padding: 20px 50px;'>couldn't find ace.js file, <br>"
                + "to build it run <code>node Makefile.dryice.js full<code>"
        } else if (typeof ace == "undefined" && typeof require != "undefined") {
            require(["ace/ace"], setValue)
        } else {
            require = ace.require;
            // setValue()
        }
    }
    

5，点击表格数据行，写入ace中

  layui.table.on('row(mygrid2)', function(obj){  // 选中表格的数据，并标识
      var data = obj.data;
      var fieldcode=data.field_code;
      obj.tr.addClass('layui-bg-orange').siblings().removeClass('layui-bg-orange');//选中表格数据行样式显示
      setEditValue(fieldcode)//填入选中值
  });

  function setEditValue(fieldcode) {
        var relation="'"+"#"+"{"+fieldcode+"}'";
        var content=editor.getValue();
        editor.insert(relation);//填入鼠标光标所在位置
        editor.focus();
    }

6，其他属性

Ace editor 中文文档