Codiad

Codiad est un IDE tout en PHP à héberger soit même.

Il permet donc d’avoir accès via un simple navigateur à l’ensemble de son code.

Installation

Il faut pour l’installation

  • un serveur (debian par exemple)
  • apache (ou autre)
  • php
  • codiad

Note

pas besoin de base de donnée

apt-get update
apt-get install apache2 php5 libapache2-mod-php5 php5-mcrypt git

ajout du virtualhost pour codiad avec une écoute sur le port 8080

vi /etc/apache2/sites-enabled/codiad
# conf/sites-enabled/codiad
<VirtualHost *:8080>
#        ServerName test1.fr
#        ServerAlias *.test1.fr

    DocumentRoot "/var/www/Codiad"
    <Directory "/var/www/Codiad">
            AllowOverride None
            Options None
            Order allow,deny
            Allow from all
    </Directory>

    ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
    <Directory "/usr/lib/cgi-bin">
            AllowOverride None
            Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
            Order allow,deny
            Allow from all
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/codiad_error.log

    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel debug

    CustomLog ${APACHE_LOG_DIR}/codiad_access.log combined

</VirtualHost>
cd  /etc/apache2/sites-available
ln -s ../sites-enabled/codiad .
vi /etc/apache2/ports.conf
...
Listen 8080
...

redémarrage du service apache

/etc/init.d/apache2 restart

installation de codiad

cd /var/www
git clone https://github.com/Codiad/Codiad.git
cd Codiad
cp config.example.php config.php
chown www-data:www-data config.php workspace/ plugins/ themes/ data/

On doit modifier le fichier config.php

vi /var/www/Codiad/config.php
// PATH TO CODIAD
define("BASE_PATH", "/var/www/Codiad");

// BASE URL TO CODIAD (without trailing slash)
define("BASE_URL", "192.168.65.132:8080");

Note

il faut remplacer 192.168.65.132 par votre ip ou votre nom de domaine

Vous pouvez maintenant lancer Codiad sur http://myip:8080/ et finir l’installation

Warning

lors de ma première connexion il m’a fallut sortir puis re-rentrer pour que je puisse sauver des fichiers et modifier ma configuration

Optimisation

Au niveau configuration on peut prendre comme theme terminal ou monokai et modifier la taille de la police

Il est possible via le MarketPlace d’ajouter des plugins:

  • codeTransfer necessite l’installation de libssh2-php (apt-get install libssh2-php) pour la connexion scp (ssh)
  • CodePrint (soucis avec la fenetre)
  • ColorPicker
  • Terminal (password par défaut terminal)
  • DiffViewer
  • AutoUpdate (il faut modifier le fichier config.php pour activer la variable UPDATEURL ) permet des mise sà jours auto

Error

il faut ajouter une coloration pour rst et voir pour intégrer le terminal dans l’éditeur

Afin de pouvoir uploader des fichier importants il faut modifier le fichier /etc/php5/apache2/php.ini en ajoutant

; Maximum allowed size for uploaded files.
upload_max_filesize = 40M

; Must be greater than or equal to upload_max_filesize
post_max_size = 40M

Mise à jours

l’objectif est d’installer la nouvelle version avec copie du fichier config et des dossiers workspace plugins themes data

/etc/init.d/apache2 stop
cd /var/www
mv Codiad CodiadOld
git clone https://github.com/Codiad/Codiad.git
cd Codiad
cp ../CodiadOld/config.php .
cp ../CodiadOld/workspace/* workspace
cp ../CodiadOld/plugins/* plugins
cp ../CodiadOld/data/* data
chown www-data:www-data config.php workspace/ plugins/ themes/ data/
/etc/init.d/apache2 start

part la suite il suffit de supprimer le dossier CodiadOld

Il est aussi possible d’utiliser le plugin AutoUpdate. Pour cela il faut:

  • installer le plugin
  • modifier config.php pour activer la variable UPDATEURL
  • modifier les droits sur l’ensemble du dossier Codiad
chown -R www-data:www-data /var/www/Codiad

Ajout du language restructuredText

il faut

  • créer un fichier /var/www/Codiad/components/editor/ace-editor/mode-rst.js
  • ajouter rst dans le fichier /var/www/Codiad/components/editor/init.js
  • ajouter rst dans le fichier components/fileext_textmode/class.fileextension_textmode.php pour la variable $availiableTextModes

le fichier mode-rst.js contient

ace.define("ace/mode/rst_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"], function(require, exports, module) {
"use strict";

var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;

var rstHighlightRules = function() {
    this.$rules =
        {
    "start": [
        {
            token : "comment",
            regex : "^\t.*$"
        },
        {
            token : "comment",
            regex : "^    .*$"
        },
        {
            token : "keyword",
            regex : "^[\\*]+$|^[#]+$|^[=]+$|^[\-]+$|^[\.]+$|^[\+]+$"
        },
        {
            token : "string",
            regex : "^\.\. [\\w\-]+::|^::$"
        },
        {
            token : "constant.numeric",
            regex : "\\*[^ $\\*]+\\*"
        },
        {
            token : "constant.numeric",
            regex : "\\*\\*[^ $\\*]+\\*\\*"
        },
        {
            token : "constant.numeric",
            regex : "\\+[\+\-]+\\+|\\+[\+=]+\\+|\\|"
        },
        {
            token : "constant.numeric",
            regex : "^=[= ]+=$|^-[- ]+-$"
        },
    ],
    "qqstring": [
    ]
}

};

oop.inherits(rstHighlightRules, TextHighlightRules);

exports.rstHighlightRules = rstHighlightRules;
});

ace.define("ace/mode/rst",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/rst_highlight_rules"], function(require, exports, module) {
"use strict";

var oop = require("../lib/oop");
var TextMode = require("./text").Mode;
var rstHighlightRules = require("./rst_highlight_rules").rstHighlightRules;

var Mode = function() {
    this.HighlightRules = rstHighlightRules;
};
oop.inherits(Mode, TextMode);

(function() {

    this.lineCommentStart = ";";

    this.$id = "ace/mode/rst";
}).call(Mode.prototype);

exports.Mode = Mode;
});

Note

il faudra dans paramètre extension ajouter une relation pour rst

Modification du plugin ToDo

Il existe un excellent plugin nommé ToDoqui permet de voir le tag TODO présent dans le fichier “en cours”.

Le manque est évident: on ne liste que les TODOs et pas l’ensemble des TAGS:

  • TODO
  • FIXME
  • BUG
  • NOBUG
  • REQ
  • RFE
  • IDEA
  • NOTE
  • HACK
  • PORT
  • CAVEAT
  • FAQ
  • GLOSS
  • SEE
  • TODOC
  • CRED
  • STAT
  • RVD

Il suffit de modifier le fichier init.js du plugin pour que cela fonctionne

/*
    Copyright (c) 2014, RKE
*/

(function() {
  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
  codiad.ToDo = (function() {
    /*
            basic plugin environment initialization
    */
    function ToDo(global, jQuery) {
      this.disableToDo = __bind(this.disableToDo, this);
      this.updateToDo = __bind(this.updateToDo, this);
      this.initToDoListContainer = __bind(this.initToDoListContainer, this);
      this.init = __bind(this.init, this);
      var _this = this;
      this.codiad = global.codiad;
      this.amplify = global.amplify;
      this.jQuery = jQuery;
      this.scripts = document.getElementsByTagName('script');
      this.path = this.scripts[this.scripts.length - 1].src.split('?')[0];
      this.curpath = this.path.split('/').slice(0, -1).join('/') + '/';
      this.jQuery(function() {
        return _this.init();
      });
    }
    /*
            main plugin initialization
    */
    ToDo.prototype.init = function() {
      return this.initToDoListContainer();
    };
    /*
            init button and menu on bottom menu
            and append handler
    */
    ToDo.prototype.initToDoListContainer = function() {
      var todoButton, todoMenu,
        _this = this;
      todoButton = '<div class="divider"></div>\n<a id="todoButton">\n      <span class="icon-check"></span>TAGS\n</a>';
      todoMenu = '<ul id="todoMenu" class="options-menu"></ul>';
      this.jQuery('#editor-bottom-bar').append(todoButton);
      this.$todoButton = this.jQuery('#todoButton');
      this.$todoMenu = this.jQuery(todoMenu);
      this.codiad.editor.initMenuHandler(this.$todoButton, this.$todoMenu);
      this.$todoMenu.on('click', 'li a', function(element) {
        var line;
        line = _this.jQuery(element.currentTarget).data('line');
        if (line) {
          _this.codiad.active.gotoLine(line);
          return _this.codiad.active.focus();
        }
      });
      this.amplify.subscribe('active.onFocus', function() {
        return _this.updateToDo();
      });
      this.updateInterval = null;
      this.amplify.subscribe('active.onOpen', function() {
        _this.updateToDo();
        return _this.codiad.editor.getActive().getSession().on('change', function(e) {
          clearTimeout(_this.updateInterval);
          return _this.updateInterval = setTimeout(_this.updateToDo, 1000);
        });
      });
      return this.amplify.subscribe('active.onClose', function() {
        return _this.disableToDo();
      });
    };
    /*
            update todo button and menu
    */
    ToDo.prototype.updateToDo = function() {
      var content, editor, editorToDo, index, line, loc, matches, _i, _len;
      var listTags = ["TODO", "FIXME", "BUG", "NOBUG", "REQ", "RFE", "IDEA", "NOTE", "HACK", "PORT", "CAVEAT", "FAQ", "GLOSS", "SEE", "TODOC", "CRED", "STAT","RVD"];
      var listTagsLength = listTags.length;
      content = this.codiad.editor.getContent();
      loc = content.split(/\r?\n/);
      matches = [];
      editorToDo = [];
      for (index = _i = 0, _len = loc.length; _i < _len; index = ++_i) {
        line = loc[index];
        for (var i = 0; i < listTagsLength; i++) {
            var currentTag = listTags[i];
            var rgxp = new RegExp(currentTag + '\s*:(.*)');
        if (line.indexOf(currentTag) > -1 && line.match(rgxp)) {
              matches.push('<li><a data-line="' + (index + 1) + '">' + currentTag + ':' + line.match(rgxp)[1] + '</a></li>');
              editorToDo.push({
                row: index,
                column: 1,
                text: line.match(rgxp)[1],
                type: "info"
               });
            }
        }
      }
      if (matches.length > 0) {
        this.$todoMenu.empty().append($(matches.join("")));
        editor = this.codiad.editor.getActive().getSession();
        editor.setAnnotations(editorToDo.concat(editor.getAnnotations()));
        return this.$todoButton.find('span').removeClass('icon-check').addClass('icon-clipboard');
      } else {
        return this.disableToDo();
      }
    };
    /*
            disable ToDoList
    */
    ToDo.prototype.disableToDo = function() {
      this.$todoMenu.empty().append("<li><a>Nothing to do</a></li>");
      return this.$todoButton.find('span').removeClass('icon-clipboard').addClass('icon-check');
    };
    return ToDo;
  })();
  new codiad.ToDo(this, jQuery);
}).call(this);

et maintenant nous avons l’ensemble des tags

Gestion des extensions

Codiad a une tendance a essayer de tout ouvrir y compris des fichiers doc, xls, pdf ....

On peut modifier ce comportement en modifiant la variable noOpen du fichier components/filemanager/init.js