file-code-editor v1.0.2

file-code-editor安装和使用

Installation

npm install file-code-editor

配置和API

必须配置项：

1. tabs: 导航栏标签(tab)对象数组

   tab对象：

   属性	类型	备注
   id	string or number	标签唯一标识(用户指定)
   name	string	标签名(用户指定)
   value	string	code-editor初始值(用户指定)

示例:

    const tabs = [
    {
        id: 1,
        name: "index.js",
        value: 'index.js content'
    },{
        id: 2,
        name: "App.css",
        value: 'App.css content'
    }]


         
    

2. configure: 相关事件配置

   • error: (bool，default:false)是否执行用户自定义的错误处理回调，为true时请务必定义errorCallBack回调函数。

   • errorCallBack:()=>{} 用户自定义错误处理回调函数

   • 右键菜单 Create File 点击事件

     addFile: (parentFolder, newFile)=>{}

       参数说明：
       - parentFolder: (fileNode)新建文件所在文件夹的节点数据.若新建文件不存在上级目录，parentFolder=null
       - newFile: (fileNode)新建文件的节点数据,默认文件名为"new file"
       
       返回值：promise
       

- 右键菜单 *Create Folder* 点击事件

    addFolder: (parentFolder,newfolder)=>{}
    
        参数说明：
        - parentFolder: (fileNode)新建文件夹所在文件夹的节点数据.若新建文件夹不存在上级目录，parentFolder=null
        - newfolder: (fileNode)新建文件夹的节点数据,默认文件名为"new folder"
        
        返回值：promise

- 右键菜单 *Rename* 点击事件

    rename: (beforeFile，afterFile)=>{}

        参数说明：
        - beforeFile: (fileNode)重命名前的文件节点数据
        - afterFile: (fileNode)重命名后的文件节点数据
        
        返回值：promise

- 右键菜单 *Delete* 点击事件

    remove: (fileNode)=>{}

        参数说明：
        - fileNode: (fileNode)删除的节点数据
        
        返回值：promise
     
- 点击文件树节点事件 

    clickFile: (fileNode)=>{}
    
        参数说明：
        - fileNode: (fileNode)点击的文件节点数据
        
        返回值：promise

可选项：id

指定文件树id，生成文件tId前缀，用于标识文件所属文件树。(default:filetree)

example

import * as React from 'react';
import Ztree from 'file-ztree'

function App() {
    const filetree = [
        {
            filename: "pNode0 1",
            isFolder: true,
            extend: true,
            subdirectory: [
                {
                    filename: "pNode1 1",
                    isFolder: true,
                    extend: false,
                    subdirectory: [
                        {
                            filename: "sNode11 1.js",
                            isFolder: false,
                        },
                        {
                            filename: "sNode11 2.html",
                            isFolder: false,
                        },
                        {
                            filename: "sNode11 3.css",
                            isFolder: false,
                        }
                    ]
                }
            ]
        },
        {
            filename: "pNode0 2",
            isFolder: true,
            extend: false,
            subdirectory: []
        },
        {
            filename: "sNode0 3.js",
            isFolder: false,
        }
    ]


    const configure = {
        error: false,
        errorCallBack: () => {
            console.log("error");
        },
        addFile: (parentFolder, newFile) => {
            console.log("APP configure file _source", newFile)
            console.log("APP configure parentNode是：", parentFolder)

            return new Promise((resolve, reject) => {
                let num = Math.round(Math.random() * 10);
                if (num % 2 === 0) {
                    console.log(num);
                    resolve();
                } else {
                    console.log(num);
                    reject();
                }
            })
        },
        addFolder: (parentFolder, newFolder) => {
            console.log("APP configure folder _source", newFolder)
            console.log("APP configure parentNode是：", parentFolder)

            return new Promise((resolve, reject) => {
                let num = Math.round(Math.random() * 10);
                if (num % 2 === 0) {
                    console.log(num);
                    resolve();
                } else {
                    console.log(num);
                    reject();
                }
            })
        },
        rename: (beforeFile, afterFile) => {
            console.log("APP configure rename _source:", afterFile)
            console.log("APP configure rename oldsource", beforeFile);

            return new Promise((resolve, reject) => {
                let num = Math.round(Math.random() * 10);
                if (num % 2 === 0) {
                    console.log(num);
                    resolve();
                } else {
                    console.log(num);
                    reject();
                }
            })
        },
        remove: (fileNode) => {
            console.log("APP remove _source", fileNode);

            return new Promise((resolve, reject) => {
                let num = Math.round(Math.random() * 10);
                if (num % 2 === 0) {
                    console.log(num);
                    resolve();
                } else {
                    console.log(num);
                    reject();
                }
            })
        },
        clickFile: (fileNode) => {
            console.log("APP clickFile _source", fileNode);

            return new Promise((resolve, reject) => {
                let num = Math.round(Math.random() * 10);
                if (num % 2 === 0) {
                    console.log(num);
                    resolve();
                } else {
                    console.log(num);
                    reject();
                }
            })
        }
    };

    return (
        <div className="App">
            <Ztree
                id="treeDemo"
                configure={configure}
                filetree={filetree}
            />
        </div>
    );
}

export default App;