Catégorie : Magento 2.x

[Magento 2] Etendre les possibilités de l’éditeur WYSIWYG TinyMCE 4

22/01/2020 / admin

Par défaut, l’éditeur WYSIWYG TinyMCE 4 proposé par Magento 2 n’inclut pas une bonne partie des fonctionnalités embarquées par la librairie TinyMCE 4 (couleur du texte, du fond, …) qui peuvent être utiles pour un rédacteur de contenu. Je prends pour exemple les Custom Formats (Demo CodePen), très utiles lorsque vous créez des styles qui reposent sur un assemblage d’éléments HTML et de classes.

Solution #1: Utiliser le plugin Magefan module-wysiwyg-advanced
Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch

Solution #1: Utiliser le plugin Magefan module-wysiwyg-advanced

Testé fonctionnel Magento 2.3.3. Attention: le plugin ne fournissant aucune licence, il est déconseillé de l’utiliser sur des projets que vous vendez.

Vous pouvez utiliser le plugin Better Magento 2 WYSIWYG TinyMCE4 Editor par Magefan.

Télécharger le code source du plugin Magento 2 TinyMCE 4 WYSIWYG extension (version 2.0.5.2) pour la postérité.
Accès à une brève documentation (installation, utilisation…) Magento 2.3 – TinyMCE 4 Toolbar / Text Color Tool Missing. Version PDF: magefan.com-Magento 23 – TinyMCE 4 Toolbar Text Color Tool Missing.
Fil de discussion sur magento.stackexchange.com: Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration et version PDF pour la postérité.

Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch

Testé fonctionnel Magento 2.3.3. Source: Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration. Créer plusieurs fichiers:

Convention: dans notre exemple, Project et project sont à remplacer par le libellé de votre Vendor.

Create the directory [app/code/vendor/module]: app/code/Project/Customtinymce

Create app/code/Project/Customtinymce/etc/di.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <type name="Magento\Ui\Component\Wysiwyg\ConfigInterface">
            <plugin name="project_customtinymce_config"
                    type="Project\Customtinymce\Plugin\Config"
                    sortOrder="10"/>
        </type>
</config>

<plugin name="project_customtinymce_config"

type="Project\Customtinymce\Plugin\Config"

sortOrder="10"/>

</type>

</config>

Create app/code/Project/Customtinymce/etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Project_Customtinymce" setup_version="0.1.0"/>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

</config>

Create app/code/Project/Customtinymce/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Project_Customtinymce',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Project_Customtinymce',

__DIR__

);

Create the after plugin app/code/Project/Customtinymce/Plugin/Config.php:

<?php

namespace Project\Customtinymce\Plugin;


class Config
{

 protected $activeEditor;

    public function __construct(\Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor)
    {
        $this->activeEditor = $activeEditor;
    }

    /**
     * Return WYSIWYG configuration
     *
     * @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface
     * @param \Magento\Framework\DataObject $result
     * @return \Magento\Framework\DataObject
     */
    public function afterGetConfig(
        \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface,
        \Magento\Framework\DataObject $result
    ) {

        // Get current wysiwyg adapter's path
        $editor = $this->activeEditor->getWysiwygAdapterPath();

        // Is the current wysiwyg tinymce v4?
        if(strpos($editor,'tinymce4Adapter')){

        if (($result->getDataByPath('settings/menubar')) || ($result->getDataByPath('settings/toolbar')) || ($result->getDataByPath('settings/plugins'))){
            // do not override ui_element config (unsure if this is needed)
            return $result;
        }

        $settings = $result->getData('settings');

        if (!is_array($settings)) {
            $settings = [];
        }

        // configure tinymce settings 
        $settings['menubar'] = true;
        $settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code';
        $settings['plugins'] = 'textcolor image code';

        $result->setData('settings', $settings);
        return $result;
        }
        else{ // don't make any changes if the current wysiwyg editor is not tinymce 4
            return $result;
        }
    }
}

<?php

namespace Project\Customtinymce\Plugin;

class Config

{

protected $activeEditor;

public function __construct(\Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor)

{

$this->activeEditor = $activeEditor;

}

/**

* Return WYSIWYG configuration

* @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface

* @param \Magento\Framework\DataObject $result

* @return \Magento\Framework\DataObject

public function afterGetConfig(

\Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface,

\Magento\Framework\DataObject $result

) {

// Get current wysiwyg adapter's path

$editor = $this->activeEditor->getWysiwygAdapterPath();

// Is the current wysiwyg tinymce v4?

if(strpos($editor,'tinymce4Adapter')){

if (($result->getDataByPath('settings/menubar')) || ($result->getDataByPath('settings/toolbar')) || ($result->getDataByPath('settings/plugins'))){

// do not override ui_element config (unsure if this is needed)

return $result;

}

$settings = $result->getData('settings');

if (!is_array($settings)) {

$settings = [];

}

// configure tinymce settings

$settings['menubar'] = true;

$settings['plugins'] = 'textcolor image code';

$result->setData('settings', $settings);

return $result;

}

else{ // don't make any changes if the current wysiwyg editor is not tinymce 4

return $result;

}

Remarque: dans ce fichier Config.php, si on désactive tous les $settings[''] = ; (comme ci-dessous), c’est les fonctionnalités prévues par défaut dans Magento 2 qui s’afficheront dans vos champs d’éditeurs WYSIWYG en admin.

            // configure tinymce settings
//            $settings['menubar'] = true;
//            $settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code';
//            $settings['plugins'] = 'textcolor image code';

// configure tinymce settings

// $settings['menubar'] = true;

// $settings['plugins'] = 'textcolor image code';

Lancer les commandes:

$ n98-magerun2 module:enable Project_Customtinymce // où "Project" est le libellé de votre Vendor
$ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 cache:clean; n98-magerun2 cache:flush

1 2	$ n98-magerun2 module:enable Project_Customtinymce // où "Project" est le libellé de votre Vendor $ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 cache:clean; n98-magerun2 cache:flush

[Magento 2] Bonnes pratiques et astuces de développement front-end

09/10/2019 / admin

Les commandes Magento 2 du développeur Front-End
Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?
Ajouter un nouveau module à votre projet Magento 2
Ajouter un nouveau thème à votre projet Magento 2
Styles et héritage
Aliases

Les commandes Magento 2 du développeur Front-End

Disponibles ici: Commandes Magento 2 Magerun développeur front-end.

Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?

Problème: j’essaye d’installer les sample datas de Magento 2 via Composer, mais lorsque je tape la commande $ bin/magento sampledata:deploy, j’obtiens un message Authentication required (repo.magento.com): Username Password.

Solution: Il faudra créer un compte sur marketplace.magento.com et récupérer le login (clé publique) et le mot de passe (clé privée) sous My Profile > My Products > Access Keys. Il sera peut-être nécessaire de générer une paire de clé.

Le Username demandé correspond à la clé publique. Le Password demandé correspond à la clé privée. Et PAS aux username et password de votre compte marketplace.magento.com!

Ajouter un nouveau module à votre projet Magento 2

En ligne de commande: $ n98-magerun2 dev:module:create

Ajouter un nouveau thème à votre projet Magento 2

Fichiers à préparer

Partir d’un thème Luma Child

Tips: les sources d’un starter-theme Luma Child sont disponibles en suivant ce lien.

Partie conf à ajouter dans <project_root>\dev\tools\grunt\configs\local-themes.js:

    luma_child: {
        area: 'frontend',
        name: 'Magento/luma-child',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

luma_child: {

area: 'frontend',

name: 'Magento/luma-child',

locale: 'en_US',

files: [

'css/styles-m',

'css/styles-l'

dsl: 'less'

Partir from-scratch

Sinon, si vous souhaitez débuter +/- from-scratch, vous pouvez suivre la documentation officielle de Magento 2 pour créer un nouveau thème.

Différentes manipulations à effectuer et commandes à exécuter

Dans cet ordre (et PAS dans un autre ordre, sinon ça ne fonctionne pas) :

Ajouter le dossier du nouveau thème dans: app/design/frontend/<Vendor_name>/<theme_name>
Mettre à jour le nouveau thème dans l’interface admin: Content > Design > Configuration > (Select Edit on your Store View) > Default Theme > Applied Theme > "<your_new_theme_name>"
Flusher les caches avec la commande: $ n98-magerun2 cache:flush
Lancer les commandes Grunt: $ grunt clean && grunt exec && grunt less && grunt watch
Vider les caches statiques des thèmes: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/
Vous pouvez rafraîchir votre navigateur: ctrl + F5

Styles et héritage

Deux notions bien distinctes à intégrer: l’extension et la surcharge de styles.

Extension (extend) des styles

L’extension permet de conserver, pour le fichier qui est étendu, les styles déclarés dans le(s) thème(s) parent(s) et d’en écrire des supplémentaires. Cette méthode est pratique lorsque votre thème hérite d’un thème parent dont les styles vous conviennent déjà. Elle s’utilise pour apporter des modifications mineures à l’existant.

Surcharge (override) des styles

La surcharge écrase, pour le fichier qui est surchargé, l’intégralité des styles déclarés dans le(s) thème(s) parent(s) pour repartir d’une base neutre. Cette dernière demande beaucoup plus de travail côté front-end.

Override et déclaration de nouvelles variables less

Tips: Magento naming convention for the Less variables et Modifier les valeurs des variables par défaut d’un thème parent (blank/luma).

Ce qu’il faut retenir:

Pour surcharger les valeurs de variables existantes et déclarées dans un thème parent, il faut surcharger le fichier _theme.less. Ce fichier doit contenir uniquement des déclarations concernant des variables déjà existantes dans des thèmes parents.
Pour déclarer de nouvelles variables propres à votre thème enfant, il faut créer un nouveau fichier. Vous avez le choix entre:
- Créer un fichier _variables_extend.less qu’il faudra importer depuis le fichier _extend.less
- ou créer un fichier qui peut s’appeler comme vous voulez (à part _variables.less qui va faire exploser votre affichage!) et dans lequel vous consignerez vos nouvelles variables

Héritage des thèmes dans Magento 2: Luma < (hérite de) Blank < (hérite de) Core.

vendor/magento/theme-frontend-luma/web/css/source/_theme.less
- Contient uniquement des surcharges de variables ayant déjà été déclarées dans les fichiers .less du Core (cf. lib/web/css/source/lib/_variables.less).
vendor/magento/theme-frontend-luma/web/css/source/_variables.less
- Contient des surcharges de variables ayant déjà été déclarées dans le/les thème(s) parent(s) (Blank < Core), ainsi que de nouvelles variables qui seront exploitées dans plusieurs fichiers du thème Luma.
- Ce fichier n’a pas l’air surchargeable dans un theme qui serait enfant de Luma (héritage: Luma Child < Luma < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_extend.less.
- Ce fichier n’a pas l’air d’avatage surchargeable dans un theme qui serait simplement enfant de Blank (héritage: Blank Child < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_extend.less.
vendor/magento/theme-frontend-luma/web/css/source/_forms.less contient de nouvelles variables qui seront exploitées uniquement dans ce fichier.

vendor/magento/theme-frontend-luma/web/css/source/_variables.less

Luma nous donne un bon exemple de comment doit être organisée cette feuille de styles. Les grandes parties (Typography, Icons, …) contiennent des surcharges des valeurs de variables existantes déclarées respectivement au minimum dans lib/web/css/source/lib/variables/_typography.less et dans lib/web/css/source/lib/variables/_icons.less.

« Au minimum« car elles peuvent déjà être surchargées une première fois dans le thème Blank (intermédiaire). @font-family-name__base est, en effet, déclarée pour la première fois dans vendor/magento/theme-frontend-blank/web/css/source/_variables.less.

// /** // * Copyright © Magento, Inc. All rights reserved. // * See COPYING.txt for license details. // */ // // Luma theme variables // _____________________________________________ // // Typography // --------------------------------------------- // Fonts @font-family-name__base: 'Open Sans'; // Hérité de: Blank @font-family__base: @font-family-name__base, @font-family__sans-serif; // Hérité de: Blank < Core // Colors nesting @page__background-color: @color-white; // Hérité de: Core // // Icons // --------------------------------------------- @icon-success: '\e60e'; @icon-error: '\e61f'; [...]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Luma theme variables
//  _____________________________________________

//
//  Typography
//  ---------------------------------------------

//  Fonts
@font-family-name__base: 'Open Sans'; // Hérité de: Blank
@font-family__base: @font-family-name__base, @font-family__sans-serif; // Hérité de: Blank < Core

//  Colors nesting
@page__background-color: @color-white; // Hérité de: Core

//
//  Icons
//  ---------------------------------------------

@icon-success: '\e60e';
@icon-error: '\e61f';
[...]

vendor/magento/theme-frontend-luma/web/css/source/_forms.less

// /** // * Copyright © Magento, Inc. All rights reserved. // * See COPYING.txt for license details. // */ // // Variables // _____________________________________________ // Nouvelles variables qui seront exploitées uniquement dans ce fichier! @legend-border-bottom: 1px solid @color-gray-light6; @form-field__vertical-indent__desktop: 29px; @form-calendar-icon__color: @primary__color; // // Common // _____________________________________________ & when (@media-common = true) { .fieldset { [...]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  _____________________________________________

// Nouvelles variables qui seront exploitées uniquement dans ce fichier!
@legend-border-bottom: 1px solid @color-gray-light6;
@form-field__vertical-indent__desktop: 29px;
@form-calendar-icon__color: @primary__color;

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .fieldset {
[...]

Aliases

Une série d’aliases à ajouter au fichier .bashrc.

Pour éditer le fichier: $ vim ~/.bashrc

Pour valider les changements sans quitter le terminal: $ source ~/.bashrc

# Magento 2 aliases # Vider les caches statiques des thèmes alias m2_rmstatic='rm -rf pub/static/*; rm -rf var/view_preprocessed/*'

1
2
3
4

# Magento 2 aliases

# Vider les caches statiques des thèmes
alias m2_rmstatic='rm -rf pub/static/*; rm -rf var/view_preprocessed/*'

[Magento 2] Astuces et bonnes pratiques

11/04/2017 / admin

Magento 2 Frontools – Set of front-end tools for Magento 2 based on Gulp.js

[Magento 2.x] Les options du slider Fotorama natif

14/03/2017 / admin

Magento2 : How to disable product image slider on detail page. Dans /theme_folder/etc/view.xml :

<vars module="Magento_Catalog">  <var name="gallery"> <var name="nav">thumbs</var>  <var name="loop">true</var>  <var name="keyboard">true</var>  <var name="arrows">true</var>  <var name="caption">false</var>  <var name="allowfullscreen">true</var>  <var name="navdir">horizontal</var>  <var name="navarrows">true</var>  <var name="navtype">slides</var>  <var name="transition"> <var name="effect">slide</var>  <var name="duration">500</var>  </var> <var name="fullscreen"> <var name="nav">thumbs</var>  <var name="loop">true</var>  <var name="keyboard">true</var>  <var name="arrows">false</var>  <var name="caption">false</var>  <var name="navdir">horizontal</var>  <var name="thumbwidth">150</var>  <var name="thumbheight">150</var>  <var name="navigation_carousel">true</var>  <var name="transition"> <var name="effect">dissolve</var>  <var name="duration">500</var>  <var name="carousel">true</var>  </var> </var> </var>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<vars module="Magento_Catalog">

    
    <var name="gallery">
        <var name="nav">thumbs</var> 
        <var name="loop">true</var> 
        <var name="keyboard">true</var> 
        <var name="arrows">true</var> 
        <var name="caption">false</var> 
        <var name="allowfullscreen">true</var> 
        <var name="navdir">horizontal</var> 
        <var name="navarrows">true</var> 
        <var name="navtype">slides</var> 
        <var name="transition">
            <var name="effect">slide</var> 
            <var name="duration">500</var> 
        </var>
        <var name="fullscreen">
            <var name="nav">thumbs</var> 
            <var name="loop">true</var> 
            <var name="keyboard">true</var> 
            <var name="arrows">false</var> 
            <var name="caption">false</var> 
            <var name="navdir">horizontal</var> 
            <var name="thumbwidth">150</var> 
            <var name="thumbheight">150</var> 
            <var name="navigation_carousel">true</var> 
            <var name="transition">
                <var name="effect">dissolve</var> 
                <var name="duration">500</var> 
                <var name="carousel">true</var> 
            </var>
        </var>
    </var>

Articles récents

Catégories

Archives

Méta

Catégorie : Magento 2.x

[Magento 2] Etendre les possibilités de l’éditeur WYSIWYG TinyMCE 4

Solution #1: Utiliser le plugin Magefan module-wysiwyg-advanced

Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch

Create the directory [app/code/vendor/module]: app/code/Project/Customtinymce

Create app/code/Project/Customtinymce/etc/di.xml:

Create app/code/Project/Customtinymce/etc/module.xml:

Create app/code/Project/Customtinymce/registration.php

Create the after plugin app/code/Project/Customtinymce/Plugin/Config.php:

Lancer les commandes:

[Magento 2] Bonnes pratiques et astuces de développement front-end

Les commandes Magento 2 du développeur Front-End

Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?

Ajouter un nouveau module à votre projet Magento 2

Ajouter un nouveau thème à votre projet Magento 2

Fichiers à préparer

Partir d’un thème Luma Child

Partir from-scratch

Différentes manipulations à effectuer et commandes à exécuter

Styles et héritage

Extension (extend) des styles

Surcharge (override) des styles

Override et déclaration de nouvelles variables less

Ce qu’il faut retenir:

Héritage des thèmes dans Magento 2: Luma < (hérite de) Blank < (hérite de) Core.

vendor/magento/theme-frontend-luma/web/css/source/_variables.less

vendor/magento/theme-frontend-luma/web/css/source/_forms.less

Aliases

[Magento 2] Astuces et bonnes pratiques

[Magento 2.x] Les options du slider Fotorama natif