Fork me on GitHub




(1) 2 3 »


alain01
Challenge pour développeurs !
#1
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Salut,

voici un beau challenge pour les développeurs :
il s'agit d'intégrer de façon automatique les définitions des classes img (images) des feuilles de style de votre thème dans tinymcev4.

Le sujet complet ouvert (en anglais approximatif) est ici.

Si slider, lionhell, Nikita, monthuy, olivee ou bien d'autres peuvent aider une fois de plus la communauté !!!

Avec cet ajout, cela permettra d'avoir, lors d'un ajout d'une image/photo depuis TinyMCE V4, une liste déroulante des classes disponibles pour les images, au sein du thème utilisé.

Bon, je sais, l'explication souffre peut-être de détails, mais n'hésitez pas à me demander ici où sur le forum xoops.org.


Posté le : 04/04/2014 16:38

Edité par alain01 sur 16/04/2014 10:51:10
Edité par alain01 sur 16/04/2014 10:51:35
Edité par alain01 sur 16/04/2014 10:52:10

Open in new window
Partager Twitter Partagez cette article sur GG+
Rapport Haut
alain01
Re: Challenge pour développeurs !
#2
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Allez, je remet l'introduction :
Hi,
huummm,
i need help for a big challenge for me, for tinymcev4 for xoops.
It is for the class image...
(For an example the the MACTEP demo)

Here i try to explain :

In tinymce, there is a new definition : image_class_list
This option lets you specify a predefined list of classes to add to an image.

In TinyMCE code

/* Example of how to use link class list. */
    image_class_list: [
        {title: 'None', value: ''},
        {title: 'Dog', value: 'dog'},
        {title: 'Cat', value: 'cat'}
    ];

In our /class/xoopseditor/tinymce.php/tinymce4 file :
$ret .='image_class_list: [
        {title: "'._XOOPS_EDITOR_TINYMCE4_Undefined.'", value: ""},
        {title: "img-shadow-middle", value: "img-shadow-middle"} 
    ],';

ok, all is ok with that, all works, but but it"s hard coded !!!

So,
we get the "content_css" variable to tell tinymce where is our style.css file is !

here, in our /class/xoopseditor/tinymce.php/tinymce4 file :
$this->setting["content_css"] = implode( ",", $this->loadCss() );

It returns :
http://my_web_site.com/themes/my_theme/style.css

ok,so,
i want to use a function which discovers in the style.css all img class

for example :
in style.css :
img.img-shadow-left {
    box-shadow: 5px 5px 20px #555555;
    vertical-align: middle;
    float: left;
    margin: 10px 10px 10px 0px;
    border-color: #ffffff;
    border-style: solid;
    border-width: 20px;
    display: block;
}

img.img-shadow-right {
    box-shadow: 5px 5px 20px #555555;
    vertical-align: middle;
    float: right;
    margin: 10px 0px 10px 10px;
    border-color: #ffffff;
    border-style: solid;
    border-width: 20px;
    display: block;
}

img.img-shadow-middle {
    box-shadow: 5px 5px 20px #555555; 
    border-color: #ffffff;
    border-style: solid;
    border-width: 20px;
    display: block;
    margin-l;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

then the function returns :
img-shadow-left
img-shadow-right
img-shadow-middle
and create AUTOMTICALLY :
$ret .='image_class_list: [
        {title: "'._XOOPS_EDITOR_TINYMCE4_Undefined.'", value: ""},
        {title: "img-shadow-left", value: "img-shadow-left"} 
        {title: "img-shadow-right", value: "img-shadow-right"} 
        {title: "img-shadow-middle", value: "img-shadow-middle"} 
    ],';

Hope I'm Clear for you, hope you understand me.
Who could help me, or write the code ?
It's not just for me, it's for best TinyMCEv4 integration.

Posté le : 04/04/2014 16:40

Open in new window
Partager Twitter Partagez cette article sur GG+
Rapport Haut
montuy337513
Re: Challenge pour développeurs !
#3
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
Déjà utiliser un fichier css a part pourrai être le bienvenue, histoire de :
- pas chargé le serveur à rien
- facilité a parser le fichier css en question donc script plus rapide

Ensuite "parsé" avec une bonne regex ce fichier (l'avantage, c'est qu'il n'est pas obligatoire de le charger dans le thème)

Avec le bon parsage, les données seront dans un tableau PHP.

Ensuite suffit de faire une boucle foreach pour l'insérer dans tinyMCE

Voilà déjà une piste de travail,

Posté le : 16/04/2014 10:29

Open in new window

Modules/hacks pour Xoops
Ressources pour webmaster
Partager Twitter Partagez cette article sur GG+
Rapport Haut
alain01
Re: Challenge pour développeurs !
#4
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
lol, c'est bien, mais moi je ne suis pas développeur...

Donc ce n'est pas à ma portée...

Posté le : 16/04/2014 10:40

Open in new window
Partager Twitter Partagez cette article sur GG+
Rapport Haut
montuy337513
Re: Challenge pour développeurs !
#5
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
Je vais regarder pour te faire quelque chose en PHP

Posté le : 16/04/2014 10:44

Open in new window

Modules/hacks pour Xoops
Ressources pour webmaster
Partager Twitter Partagez cette article sur GG+
Rapport Haut
alain01
Re: Challenge pour développeurs !
#6
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Juste un petit up !

Posté le : 06/05/2014 00:24

Open in new window
Partager Twitter Partagez cette article sur GG+
Rapport Haut
slider84
Re: Challenge pour développeurs !
#7
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
Salut Alain,
Un truc dans ce style peut être (en suivant la piste de montuy):

function returnClass($cssInputFile,$cssClassName) {
$input = file_get_contents($cssInputFile);
if($input===false){ return false; }
preg_match_all('/([a-z0-9]*?.?'.$cssClassName.'.*?)st?/', $input, $result);
$ret.='image_class_list: [{title: "'._XOOPS_EDITOR_TINYMCE4_Undefined.'", value: ""},';
    foreach($result[0] as $k => $v){
        $ret.='{title: "'.trim($v).'", value: "'.trim($v).'"}';   
    }
$ret.='],';
return $ret;
}

Appel par returnClass('fichier.css','img.img');

Valeur retournée:
image_class_list: [{title: "_XOOPS_EDITOR_TINYMCE4_Undefined", value: ""},{title: "img.img-shadow-left", value: "img.img-shadow-left"}{title: "img.img-shadow-right", value: "img.img-shadow-right"}{title: "img.img-shadow-middle", value: "img.img-shadow-middle"}],

Je n'ai pas testé si c'est générique pour toutes les classes, mais cela a l'air de fonctionner dans ton cas de figure .

PS: Pour le nom du fichier, normalement tu peux passer une url (je n'ai pas testé).
returnClass('http://my_web_site.com/themes/my_theme/style.css','img.img');

Posté le : 09/05/2014 06:27

Open in new window

Xoops 2.5.7.2 - Debian 8.2 - Apache 2.4.10 - MySQL 5.5.47 - Php 5.6.17
Partager Twitter Partagez cette article sur GG+
Rapport Haut
montuy337513
Re: Challenge pour développeurs !
#8
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
ce code générera des warnings sous PHP

function returnClass($cssInputFile,$cssClassName) {
  $ret = '';
  if (!is_file($cssInputFile)) return false;
  $input = file_get_contents($cssInputFile);
  preg_match_all('/([a-z0-9]*?.?'.$cssClassName.'.*?)st?/', $input, $result);
  $ret.='image_class_list: [{title: "'._XOOPS_EDITOR_TINYMCE4_Undefined.'", value: ""},';
    foreach($result[0] as $k => $v){
        $ret.='{title: "'.trim($v).'", value: "'.trim($v).'"}';   
    }
  $ret.='],';
  return $ret;
}

En revenant à une discussion précédente, on vérifie tout, on déclare tout.

Citation :

PS: Pour le nom du fichier, normalement tu peux passer une url (je n'ai pas testé).
returnClass('http://my_web_site.com/themes/my_theme/style.css','img.img');

Oui on peut utiliser cette méthode mais ne fonctionne pas si le site est en 'https://' et pour le reste du temps il faut que les protocoles 'fopen' soient activivés dans 'php.ini'. Le plus sûr reste d'écrire un chemin qu'une URL (plus généraliste)

Posté le : 09/05/2014 08:45

Open in new window

Modules/hacks pour Xoops
Ressources pour webmaster
Partager Twitter Partagez cette article sur GG+
Rapport Haut
slider84
Re: Challenge pour développeurs !
#9
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
Merci encore de tes conseils montuy.
Citation :
En revenant à une discussion précédente, on vérifie tout, on déclare tout.
C'est une gymnastique que je suis en train d'acquérir... Ce we je vérifie tous mes codes

Posté le : 10/05/2014 07:47

Open in new window

Xoops 2.5.7.2 - Debian 8.2 - Apache 2.4.10 - MySQL 5.5.47 - Php 5.6.17
Partager Twitter Partagez cette article sur GG+
Rapport Haut
alain01
Re: Challenge pour développeurs !
#10
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
ok ok, et le code "propre" qui ne génèrera pas de warning, ça donnerait quoi, svp ?

Merci d'avance.

Posté le : 11/05/2014 16:09

Open in new window
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant
(1) 2 3 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

53 Personne(s) en ligne (42 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 53 | Plus ...