IEditor Project Html5 - L'éditeur javascript pour le web - franckysolo-productions, développeur web

L'éditeur de texte pour votre site web

IEditor est un éditeur de texte à intégrer à votre site web. Voici les principales fonctionnalités :

Mise en page, formatage de texte et de code
Ajout de photos, vidéos et animations flash
Téléchargement d'images via ajax

Il existe en version classic et une version adaptée pour le framework php de Zend.

Requis

IEditor utilise les langages suivant : html5(*), javascript, php, xml, xsl, css3
Serveur php : version › 5.2 et extension xsl activée

Classic Version

Description

Indy Framework 1.0 - light version for IEditor
IEditor 1.0 Javascript package
Mootools 1.3.0 Javascript Framework
GeSHi 1.0.8.9 Generic Syntax Highlighter

Zend Version

Description

Zend Framework 1.11.11 - php framework
IEditor 1.0 Javascript package
Mootools 1.3.0 Javascript Framework
GeSHi 1.0.8.9 Generic Syntax Highlighter

*IEditor fonctionne avec les navigateurs récents :

IE 9

Firefox 7

Opera 11

Safari 5.1.2

Chrome 15

Inclusion des fichiers javascript et css

Il faut tout d'abord inclure dans l'entête de votre page html, les fichiers javascript :

Code : html4strict - Sélectionner

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>IEditor</title>
<link href="public/css/ieditor.css"  rel="stylesheet" type="text/css" media="all" />
 
<script type="text/javascript" src="public/js/mootools.js"></script>
<script type="text/javascript" src="public/js/IEditor/package-IEditor.js"></script>
</head>

Affichage de l'éditeur

Pour afficher l'éditeur, il suffit simplement d'inclure via php le fichier de template phtml :

Code : php - Sélectionner

<?php require_once 'IEditor.phtml';?>

Lancement de l'éditeur

Pour utiliser l'éditeur, tapez le code suivant dans un fichier main.js et l'inclure entre les balises head à la suite des autres sources javascript :

Code : javascript - Sélectionner

window.addEvent('domready', function () {
   var editor = new IEditor('form');
   editor.run(); 
});

Inclusions de la librarie Indy

Pour inclure la librairie Indy à l'application Zend ajoutez la ligne suivante dans le fichier de configuration ini.

Code : ini - Sélectionner

autoloaderNamespaces[] = "Indy_"

Inclusions des fichiers javascript et css

Assurez vous que les fichiers mootools.js, et package-IEditor.js sont situés dans le bon dossier, de même pour ieditor.css. Ensuite, pour inclure les fichiers javascript dans un système sans Layout, il faut inclure les fichiers javascript dans les balises head du fichier html utilisant l'éditeur. Sinon, ajouter au fichier Layout.phtml ces quelques lignes :

Code : php - Sélectionner

<?php 
echo $this->headLink()->appendStylesheet($this->baseUrl().'/css/ieditor.css').PHP_EOL;
echo $this->headScript()->setFile($this->baseUrl().'/js/mootools.js').PHP_EOL;
echo $this->headScript()->setFile($this->baseUrl().'/js/package-IEditor.js').PHP_EOL;           
?>

Le formulaire

Il faut ensuite créer une classe dans votre application représentant l'éditeur qui étend la classe Zend_Form.
Le template IEditor.phtml (cf Zend-Package-IEditor) est quelque peux modifier pour accepter les paramètres du formulaire Zend.

Code : php - Sélectionner

<?php
class Application_Form_IEditor extends Zend_Form
{
 
    private static $_defaultLangage = array(
                'php' => 'Php', 
                'javascript' => 'Javascript', 
                'css' => 'Css', 
                'html4strict' => 'Html', 
                'c' => 'C', 
                'cpp' => 'C++',
                'cpp-qt' => 'Qt',
                'java' => 'Java',
                'xml' => 'Xml',
                'actionscript' => 'Action-script',
                'sql' => 'Sql',
                'winbatch' => 'Batch'
        );
        
    public function init()
    {
        $this->addElement('textarea', 'text', array(
            'cols' => 84,
            'rows' => 10,
            'decorators' => array('viewHelper')
        ));
        $this->addElement('submit', 'submit');
     
        $this->setDecorators(array(
            array('ViewScript', array('viewScript' => 'IEditor.phtml'))
        ));
    }
    
    public static function getCodeLangage()
    {
        return self::$_defaultLangage;
    }
}
?>

Le contrôleur d'action

L'exemple utilise le contrôleur d'action index pour l'utilisation de l'éditeur. L'action parseAction() permet l'auto-visualisation via ajax. L'action ajaxAction() charge les images des dossiers assignés en paramètres à l'instance de l'éditeur.

Code : php - Sélectionner

<?php
class IndexController extends Zend_Controller_Action
{
    public function init()
    {       
        $this->form = new  Application_Form_IEditor();   
         
        $ajax = $this->_helper->getHelper('contextSwitch');
        $ajax->addActionContext('ajax', 'json')->initContext();     
    }
 
    public function indexAction()
    {
        $this->view->form = $this->form;
    }
 
    // Images utilisateurs dossiers
    public function ajaxAction()
    {
        $directory = htmlspecialchars($this->getRequest()->getPost('directory'));
        $baseUrl = Zend_Controller_Front::getInstance()->getBaseUrl();
        $baseUrl = rtrim($baseUrl, 'index.php') . '/images/'.$directory.'/';
        
        $tool = new Indy_Tool_FolderReader('images/'.$directory.'/');
        $tool->read();
        $json = array();
        foreach($tool->getFiles() as $entry)
        {
                foreach($entry as $file){                       
                        $json[] = stripslashes($directory . '/'. $file);
                }       
        }               
        $this->view->json = Zend_Json::encode($json);
        $this->_helper->getHelper('layout')->disableLayout();
    }
        // Auto-visualisation
    public function  parseAction()
    {
        $text = $this->getRequest()->getPost('text');
        $parser = new Indy_Parser_Zcode_Xml();          
        $this->view->text = $parser->parse(utf8_encode($text));
        $this->_helper->getHelper('layout')->disableLayout();
    }
}
?>

Upload d'images

Les dossiers contenant les images à uploader sont situés dasn le repertoire public/images/ de l'application Zend, par défaut un dossier upload est présent dans le package, vous pouvez assignés autant de dossier que nécéssaire. Pour utiliser le plugin d'upload d'images il faut ajouter une action upload, voici un exemple simplifié :

Code : php - Sélectionner

[...]
    public function uploadAction() 
    {
        if(isset($_FILES['userImage']['tmp_name']) and $_FILES['userImage']['error'] === 0)
        {
            $directory = (isset($_POST['directory'])) ? $_POST['directory'] : '';
            //verif size | extension | mime-type | rename 
            if(is_uploaded_file($_FILES['userImage']['tmp_name']))
            {
                if(move_uploaded_file($_FILES['userImage']['tmp_name'], '../public/images/' . $directory . '/'. $_FILES['userImage']['name']))
                        {
                                // TODO if you have to store in bdd done here
                                echo '<div style="color:green">le fichier est chargé sur le server</div>';
                        }
                        else
                        {
                                echo '<div style="color:red">Une erreur interne est survenu</div>';
                        }
                }
                else
                {
                        echo '<div style="color:red">Impossible de chargé le fichier</div>';
                }
        }
        else
        {
            echo '<div style="color: red;">Aucun fichier</div>';
        }
        $this->_helper->getHelper('layout')->disableLayout();
        $this->_helper->viewRenderer->setNoRender(true);
    }
[...]

Vérification du formulaire et du résultat

Pour la vérification du formulaire et le parsage du contenu écrit avec l'IEditor et on pourra utiliser le script suivant :

Code : php - Sélectionner

[...]
    public function indexAction()
    {
        $this->view->form = new Application_Form_IEditor();
       
         $parser = new Indy_Parser_Zcode_Xml();
         if($this->form->isValid($this->getRequest()->getPost())){
             $this->view->result = $parser->parse($this->form->getValue('text'));
         }   
    }
[...]

Et la vue correspondante index.phtml :

Code : phtml - Sélectionner

<div id="welcome">
    <h3>This is your project's main page</h3>
        <div class="result">
        <?php echo $this->result;?>
    </div>
    <div id="more-information">
        <?php echo $this->form;?>
    </div>   
</div>

Lancement de l'éditeur

Il faudra ajouter ce script entre les balises head du fichier contenant l'éditeur pour lui spécifier les bons chemins vers les fichiers et actions :

Code : javascript - Sélectionner

<script type="text/javascript">
window.addEvent('domready', function() {
        var path = "<?php echo $this->baseUrl();?>";
        var editor = new IEditor('form',{
                path : {
                        icons : path + "/images/iform/",
                        images :path + '/images/'
                },
                url: {
                        base :path,
                        toParse : 'index/parse',
                        toImage : 'index/ajax',
                        toUpload : 'index/upload'
                }
        });
        editor.run();           
)};
</script>

Modification du texte

Icons	Nom	Balise	Résultat	Paramètres
Gras	Gras	<gras>texte</gras>	texte	-
Italique	Italique	<italique>texte</italique>	texte	-
Barrer	Barrer	<barre>texte</barre>	texte	-
Souligner	Souligner	<souligne>texte</souligne>	texte	-
Couleur	Couleur	<couleur value="#FF0000">texte</couleur>	texte	Toutes les couleurs en hexadécimal de #000000 à #FFFFFF
Taille du texte	Taille du texte	<taille value="xx-large">texte</taille>	texte	Toutes les valeurs de la propriété css "font-size" : de xx-small à xx-large
Police de caractères	Police de caractères	<police value="Rockwell Extra Bold">texte</police>	texte	Arial, Verdana, Times New Romans, Comic Sans Ms, Rockwell Extra Bold
Titre	Titre	<titre value="h1">texte</titre>	texte	h1, h2, h3

Position du texte

Icons	Nom	Balise	Résultat	Paramètres
Marge	Marge	texte <marge">texte</marge>	texte texte	-
Position	Position	<position value="right">texte</position>	texte	left, right, center, justified
Flottant	Flottant	<flottant value="droit">texte</flottant>	texte	gauche, droit

Bouton intéractifs

Icons

Nom

Balise

Résultat

Paramètres

Tableau

<tableau><ligne><colonne>texte<colonne><ligne></tableau>

texte

Le nombre de ligne et de colonnes, le texte de chaque case

Liste à puces

<liste><puce>texte<puce></liste>

texte

texte de la puce

Liste à puces

<listnum><puce>texte<puce></listnum>

texte

texte de la puce

Lien

lien

L'adresse et texte du lien

Citation

<citation auteur="Dark Vador">luke la force est avec toi</citation>

Citation :Dark Vador

Luke, la force est avec toi

Le nom de l'auteur et la citation

Ancre

Ici

Le nom et le texte de l'ancre

Lien vers une ancre

Lien

<urlancre value="ici">Aller à l'ancre</urlancre>

Aller à l'ancre

Le nom de l'ancre et texte du lien

Image

<image>http://www.franckysolo-productions/public/images/img/img3.jpg</image>

Le nom de l'ancre et texte du lien

Image depuis dossier

Image depuis un dossier

<image>adresse de l'image</image>

Voir la démo

Le nom de l'ancre et texte du lien

clip média

Clip média

<clip>adresse du clip</clip>

Voir la démo

L'adresse de la video, type de média, largeur, hauteur

Bouton spéciaux

Icons	Nom	Balise	Résultat	Paramètres
Secret	Secret	<secret>Texte secret</secret>	Secret - (Cliquer pour afficher) Texte secret	-
Code	Code	<code type="c">print "test";</code>	Code : c - Sélectionner print "test";	Tous les langages supportés par GESHI
Video depuis You-Tube	Video depuis You-Tube	<video>adresse de la video you-tube</video>	Voir la démo	L'adresse de la vidéo
Alertes	Alertes : question infos error attention	<question>Quelle heure est t'il?</question>	Quelle heure est t'il?	-
Smiley	Smiley	<image>adresse du smiley</image>	Voir la démo	-
Agrandir le champ de texte	Agrandir le champ de texte	-	Voir la démo	-
Réduire le champ de texte	Réduire le champ de texte	-	Voir la démo	-
Envoyer des images	Envoyer des images sur le serveur	-	Téléchargez et tester le IEditor	-

IEditor 1.0

L'éditeur de texte pour votre site web

Requis

Classic Version

Description

Zend Version

Description

Démo IEditor 1.0

Prévisualisation :

Téléchargez IEditor - Open source project

Utilisation basique

Inclusion des fichiers javascript et css

Affichage de l'éditeur

Lancement de l'éditeur

Utilisation avec Zend Framework

Inclusions de la librarie Indy

Inclusions des fichiers javascript et css

Le formulaire

Le contrôleur d'action

Upload d'images

Vérification du formulaire et du résultat

Lancement de l'éditeur

Les boutons

Modification du texte

texte

Position du texte

Bouton intéractifs

Bouton spéciaux