Conf avancée de ckeditor : plugin Enhanced Image et styles

Source: http://blog.alantondelier.net/2014/03/04/installer-et-personnaliser-le-m...

Enhanced Image est un plugin pour CKEditor (et requiert image2 et widget)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/