README.md · xiaozhou/XCE

# XCE

#### 介绍
基于layui界面的代码编辑器，结合ace,tree的改造组件XAce,XTree组件，实现文件导航、修改、新建、删除。 实现文件前端编辑保存。

#### 演示地址
[https://imlzw.gitee.io/xce]( https://imlzw.gitee.io/xce)

#### 组件预览
![输入图片说明](https://images.gitee.com/uploads/images/2020/1113/163639_10fa206b_432156.gif "xce3.gif")

#### 安装说明
1. 复制xce、xAce、xTree、xUtils文件夹到layui的模块文件夹下（类似***/lay/modules/）
2. 复制font-awesome文件夹到webroot目录下（ps:用到的图标，后面考虑移除）

#### 使用说明
1. 创建基础表单元素
```
<div id="xce-editor" style="height: 800px"></div>
```

2. js渲染组件
```
layui.use(["xce"],function(){
    let xce = layui.xce;
    xce.render({
	elem: "#xce-editor",
	api: "/api", // xce对应后台接口
    })
});
```
#### 快速键
1. 保存文件内容快捷：Ctrl+S,Command+S
2. 另参考[ACE](https://ace.c9.io/)的官方文档

#### 配置说明

```
let config = {
	elem: "#xce-editor",// jquery元素选择器
	api: "/api", // xce对应后台接口
	readOnly: false, // 是否为只读模式，默认:false
}
```

#### 数据格式说明
1.加载文件列表接口：/api?oper=list

数据返回样例格式:
```
{
    "success": true,
    "data": [{
            "path": "/_include",
            "isFolder": true,
            "children": [{
                    "path": "/_include/controller",
                    "isFolder": true,
                    "children": [{
                            "path": "/_include/controller/TableModelController.java",
                            "isFolder": false,
                            "id": "/_include/controller/TableModelController.java",
                            "title": "TableModelController.java",
                            "spread": false
                        }
                    ],
                    "id": "/_include/controller",
                    "title": "controller",
                    "spread": true
                }, {
                    "path": "/_include/sql",
                    "isFolder": true,
                    "children": [{
                            "path": "/_include/sql/TableModel.stl",
                            "isFolder": false,
                            "id": "/_include/sql/TableModel.stl",
                            "title": "TableModel.stl",
                            "spread": false
                        }
                    ],
                    "id": "/_include/sql",
                    "title": "sql",
                    "spread": true
                }, {
                    "path": "/_include/views",
                    "isFolder": true,
                    "children": [{
                            "path": "/_include/views/edit.html",
                            "isFolder": false,
                            "id": "/_include/views/edit.html",
                            "title": "edit.html",
                            "spread": false
                        }, {
                            "path": "/_include/views/index.css",
                            "isFolder": false,
                            "id": "/_include/views/index.css",
                            "title": "index.css",
                            "spread": false
                        }, {
                            "path": "/_include/views/index.html",
                            "isFolder": false,
                            "id": "/_include/views/index.html",
                            "title": "index.html",
                            "spread": false
                        }
                    ],
                    "id": "/_include/views",
                    "title": "views",
                    "spread": true
                }
            ],
            "id": "/_include",
            "title": "_include",
            "spread": true
        }
    ]
}

```
2. 文件保存接口：/api?oper=save&path=xxxxxx
```
{
    "success": true,
    "message": "",
}
```
3. 文件移动/重命名接口：/api?oper=move&from=xxxxxx&to=xxxxxx
```
{
    "success": true,
    "message": "",
}
```
4. 文件删除接口：/api?oper=delete&path=xxxxxx
```
{
    "success": true,
    "message": "",
}
```
5. 文件内容查看接口：/api?oper=content&path=xxxxxx

- 如果成功，返回文件流

- 如果失败，返回类似如下格式：
```
{
    "success": false,
    "message": "文件找不到!",
}
```

xiaozhou/XCE

简介

发行版

贡献者

近期动态

xiaozhou/XCE .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

xiaozhou/XCE