Login

TVTeditor


TreeView Text Editor web based using Codemirror, Enhsplitter & Fontawesome.

Example:

dir_json.php

<?php

header('Content-Type: application/json');
// header('Access-Control-Allow-Origin: http://your-domain.com');

// Include class tvteditor.php
include_once('lib/TVTeditor.php');

// nama folder yang akan di scan.
// $dir = 'dir1/dir2';
$dir = './';

$tvteditor =  new TVTeditor($dir);

// Scan direktori
if(isset($_POST['path'])){

    // Jalankan fungsi scan->('SUB DIR NAME')
    $res = $tvteditor->scan($_POST['path']);
    
    // Output list direktori & file dalam format JSON
    echo json_encode($res);
    
}

// Read file
else if(!empty($_POST['file'])){

    $res = $tvteditor->read($_POST['file']);
    
    // Output isi file
    echo json_encode($res);

}

// Update file
else if(!empty($_POST['update'])){

    $isi = (empty($_POST['isi']) ? '' : $_POST['isi']);
    $res = $tvteditor->update($_POST['update'], $isi);
    
    echo json_encode($res);

}

Usage:

CSS

<!-- Fontawesome -->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Codemirror -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/dialog/dialog.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/icecoder.min.css">

<!-- enhsplitter -->
<link type="text/css" rel="stylesheet" href="src/css/jquery.enhsplitter.css"/>

<!-- Custom Style -->
<link type="text/css" rel="stylesheet" href="src/css/tvteditor.css" />

HTML

<div id="tvteditor"></div>

JS

<!-- Codemirror -->
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/javascript/javascript.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/css/css.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/clike/clike.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/php/php.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/ruby/ruby.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/python/python.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/vb/vb.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/dialog/dialog.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/search/searchcursor.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/addon/search/search.min.js"></script>

<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

<!-- enhsplitter.js -->
<script src="src/js/jquery.enhsplitter.js"></script>

<!-- tvteditor.js -->
<script src="src/js/tvteditor.js"></script>
<script>
$(document).ready(function(){

    tvteditor({
    
        // your host / domain
        host: 'http://localhost/tvteditor/',

        // api
        api: 'dir_json.php', 

        // icon: http://fontawesome.io/icons/
        // mode: https://codemirror.net/mode/
        file: {
            html: {
                icon: 'file-code-o',
                mode: 'text/html'
            },
            css: {
                icon: 'file-code-o',
                mode: 'text/css'
            },
            js: {
                icon: 'file-code-o',
                mode: 'text/javascript'
            },
            php: {
                icon: 'file-code-o',
                mode: 'application/x-httpd-php'
            },
            json: {
                icon: 'file-code-o',
                mode: 'application/json'
            },
            txt: {
                icon: 'file-code-o',
                mode: 'application/json'
            },
            asp: {
                icon: 'file-code-o',
                mode: 'text/x-vb'
            },
            aspx: {
                icon: 'file-code-o',
                mode: 'text/x-vb'
            },
            jsp: {
                icon: 'file-code-o',
                mode: 'text/x-java'
            },
            rb: {
                icon: 'file-code-o',
                mode: 'text/x-ruby'
            },
            py: {
                icon: 'file-code-o',
                mode: 'text/x-python'
            }
        }

    });

});
</script>

Demo Fork me on GitHub