module CKEditor Insert

https://www.drupal.org/project/ckeditor_insert
Requiert Insert et ckeditor. Fonctionne avec module Image Resize Filter (mais je ne l'ai pas testé).

En test sur vm14, site "site1d" (sous-site de dru1 => en dru1/sites/site04). Sur un drupal 7.34, avec: lib ckeditor_4.4.6_full, ckeditor 7.x-1.1, Insert 7.x-1.3 et ckeditor_insert 7.x-1.0, jQuery update 1.5 non-compressé (voir PJ pour la liste et versions des modules installés pour ce test).

ckeditor_insert ajoute, via js, 2 boutons dans la barre d'outils de ckeditor, nommés "insérer image" et "insérer fichier" (et uniquement s'il ya des champs configuré pour lui - voir **).
Page de conf à admin/config/content/ckeditor_insert

Une vue avec fichier attaché a aussi été crée.

Configuration

https://www.drupal.org/node/2382247

Définir des champs standard fichier et image nommés "Fichier pour insertion" (nommé ici field_tckef et field_tckeimg) et prendre le widget insert. Attacher ces champs aux types de contenus voulus mais toujours

  • en Unlimited (nb valeur maxi, ie à admin/structure/types/manage/book/fields/field_tckef partie "paramètres du champ Fichier pour insertion" Nombre de valeurs) et
  • dans section Insert clic sur Enable insert button. Plus d'info plus bas *.

Page de conf à admin/config/content/ckeditor_insert

Aller à admin/config/content/ckeditor Full partie Apparence: pour ajouter les boutons "Insert a file" et "Insert an image" à la barre d'outils de ckeditor  et cocher l'insertion du plugin insert "Buttons for Insert module".


Notes: J'ai eu un soucis ckeditor suite à une maj drush rapide sur dru1 + conf des styles de  ckeditor et ckeditor_inser dans site1d.
1. Dans le site1d, fraichement installé (suite à maj drush de dru1 en 7.34), je ne pouvais pas choisir la couleur de ckeditor et les 2 boutons n'apparaissaient pas, et 0 erreur affichée nulle part (** c'est normal, car ces 2 icones n'apparaissent dans la barre d'outils que pour un type de contenu correctement configuré pour ckeditor_insert).
1.a J'ai désinstallé/réinstallé plusieurs fois (via devel et drush) depuis site1d "ckeditor, inser, filtre et ckeditor_inser", qui sert aussi à ctools et Panels...
1.b J'ai modifié/vérifié dc plusieurs fois les conf, et puis je me suis apercue que ckeditor ne s'affichait plus, pour tous les sous-sites dru1.
J'avais d'abord installé ces modules (insert, admin_menu, ckeditor_insert...) en site04/module (et non en sites/all/module), et crying sans vérifier la version installée de la librairie de ckeditor sur dru1.
Les ai désinstallés, puis ai déplacé les modules de site04 vers sites/all, j'ai modifié le propriétaire des fichiers/dossiers des modules avant de les réinstaller sur site1d. J'ai aussi dl et installé la dernière lib complète (de ckeditor). Bref, c'est retombé en marche ;)


http://site1d/admin/structure/types/manage/book/fields/field_tckefDétails de la configuration des champs *

Dans notre exemple pour les livres (entitée bundle "book"): à admin/structure/types/manage/book/fields/field_tckef

- Tout d'abord, un texte indique : qu'on peux facilement insérer des tags HTML dans le body de ckeditor après avoir uploadé un fichier.
Le "style automatique" utilise <img> pour les images et <a> pour tous les autres fichiers. D'autres styles peuvent y associer des tags qui ne correspondent pas au type de fichier.

- Enabled insert styles : indique les styles envoyés dans le champs texte de ckeditor. Si aucun style n'est sélectionné ici, aucun n'apparaitra à l'utilisation. En cochant"tout sel" les futurs styles créés seront automatiquement envoyés.
-  Default insert style : sera utilisé par défaut (et utilisé si rien n'a été sel à Enabled insert styles juste au dessus).
- Additional CSS classes : évitable ;)
- Maximum image insert width : quand on insère une image, sa hauteur et largeur peuvent etre mofifieé pour "rentrer dans la largeur" spécifiée ici (modifie la sortie html et non l'image). Si l'on souhaite modifier les dimensions de l'image à l'insertion, utiliser le module Image Resize Filter.

Note sur la tailles des images (module image du core 7)

Le redimensionnement de l'image lors du transfert peut entrainer la perte des données EXIF de l'image.

Aperçu du style d'image qu'on voit ici est utilisé pour le mode modification du contenu.

Coté perms admin/people/permissions

2 lignes: acces et admin. Insert n'en n'a pas.
Aucune doc sur le rapport avec ACF (ckeditor). Penser à vérifier la conf des filtres HTML pour le profil Advanced.

Utilisation

Créer un contenu (configuré pour), et localiser les icones . Arf... le module adopte le "mode overlay" (ie une fenetre en popup) mais qu'on ne peux pas déplacer. On ne peux pas non plus "naviguer de cette fenetre à la fenetre principale": cliquer dans body, insérer une image, recliquer plus loin (sans fermer cette popup), pour par ex ajouter des smiley qu'on serait en train d'uploader à plusieurs endroits dans le body d'un seul coup (simplement).
OInsertion d'une image - page 1n ne peux que uploader, cad qu'on ne peux pas choisir un fichier qui serait déjà sur le serveur ou hébergé ailleurs angry

Puis apparait une 2e fenetre, pour saisir deux fois alt et title du lien (pas de token). On peux y uploader une seconde image, et choisir le style (meme si l'on ne clic pas "inserer" ca marche (mais le code html ne sera pas ajouté dans le body, infos stockées en base de donnée seule).
-> La taille de l'image affichée ici est déterminée dans la liste "Aperçu du style d'image" de admin/structure/types/manage/book/fields/field_tckef

En modification, on ne voit pas dans ckeditor les fichiers. Comment les modifier? C'est impossible sans les voir!

Meme dans source, il n'y a rien... Il suffit de cliquer sur la 1ere de ces icones pour voir la liste des fichiers ajoutés:
C'est la gestion drupal des champs File : on peux afficher ou non le fichier sans l'effacer (col affichage), modifier l'ordre des fichiers (icones 1ere col). Le bouton Retirer efface le fichier du serveur.

 

Pour les images (dont on aurait oublié d'insérer le style dans le body), cliquer sur la 2eme icone permet d'aller cliquer le bouton "Insert" à droite de la liste Style.


Insertion d'une image - page 2: clic sur le nom bleu ouvre fenetre preview. Le survol donne nom du fichier (renommé sur le serveur si doublon). Le Bouton INSERT envoie image et style dans le body.C'est à cela que sert le petit bouton "Insert" à droite de la liste Style. Et il est facile de l'oublier (surtout si les images sont cachées dans "manage display").

L'erreur typique: je clic sur l'icone "insérer image", dl une image, clique sur "insert", en dl une autre et ferme la fenetre sans clic sur "insert" pour la seconde. Elles apparaissent en affichage teaser (par défaut en général) mais on n'en voit qu'une en modification!

Le module se base sur le label des champs sans vérifier le nom machine ?

Dans un autre test (autre site), j'ai ajouté un chp fichier et un chp image, ainsi qu'une image dans les commentaires du meme type de contenu.
1. A admin/config/content/ckeditor_insert j'ai un message d'erreur "Only unlimited-values file/image fields whose Insert feature is on are available", avec rien dans fichier, mais deux "Image à insérer", identiques dans la liste "Image field for insert".
Effectivement, pour le fichier j'avais oublié de cocher le "Enable insert button"...
2. En renommant la label (images des commentaires), je vois que c'était celle que la page config/content/ckeditor_insert avait pris. Et elle affiche toujours l'erreur.

avec ACF

Dans le full, je desactive ACF (on verra après pour les <b> qui trainenent (ACF se charge entre autre, de les convertir en strong) en laissant "Use custom formatting options " à non. Les css sont celles de cked et les styles prédef à sites/site03/themes/zen_me/ckeditor.styles.js
Le Advanced a ACF.

Advanced peux utiliser les 2 boutons, mais en sauvant, le teaser s'affiche sans aucune image (il faut voir sa conf, ou etre en full).Par contre, repasser en Full récupère les images ;)

d'une facon générale

Le code généré est propre (bien plus qu'avec media). Et s'intègre bient avec "image" de ckeditor pour drupal (mieux qu'avec media).

Astuce: le copier coller est pratique avec le mode "Afficher résumé" de ckeditor. Cad: mettre dans le teaser les images aux diverses tailles, puis les copier coller vers le body.

Lors de la supression d'une image, il efface l'image sur le srv (aucune possibilité de choix) mais pas le code inséré dans le body.
Il efface le fichier original et ceux que les styles drupal génèrent (qui peuvent rapidement  grimper en nombre, si l'on joue avec les styles d'image à files/styles/nom-styl/public/nom-chp).

Si l'on ajoute plusieurs fois l'image (ex: icone facebook/viadeo... dans divers nodes) elle est renommée sur le serveur (_0 puis _1 ...). Considérer l'ajout de champs spécifiques dans les profils des users.

Dans les commentaires, cela fonctionne.

Attention aux images trop petites, drupal les agrandis et c'est moche.

Plus sur le web

Voir Media and files à https://www.drupal.org/node/627244

Doc tek: 
Fichier attachéTaille
Plain text icon site1d-dru1.txt4.51 Ko