PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 31/08/2017 18:31:01

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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

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 )

Dernière modification par bazooka07 (11/10/2017 22:30:09)

Hors ligne

#2 01/09/2017 10:54:22

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 553
Site Web

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

bazooka07 a écrit :

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

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 ?


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#3 01/09/2017 10:56:47

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 553
Site Web

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

En parlant de qualité... roll

[== PHP ==]
Parse error: syntax error, unexpected '.', expecting ',' or ';' in C:\wamp\www\PluXml-5.6\plugins\kzAce\config.php on line 18

Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#4 01/09/2017 11:00:36

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 553
Site Web

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

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


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#5 01/09/2017 11:08:18

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 553
Site Web

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

Quand on va sur le panneau de config la première fois, 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 ?

Dernière modification par Jerry Wham (01/09/2017 11:15:17)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#6 01/09/2017 15:53:08

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

Jerry Wham a écrit :

En parlant de qualité... roll

[== 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.

Hors ligne

#7 01/09/2017 15:57:58

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

Jerry Wham a écrit :

Quand on va sur le panneau de config la première fois, 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

Hors ligne

#8 01/09/2017 16:00:05

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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 )

Hors ligne

#9 01/09/2017 16:03:06

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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

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.

Hors ligne

#10 01/09/2017 16:39:57

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 553
Site Web

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

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.


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#11 01/09/2017 16:43:50

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 553
Site Web

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

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


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#12 04/09/2017 10:55:53

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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é

Dernière modification par bazooka07 (04/09/2017 10:56:46)

Hors ligne

#13 04/09/2017 11:06:32

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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

Hors ligne

#14 04/09/2017 11:10:42

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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

Dernière modification par bazooka07 (04/09/2017 11:17:46)

Hors ligne

#15 04/09/2017 17:27:56

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 553
Site Web

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

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  tongue


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#16 04/09/2017 18:03:32

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 553
Site Web

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

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é

Je n'ai pas les onglets.

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.

Dernière modification par Jerry Wham (04/09/2017 18:04:27)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#17 05/09/2017 11:34:28

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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  tongue

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

Dernière modification par bazooka07 (05/09/2017 11:37:22)

Hors ligne

#18 05/09/2017 11:36:41

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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.

Hors ligne

#19 05/09/2017 14:43:41

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 553
Site Web

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

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 devil

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


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#20 04/10/2017 23:46:50

Sudwebdesign
Membre
Inscription : 15/02/2011
Messages : 145

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

@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 monkey
Et
Après quelques console.log de débogue et essais avec Firefox, bingo, il est tombé en marche smile
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 tongue, semble simple pour (apprendre) à coder, et plus si l'on connaît les raccourcis claviers wink
merci, merci, merci
Un Geany du Web?

A t'il l'autocompletion?

Hors ligne

#21 05/10/2017 10:27:34

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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

Hors ligne

#22 05/10/2017 19:36:17

Sudwebdesign
Membre
Inscription : 15/02/2011
Messages : 145

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

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

Hors ligne

#23 11/10/2017 22:25:46

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

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

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

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

Dernière modification par bazooka07 (11/10/2017 22:28:18)

Hors ligne

#24 13/10/2017 17:24:24

Sudwebdesign
Membre
Inscription : 15/02/2011
Messages : 145

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

@Bazooka :

Tout semble bien tourner maintenant avec la 1.2.0 wink

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


La deuxième chose est : super le Ctrl+s wink 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

Dernière modification par Sudwebdesign (13/10/2017 17:25:32)

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés