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

bazooka07 · août 2017

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 )

Jerry Wham · septembre 2017

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 ?

Jerry Wham · septembre 2017

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

Jerry Wham · septembre 2017

Le plein écran ne fonctionne pas. (F11).

Jerry Wham · septembre 2017

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 ?

bazooka07 · septembre 2017

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.

bazooka07 · septembre 2017

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

bazooka07 · septembre 2017

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 )

bazooka07 · septembre 2017

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.

Jerry Wham · septembre 2017

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.

Jerry Wham · septembre 2017

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).

bazooka07 · septembre 2017

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é

bazooka07 · septembre 2017

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

bazooka07 · septembre 2017

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

Jerry Wham · septembre 2017

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 Wham · septembre 2017

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.

bazooka07 · septembre 2017

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

bazooka07 · septembre 2017

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.

Jerry Wham · septembre 2017

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é...

Sudwebdesign · octobre 2017

@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]?

bazooka07 · octobre 2017

@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>

Sudwebdesign · octobre 2017

@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

bazooka07 · octobre 2017

@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

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

Sudwebdesign · octobre 2017

@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

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

Réponses