[Plugin] kzAce Editeur de code basé sur Ace et Emmet

bazooka07bazooka07 PluXml Lead Developer, Moderator
octobre 2017 modifié dans Plugins
Il semble que l'éditeur Ace suscite un certain engouement en ce moment.
Enfin je pense que c'est surtout Emmet qui permet de "pisser" du code HTML à fond la caisse.

Ayant déjà développé un plugin pour l'excellent CodeMirror, j'ai voulu testé celui-ci.

Il existe déjà un plugin dans la nature mais qui ne satisfait pas mes exigences de qualité. :(

En conséquence, je suis reparti de zéro pour avoir quelque chose qui me convienne.
Et j'avais de tester requireJS qui évite de balancer des tonnes de balises <script> dans la page et zr=t permet de télécharger en parallèle plusieurs scripts javascript.

Comparé à Codemirror, je trouve que Ace a beaucoup de bogues dont un sévère qui empêche Emmet de fonctionner correctement.
De plus, le style d'affichage n'est pas trop user-friendly pour la page de réglages et de raccourcis clavier.
Il y a en plus des conflits de raccourcis clavier entre le système d'exploitation Ace et Emmet ( Ça sert Ctrl-Alt-H sous Linux ! ).
Il y a une barre d'état avec les boutons pour remplacer certains raccourcis clavier.

Un truc qui serait intéressant pour la prochaine version de PluXml :
il y a une gestion d'onglets pour l'affichage des feuilles de style des plugins.
C'est assez simple à mettre en place.

Télécharger la dernière version du plugin
2017-10-11 : Version 1.2.0 - remplacement nodeList.forEach() et Array.findIndex(). Ajout fonctionsaveDoc (raccourci Ctrl-S) - prise en compte de la class in-action-bar.
2017-09-05 : Version 1.1.1 - Choix possible du thème par défaut pour Ace. les onglets dans PluginCSS sont touhjours visibles.
2017-09-04 : Version 1.1.0 - Rétrocompatibilité vers PHP5.4 - Réduction de la taille de l'archive Zip (< 2Mo) - retouches cosmétiques
2017-08-31 : Version 1.0 - première release

Version sur Github pour d'éventuelles Pull Request (Il faut savoir utiliser NodeJS )

Réponses

  • bazooka07 a écrit:
    Il existe déjà un plugin dans la nature mais qui ne satisfait pas mes exigences de qualité. :(

    Je pense que tu veux parler de mon plugin .

    Quelles sont "tes exigences de qualité" qui ne sont pas satisfaites, stp ? Tu peux nous en dire plus ?
  • En parlant de qualité... :rolleyes:
    [== PHP ==]
    Parse error: syntax error, unexpected '.', expecting ',' or ';' in C:\wamp\www\PluXml-5.6\plugins\kzAce\config.php on line 18
    
  • Le plein écran ne fonctionne pas. (F11).
  • Jerry WhamJerry Wham Member
    septembre 2017 modifié
    Quand on va sur le panneau de config [del]la première fois[/del], l'affichage est buggué :
    voir : http://f.ecyseo.net/?f=159a9233cf3680

    Pourquoi afficher le code source de la page de config en bas de page ? Quel intérêt ?
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Jerry Wham a écrit:
    En parlant de qualité... :rolleyes:
    [== PHP ==]
    Parse error: syntax error, unexpected '.', expecting ',' or ';' in C:\wamp\www\PluXml-5.6\plugins\kzAce\config.php on line 18
    

    J'ai vérifié à nouveau avec Version de PHP : 7.0.18-0ubuntu0.16.10.1 - Apache/2.4.18 (Ubuntu) et Version de PHP : 5.6.30-0+deb8u1 - nginx/1.6.2 et je n'ai aucune erreur dans les logs.
    Il semble que le code suivant pose problème à ta config :
    [== PHP ==]
    const ADMIN_FILES =
    	'article categorie comment_new comment parametres_affichage '.
    	'parametres_edittpl parametres_plugincss profil statique user';
    
    Peux tu me donner les versions de PHP et du serveur que tu utilises sur ton serveur ?
    Une copie d'écran de la page http://localhost/core/admin/parametres_infos.php dans l'idéal.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Jerry Wham a écrit:
    Quand on va sur le panneau de config [del]la première fois[/del], l'affichage est buggué :
    voir : http://f.ecyseo.net/?f=159a9233cf3680

    Pourquoi afficher le code source de la page de config en bas de page ? Quel intérêt ?

    Il faut réactualier le cache de ton navigateur. Il y a un bouton pour cela à côté de la barre d'adresse de ton navigateur.

    La liste des thèmes de Ace me fait autant d'effet que la notice d'un article rédigé en mandarin sur le site http://aliexpress.com.

    Il est plus convivial de proposer à l'utilisateur un aperçu du thème.
    Pour cela il faut un bout de code à afficher.
    Et plutôt que de créer un nouveau fichier pour cela, autant reprendre l'existant
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Jerry Wham a écrit:
    Le plein écran ne fonctionne pas. (F11).

    Il faut d'abord que l'éditeur est le focus avant d'appuyer sur la touche F11.

    Une solution plus rapide est de cliquer sur le bouton à gauche de la barre d'état ( satusbar )
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Jerry Wham a écrit:
    bazooka07 a écrit:
    Il existe déjà un plugin dans la nature mais qui ne satisfait pas mes exigences de qualité. :(

    Je pense que tu veux parler de mon plugin .

    Quelles sont "tes exigences de qualité" qui ne sont pas satisfaites, stp ? Tu peux nous en dire plus ?

    Je n'ai cité personne.
    Mais puisque cela t'intéresse, je vais installer ton plugin pour te faire la liste de qui me gêne.
  • bazooka07 a écrit:
    Peux tu me donner les versions de PHP et du serveur que tu utilises sur ton serveur ?
    Une copie d'écran de la page http://localhost/core/admin/parametres_infos.php dans l'idéal.
    C'est sur un winamp qui me sert de test :

    PluXml version 5.6 (encodage UTF-8)
    Version de PHP : 5.5.12
    Apache/2.4.9 (Win32) PHP/5.5.12
    bazooka07 a écrit:
    Il faut réactualier le cache de ton navigateur. Il y a un bouton pour cela à côté de la barre d'adresse de ton navigateur.
    Ok, mais ce n'est pas forcément idéal.
    bazooka07 a écrit:
    La liste des thèmes de Ace me fait autant d'effet que la notice d'un article rédigé en mandarin sur le site http://aliexpress.com.

    Il est plus convivial de proposer à l'utilisateur un aperçu du thème.
    Pour cela il faut un bout de code à afficher.
    Et plutôt que de créer un nouveau fichier pour cela, autant reprendre l'existant
    Ah ok. Pas con.

    Je pense que tu devrais être plus explicite dans ta page de config qui est vraiment très succincte. Une ou deux phrases d'explication ne seraient pas du luxe.
    bazooka07 a écrit:
    Il faut d'abord que l'éditeur ait le focus avant d'appuyer sur la touche F11.

    Une solution plus rapide est de cliquer sur le bouton à gauche de la barre d'état ( satusbar )

    Mea culpa : ça fonctionne effectivement...
    bazooka07 a écrit:
    Je n'ai cité personne.
    Mais puisque cela t'intéresse, je vais installer ton plugin pour te faire la liste de qui me gêne.
    Avec plaisir.
  • bazooka07 a écrit:
    Un truc qui serait intéressant pour la prochaine version de PluXml :
    il y a une gestion d'onglets pour l'affichage des feuilles de style des plugins.
    C'est assez simple à mettre en place.

    J'ai pas trouvé comment. Du moins, je ne vois pas de différence avec l'affichage original (que je vide le cache ou pas).
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    septembre 2017 modifié
    Jerry Wham a écrit:
    bazooka07 a écrit:
    Un truc qui serait intéressant pour la prochaine version de PluXml :
    il y a une gestion d'onglets pour l'affichage des feuilles de style des plugins.
    C'est assez simple à mettre en place.

    J'ai pas trouvé comment. Du moins, je ne vois pas de différence avec l'affichage original (que je vide le cache ou pas).
    Voir copie d'écran
    Pour la prochaine version le fond de l'onglet actif sera légèrement grisé
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Jerry Wham a écrit:
    C'est sur un winamp qui me sert de test :

    PluXml version 5.6 (encodage UTF-8)
    Version de PHP : 5.5.12
    Apache/2.4.9 (Win32) PHP/5.5.12
    Avant Winamp servait à écouter des radios en ligne. Mais cela a dû changer.

    Comme je suis pas très chaud pour installer un truc que je ne connais pas, je ferai les tests avec une image Debian/wheezy pour Docker
    Voir copie d'écran
    Php version 5.4.45
    Effectivement la ligne de code pose problème avec cette version.
    Jerry Wham a écrit:
    Je pense que tu devrais être plus explicite dans ta page de config qui est vraiment très succincte. Une ou deux phrases d'explication ne seraient pas du luxe.
    Bon, je vais mettre une petite étiquette
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    septembre 2017 modifié
    Version 1.1.0:

    Modif pour rétro-compatibilité vers PHP 5.4
    Petites retouches cosmétiques
    Suppression des modes peu utilisés pour le Web (Ada, Eiffel, Cobol, ...) pour que la taille de l'archive du plugin passe en dessous de 2Mo (limite imposée par PHP en général
    Voir dans le dossier le fichier pour la liste des modes supprimés
  • bazooka07 a écrit:
    Avant Winamp servait à écouter des radios en ligne. Mais cela a dû changer.
    Ah oui, ma fourche a langué. Je voulais dire wampserver :P
  • Jerry WhamJerry Wham Member
    septembre 2017 modifié
    bazooka07 a écrit:
    Jerry Wham a écrit:
    bazooka07 a écrit:
    Un truc qui serait intéressant pour la prochaine version de PluXml :
    il y a une gestion d'onglets pour l'affichage des feuilles de style des plugins.
    C'est assez simple à mettre en place.

    J'ai pas trouvé comment. Du moins, je ne vois pas de différence avec l'affichage original (que je vide le cache ou pas).
    Voir copie d'écran
    Pour la prochaine version le fond de l'onglet actif sera légèrement grisé

    [del]Je n'ai pas les onglets[/del].

    Edit : les onglets sont bien présents si on paramètre le plugin pour qu'il soit actif lors de la modification des css des plugins.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    septembre 2017 modifié
    Jerry Wham a écrit:
    bazooka07 a écrit:
    Avant Winamp servait à écouter des radios en ligne. Mais cela a dû changer.
    Ah oui, ma fourche a langué. Je voulais dire wampserver :P

    Perso je préfère utiliser mes doigts pour appuyer sur les touches du clavier, même si parfois ça rippe. C'est plein de microbes là-dedans :mad:

    Ton logiciel n'est pas à jour, c'est mal :
    [== Text ==]
    [url=http://www.wampserver.com/]Wampserver 3.0.6 64 bit x64[/url]
    Apache 2.4.23 – PHP 5.6.25/7.0.10 – MySQL 5.7.14 – PhpMyAdmin 4.6.4 – Adminer 4.2.5 – PhpSysInfo 3.2.5
    

    Et c'est même pas à jour. sur http://php.net. Cela fait plus d'un an que la version 5.6.25 est sortie !
    [== Text ==]
    5.6.31·Release Notes·Upgrading
    7.0.23·Release Notes·Upgrading
    7.1.9·Release Notes·Upgrading
    

    Pour info, sous Ubuntu 17.04, on est par défaut en PHP 7.0.22
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Jerry Wham a écrit:
    Edit : les onglets sont bien présents si on paramètre le plugin pour qu'il soit actif lors de la modification des css des plugins.

    C'est corrigé.

    AMHA, c'est une fonctionnalité qui devrait être déjà intégrée à PluXml. C'est relativement simple à faire.
  • bazooka07 a écrit:
    Perso je préfère utiliser mes doigts pour appuyer sur les touches du clavier, même si parfois ça rippe. C'est plein de microbes là-dedans :mad:
    Oui, mais quand on a faim, c'est pratique ]:D
    bazooka07 a écrit:
    Ton logiciel n'est pas à jour, c'est mal :
    C'est un serveur de test au boulot. Ce n'est pas celui utilisé en prod mais ça permet de relever des erreurs de compatibilité...
  • @Bazooka
    La v1.1.1 ne tournais pas chez moi, j'ai voulu savoir pourquoi et comme mes navis sont obsolètes, j'ai penché pour ça 8o
    Et
    Après quelques console.log de débogue et essais avec Firefox, bingo, il est tombé en marche :)
    2, 3 fix pour Chromium et quelques nettoyages & tout semble tourné rond. J'ai pas poussé plus a fond.
    Excellent le F11, manque plus que le [Maj+]Ctrl+s

    Il suffit de modifier quelques éléments du fichier app.js (enfin pour mon cas)
    Voir le fichier app.js modifié pour la v1.1.1 (Le télécharger)

    Testé avec Chromium 31 et Firefox 43
    Et avec Pluxml 5.6

    C'est vrai qu'il est classe lorsqu'il marche :P, semble simple pour (apprendre) à coder, et plus si l'on connaît les raccourcis claviers ;)
    merci, merci, merci
    Un Geany du Web?

    A t'il l'[url=https://duckduckgo.com/?q=Ace+editor+autocomplétion+php&t=lm&ia=qa]autocompletion[/url]?

    Notre temps est la seule monnaie vraie ;)

    Site, Dépôt, framagit, MyShop, Factux

    #mozinor président

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @Sudwebdesign,

    J'ignorais que Array.prototype.findIndex n'existait que depuis ES6, et d'ailleurs que j'utilisais ES6

    Pour NodeList.prototype.forEach, Memento m'en a déjà fait la remarque que cela n'existait pas en Javascript à propos du plugin DnD_move. Sauf que les navigateurs récents, comme Mozilla, implémentent cette fonction. C'est dommage car c'est une fonction bien pratique.

    D'après ce qui ce dit sur cette page de la fondation Mozilla , il n'est pas conseillé d'étendre le Dom.
    De plus, j'ai peur de mettre la pagaille avec d'autres plugins.

    En conséquence, je vais revenir à des méthodes plus académiques avec des boucles for() pour préserver la compatibilité avec les vieux navigateurs qui trainent dans la nature.
    Je vais faire quelques tests dès que possible.

    Note que je n'ai pas fait le push ver Github pour la version 1.1.1 du plugin.

    Je suis surpris que tu utilises des vieilles versions de navigateurs. Aujourd'hui Chromium est en Version 61.0.3163.79 (Build officiel) Built on Ubuntu , running on Ubuntu 17.04 (64 bits) et Firefox en version 56.0 (64 bits) sur Ubuntu 17.04.
    Je pensais que tu utilisais une version à jour de Linux.
    Comparé à Window$, les mises à jour sous Linux, c'est le super pied et cela ne prend qu'un poignée de minutes.

    Le raccourci Ctrl-S c'est bien je l'ai déjà fait avec TinyMCE, surtout si on est en plein écran. Simuler un appui sur le bouton sauvegarder n'est pas très compliqué.
    Mais il faut retrouver le même contexte (mode plein écran et numéro de ligne) après rechargement de la page.

    Pour l'auto-complétion, si c'est pour le PHP, je ne pense pas que ACE le fasse. Il a déjà besoin de Emmet pour saisir rapidement des pages HTML et des feuilles CSS.
    Il est difficile d'avoir mieux que div#mon_id.class1.class2<tab>
  • @Bazooka

    Je sais que j'utilise une lmde dépassée, un PHP obsolète (5.5) et des navis hors d'age ... et que les mises a jour avec GNULinux sont simplissime, mais je traîne pour faire le pont entre free.fr (PHP5.1) et la majeure partie des serveurs récent, je tente d'appliquer le résilient webdesign a ma manière.

    C'est donc Emmet (Brown?) qui est en charge de l’auto-complétion, et il s'agissait surtout d'un retour d’expérience, si cela peu dépanner quelques uns.

    En tout les cas les web utilitaires n'ont plus a rougir des utilitaires onboard.

    ES6 et 30 versions, pffiou, ça va faire du changement lors de la big upgrade :D

    Notre temps est la seule monnaie vraie ;)

    Site, Dépôt, framagit, MyShop, Factux

    #mozinor président

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    octobre 2017 modifié
    @sudwebdesign,

    J'ai fait les modifs comme annoncé pour régler le problème nodeLIst.forEach et Array.findIndex.
    Tu peux ressortir tes vieux navigateurs :D

    En prime, tu as le raccourci Ctrl-S pour sauvegarder le document à la volée, avec sauvegarde du contexte ( plein écran, n° ligne, onglet pour plugincss)
    Bien commode quand on est en mode plein écran.

    Version 1.2.0 à télécharger. voir lien en début du fil de discussion

    J'ai "pushé" sur Github.

    Pour mémoire
    les navigateurs récents intégrent la fonction nodeList.forEach() qui ne fait pas partie un langaage Ecmascript (javascript)
    la fonction Array.findIndex() n'est disponible quu'à partir de ES6


    Merci de tes retours
  • SudwebdesignSudwebdesign Member
    octobre 2017 modifié
    @Bazooka :

    Tout semble bien tourner maintenant avec la 1.2.0 ;)

    A part 2,3 petites choses ...


    Dans l'édition d'un article
    Lorsque le chapo a le focus et que l'on clique sur F11 pour être en plein écran, l'éditeur du contenu se retrouve par dessus de celui du chapo et en cache les lignes 2 et 3.
    Cela ne se produit pas lorsque le focus est sur l'éditeur du champ contenu, puis un F11, il y a bien qu'un seul éditeur en fullscreen ;).


    La deuxième chose est : super le Ctrl+s ;) mais lorsque je procède, Firefox bloque une popup?
    Lorsque popups autorisé :
    envoi sur la preview (mode article)
    pour les statiques, profil, thème, ... 1 éditeur == save ok
    Super Taf que t'as fait :cool:

    Cela semble venir du fait qu'il est 2 instances de l'éditeur en mode article


    Et la dernière : en mode plein écran, si le plugin plxMyMultilingue est présent, ses drapeaux sont au dessus des éditeurs (z-index des drapeaux a 799).

    Pour régler ce détail, il suffit d'intercaler 2 règles de style a css/admin.css comme suit :
    Ligne 5 ajouter :
    [== CSS ==]
    .ace_editor.fullScreen { z-index: 800; } /* plxMultiLingue flags */
    

    Et entre les lignes 77 et 83 ajouter :
    [== CSS ==]
    	z-index: 800; /* plxMultiLingue flags */
    

    @PluX

    Notre temps est la seule monnaie vraie ;)

    Site, Dépôt, framagit, MyShop, Factux

    #mozinor président

Connectez-vous ou Inscrivez-vous pour répondre.