- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
Conf avancée de ckeditor : plugin Enhanced Image et styles
Source: http://blog.alantondelier.net/2014/03/04/installer-et-personnaliser-le-m...
Fonctionnalités
Le plugin Enhanced Image ajoute les balises html5 figure et figcaption
Les images que vous chargerez via CKEditor pourront être enrichies de la sémantique HTML5.
attributs "image responsive" (attributs srcset
et sizes
)
Soit le user entre ces valeurs manuellement, soit on peux l'intégrer avec le module qui dl les images.
installation
Méthode recommandée d'install: http://ckeditor.com/builder option "Or let met customize CKEditor" puis le bouton rouge. Pour le preset full: colonne de droite trouvez "Enhanced Image" et basculez-le colonne de gauche. Ou manuellement http://ckeditor.com/addon/imageresponsive
Ajouter toutes les langues, puis installer la lib ckeditor.
Install et conf
Requiert: Image2, Widget, Line Utilities, Dialog, Clipboard.
En fait, c'est Image2 qui les requiert (dialog et clipboard sont dans toutes les versions, pas besoin du builder). Vers mes notes "comment installer un widget" pour ckeditor.
Dl http://ckeditor.com/addon/imageresponsive et l'extraite en sites/all/libraries/ckeditor/plugins + modules/ckeditor/plugins
Ajouter dans sites/all/libraries/ckeditor/config.js config.extraPlugins = 'imageresponsive';
définir ses styles
Le chemin de ckeditor.styles.js est dans les réglages du profil (admin/config/content/ckeditor/edit/Full) CSS/styles prédéfinis : %tjs/ckeditor.styles.js appele le fichier dans le thème principal du site (et non dans le theme d'admin).
autres plugin
à dl à http://ckeditor.com/addons/plugins/all avant de les extraire 2 fois: /modules/contrib/ckeditor/plugins et dans /modules/contrib/ckeditor/ckeditor/plugins.
Puis à activer dans apparence éditeur / plugin
Source: http://blog.alantondelier.net/2014/03/04/installer-et-personnaliser-le-module-ckeditor-pour-drupal-7
donne aussi des indications sur la conf de ckfinder (payant).
http://www.vanseodesign.com/web-design/responsive-images-srcset-attribute/