mtb_dcatadmin_plus/resources/views/admin/pages-custom/ace.blade.php

<style>
    .content-header {
        display: none;
    }
    .left-panel {
        background-color: #fff; /* 左侧面板的背景色 */
        height: 100vh; /* 高度占满 */
    }
    .right-panel {
        background-color: #fff; /* 左侧面板的背景色 */
        height: 100vh; /* 高度占满 */
        max-height: 100vh; /* 设置最大高度 */
        overflow-y: auto; /* 启用垂直滚动条 */
        border-radius: 4px; /* 圆角 */
    }
    .main-panel {
        background-color: #e9ecef; /* 右侧面板的背景色 */
        height: 97vh; /* 高度占满 */
    }
    .main-panel-header {
        background-color: #fff;
    }
    .card-body {
        max-height: 100vh; /* 设置最大高度 */
        overflow-y: auto; /* 启用垂直滚动条 */
        border-radius: 4px; /* 圆角 */
    }

    #editor {

        background-color: #1e1e1e;
    }

    .submenu {
        list-style: none;
        padding-left: 3px;
    }
    .submenu .list-group-item {
        padding: 10px 0px 10px 20px;
    }
</style>


<div class="container-fluid">
    <div class="row">
        <div class="col-2 left-panel"> <!-- 左侧20% -->
            {!!$leftForm!!}
            <!-- 代码树 start-->
            <div class="card-body"></div>
            <!-- 代码树 end-->
        </div>
        <div class="col-8 main-panel"> <!-- 右侧80% -->
            <div class="main-panel-header">
                <button type="button" class="btn btn-primary btn-sm" id="save-btn">保存</button>
            </div>
            <div class="main-panel-content" id="editor" style="width: 100%; height: 100%;"></div>
            <input type="hidden" name="template_id"  id="template_id" />
        </div>
        <div class="col-2 right-panel" id="variables-list">
        </div>
    </div>
</div>

<script src="/vendor/ace/ace.js" type="text/javascript"></script>

<script>
    // 创建 Ace 编辑器实例
    var editor = ace.edit("editor");
    // 设置语言
    editor.getSession().setMode("ace/mode/html");
    // 设置主题
    editor.setTheme("ace/theme/monokai");
    editor.setAutoScrollEditorIntoView(true);
    // 其他配置
    editor.setOptions({
        showPrintMargin: true // 不显示打印边距
    });

    $(document).ready(function() {
        // 创建 Ace 编辑器实例
        var actionclick = function() {
            $('.file-action').click(function() {
                var id = $(this).attr('file_id');
                //编辑代码
                $.ajax({
                    url: '/prime-control/dist-template/ace',
                    type: 'POST',
                    data: {
                        act:'content',
                        id: id
                    },
                    success: function(response) {
                        $("#template_id").val(id);
                        editor.setValue(response);
                    }
                });
                //显示右边变量列表
                $.ajax({
                    url: '/prime-control/dist-template/ace',
                    type: 'POST',
                    data: {
                        act:'aceRight',
                        template_id: id,
                        dist_id: $('input[name="dist_id"]').val(),
                        appearance_id: $('select[name="appearance_id"]').val()
                    },
                    success: function(response) {
                        $("#variables-list").html(response);
                    }
                });
            });
        }
        var postData = function () {
            var appearance_id = $('select[name="appearance_id"]').val();
            var dist_id = $('input[name="dist_id"]').val();
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'tree',
                    appearance_id: appearance_id,
                    dist_id: dist_id
                },
                success: function(response) {
                    $('.card-body').html(response);
                    actionclick();
                }
            });
        }
        $('select[name="appearance_id"]').change(function() {
            postData();
        });
        $('input[name="dist_id"]').change(function() {
            postData();
        });
        $("#save-btn").click(function() {
            var template_id = $("#template_id").val();
            var content = editor.getValue();
            if (template_id == '') {
                Dcat.error('操作失败:请先选择模板');
                return false;
            }
            $.ajax({
                url: '/prime-control/dist-template/ace',
                type: 'POST',
                data: {
                    act:'save',
                    template_id: template_id,
                    content: content
                },
                success: function(response) {
                    if (response == '1') {
                        Dcat.success('保存成功');
                    }else{
                        Dcat.error('保存失败');
                    }
                }
            });
        })
    });
</script>