Étiquette : WYSIWYG

[Magento 2] Rendre accessibles des styles custom dans l’éditeur WYSIWYG TinyMCE

24/01/2020 / admin

Solution testée fonctionnelle Magento 2.3!

Votre charte graphique prévoit sans doutes des styles spécifiques pour vos titres. Ces styles sont affectés via des classes CSS aux éléments Hx et ne font pas l’objet d’une prise en compte automatique par l’éditeur WYSIWYG TinyMCE 4 fourni dans Magento 2.

Convention: dans nos examples, le <vendorNamespace> sera Sodifrance et le <moduleName> sera Customtinymce. Le code source de ce module Tiny MCE 4 custom est disponible ici au téléchargement.

Créer un nouveau module

La commande ci-dessous va créer un nouveau module et initier tous les fichiers de base nécessaires à la configuration de ce dernier.

// $ n98-magerun2 dev:module:create <vendorNamespace> <moduleName>
$ n98-magerun2 dev:module:create Sodifrance Customtinymce

1 2	// $ n98-magerun2 dev:module:create <vendorNamespace> <moduleName> $ n98-magerun2 dev:module:create Sodifrance Customtinymce

Editer le fichier app/code/Sodifrance/Customtinymce/registration.php

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

<?php

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

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

'Sodifrance_Customtinymce',

__DIR__

);

Editer le fichier app/code/Sodifrance/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="sodifrance_customtinymce_config"
                type="Sodifrance\Customtinymce\Plugin\Config"
                sortOrder="10"/>
    </type>
</config>

<plugin name="sodifrance_customtinymce_config"

type="Sodifrance\Customtinymce\Plugin\Config"

sortOrder="10"/>

</type>

</config>

Editer le fichier app/code/Sodifrance/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="Sodifrance_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>

Créer le fichier app/code/Sodifrance/Customtinymce/Plugin/Config.php

Solution partiellement trouvée ici (si l’on excepte l’option $settings['style_formats'] = [ ... ]; que j’ai rajouté moi): Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration. Attention: cette solution a ensuite été reprise, améliorée et rendue disponible par Magefan sur son repository Git.

<?php

namespace Sodifrance\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';
            $settings['style_formats'] = [
                [
                    'title' => 'Custom Heading 1',
                    'block' => 'h1',
                    'classes' => 'cms-blockHeading-1-heading'
                ],
                [
                    'title' => 'Custom Heading 2',
                    'block' => 'h2',
                    'classes' => 'cms-blockHeading-2-heading'
                ]
            ];

            $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 Sodifrance\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';

$settings['style_formats'] = [

[

'title' => 'Custom Heading 1',

'block' => 'h1',

'classes' => 'cms-blockHeading-1-heading'

[

'title' => 'Custom Heading 2',

'block' => 'h2',

'classes' => 'cms-blockHeading-2-heading'

]

];

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

return $result;

}

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

return $result;

}

Dans le fichier ci-dessus, vous pouvez éditer la partie suivante à votre convenance pour réorganiser votre éditeur WYSIWYG:

// 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';
$settings['style_formats'] = [
    [
        'title' => 'Custom Heading 1',
        'block' => 'h1',
        'classes' => 'cms-blockHeading-1-heading'
    ],
    [
        'title' => 'Custom Heading 2',
        'block' => 'h2',
        'classes' => 'cms-blockHeading-2-heading'
    ]
];

// configure tinymce settings

$settings['menubar'] = true;

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

$settings['style_formats'] = [

[

'title' => 'Custom Heading 1',

'block' => 'h1',

'classes' => 'cms-blockHeading-1-heading'

[

'title' => 'Custom Heading 2',

'block' => 'h2',

'classes' => 'cms-blockHeading-2-heading'

]

];

Mettre en place vos paramètres TinyMCE 4 custom dans Magento 2 (exemple avec l’option `style_formats`)

Avec Magento, exit l’initialisation de votre plugin en front via javaScript avec passage d’un objet pour paramétrer le tout. Les options natives de TinyMCE v4 pour formater le contenu sont prises en charge, mais il faut les déclarer dans le fichier app/code/Sodifrance/Customtinymce/etc/module.xml, en PHP.

Aussi, pour l’option <a href="https://www.tiny.cloud/docs-4x/configure/content-formatting/#style_formats">style_formats</a> qu’on utiliserait nativement de cette manière:

tinymce.init({
  option1,
  option2,
  option3,
  style_formats: [
    {title: 'Custom Heading 1', block: 'h1', classes: 'cms-blockHeading-1-heading'}},
    {title: 'Custom Heading 2', block: 'h2', classes: 'cms-blockHeading-2-heading'}}
  ]
});

tinymce.init({

option1,

option2,

option3,

style_formats: [

{title: 'Custom Heading 1', block: 'h1', classes: 'cms-blockHeading-1-heading'}},

{title: 'Custom Heading 2', block: 'h2', classes: 'cms-blockHeading-2-heading'}}

]

});

…l’heureux développeur Magento 2 se voit contraint et forcé de déclarer ses paramètres de cette manière:

$settings['style_formats'] = [
    [
        'title' => 'Custom Heading 1',
        'block' => 'h1',
        'classes' => 'cms-blockHeading-1-heading'
    ],
    [
        'title' => 'Custom Heading 2',
        'block' => 'h2',
        'classes' => 'cms-blockHeading-2-heading'
    ]
];

$settings['style_formats'] = [

[

'title' => 'Custom Heading 1',

'block' => 'h1',

'classes' => 'cms-blockHeading-1-heading'

[

'title' => 'Custom Heading 2',

'block' => 'h2',

'classes' => 'cms-blockHeading-2-heading'

]

];

Quelques outils pour convertir un tableau JSON en tableau PHP

(puisqu’on est obligé de travailler comme ça, hein…)

Tester la validité de votre tableau avec PHP Sandbox

Dans le champ « script », tapez ceci et activez le bouton « Execute code »:

<?php $settings = [
                [
                    'title' => 'Custom Heading 1',
                    'block' => 'h1',
                    'classes' => 'cms-blockHeading-1-heading'
                ],
                [
                    'title' => 'Custom Heading 2',
                    'block' => 'h2',
                    'classes' => 'cms-blockHeading-2-heading'
                ]
            ];

echo json_encode($settings);

<?php $settings = [

[

'title' => 'Custom Heading 1',

'block' => 'h1',

'classes' => 'cms-blockHeading-1-heading'

[

'title' => 'Custom Heading 2',

'block' => 'h2',

'classes' => 'cms-blockHeading-2-heading'

]

];

echo json_encode($settings);

Le champ « Result » doit vous retourner un JSON correct:

[{"title":"Custom Heading 1","block":"h1","classes":"cms-blockHeading-1-heading"},{"title":"Custom Heading 2","block":"h2","classes":"cms-blockHeading-2-heading"}]

1	[{"title":"Custom Heading 1","block":"h1","classes":"cms-blockHeading-1-heading"},{"title":"Custom Heading 2","block":"h2","classes":"cms-blockHeading-2-heading"}]

Tester la validité de données JSON avec JSON Formatter & Validator

Dans le champ « JSON Data/Url », collez le code JSON retourné juste au-dessus par PHP Sandbox et cliquer sur le bouton « Process ».

Passée la ligne ci-dessous, les devs sont expérimentaux et à ne pas utiliser en prod.

ATTENTION! La solution présentée, bien que fonctionnelle, est absolument dégueulasse en terme de bonnes pratiques. Elle se révélera notamment assez compliquée à maintenir.

Vous pouvez télécharger le code source du module permettant d’ajouter des styles custom (style_formats) à l’éditeur WYSIWYG TinyMCE 4 pour Magento 2 et le tester immédiatement dans votre projet en tapant les commandes suivantes (attention: le zip contient 2 modules; c’est le module Customtinymce qu’il faut utiliser):

$ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 setup:static-content:deploy -f; n98-magerun2 cache:clean

1	$ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 setup:static-content:deploy -f; n98-magerun2 cache:clean

Mes sources d’inspiration pour parvenir à mes fins:

Je suis parti de la solution proposée ici: [Magento 2] Etendre les possibilités de l’éditeur WYSIWYG TinyMCE 4 – Solution #2: Créer votre module d’extension du WYSIWYG TinyMCE 4 pour Magento 2 from-scratch.
Je me suis également inspiré de ce projet: Replaces the current Magento 2 core RTE editor by the newest version of TinyMCE 4.
…et de cette solution proposée sur stackoverflow: magento2 : how to override lib/web/mage/adminhtml/browser.js? (puisqu’il s’agit de faire un override d’une librairie se trouvant dans lib/web/.

Dans app\code\Sodifrance\Customtinymce\view\adminhtml\web\js\customtinymce.js (qui n’est autre que la version 4.9.5 native du plugin TinyMCE4 (DEV package, code non minifié)), passez les paramètres style_formats custom que vous souhaitez ajouter dans la variable getDefaultSettings:

        var getDefaultSettings = function (id, documentBaseUrl, editor) {
            return {
                id: id,
                theme: 'modern',
                delta_width: 0,
                delta_height: 0,
                popup_css: '',
                plugins: '',
                document_base_url: documentBaseUrl,
                add_form_submit_trigger: true,
                submit_patch: true,
                add_unload_trigger: true,
                convert_urls: true,
                relative_urls: true,
                remove_script_host: true,
                object_resizing: true,
                doctype: '<!DOCTYPE html>',
                visual: true,
                font_size_style_values: 'xx-small,x-small,small,medium,large,x-large,xx-large',
                font_size_legacy_values: 'xx-small,small,medium,large,x-large,xx-large,300%',
                forced_root_block: 'p',
                hidden_input: true,
                render_ui: true,
                indentation: '40px',
                inline_styles: true,
                convert_fonts_to_spans: true,
                indent: 'simple',
                indent_before: 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' + 'tfoot,tbody,tr,section,summary,article,hgroup,aside,figure,figcaption,option,optgroup,datalist',
                indent_after: 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' + 'tfoot,tbody,tr,section,summary,article,hgroup,aside,figure,figcaption,option,optgroup,datalist',
                entity_encoding: 'named',
                url_converter: editor.convertURL,
                url_converter_scope: editor,
                ie7_compat: true,
                style_formats: [
                    { title: 'Custom Heading 1', block: 'h1', classes: 'cms-blockHeading-1-heading' },
                    { title: 'Custom Heading 2', block: 'h2', classes: 'cms-blockHeading-2-heading' }
                ]
            };
        };

var getDefaultSettings = function (id, documentBaseUrl, editor) {

return {

id: id,

theme: 'modern',

delta_width: 0,

delta_height: 0,

popup_css: '',

plugins: '',

document_base_url: documentBaseUrl,

add_form_submit_trigger: true,

submit_patch: true,

add_unload_trigger: true,

convert_urls: true,

relative_urls: true,

remove_script_host: true,

object_resizing: true,

doctype: '<!DOCTYPE html>',

visual: true,

font_size_style_values: 'xx-small,x-small,small,medium,large,x-large,xx-large',

font_size_legacy_values: 'xx-small,small,medium,large,x-large,xx-large,300%',

forced_root_block: 'p',

hidden_input: true,

render_ui: true,

indentation: '40px',

inline_styles: true,

convert_fonts_to_spans: true,

indent: 'simple',

indent_before: 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' + 'tfoot,tbody,tr,section,summary,article,hgroup,aside,figure,figcaption,option,optgroup,datalist',

indent_after: 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' + 'tfoot,tbody,tr,section,summary,article,hgroup,aside,figure,figcaption,option,optgroup,datalist',

entity_encoding: 'named',

url_converter: editor.convertURL,

url_converter_scope: editor,

ie7_compat: true,

style_formats: [

{ title: 'Custom Heading 1', block: 'h1', classes: 'cms-blockHeading-1-heading' },

{ title: 'Custom Heading 2', block: 'h2', classes: 'cms-blockHeading-2-heading' }

]

};

Dans le fichier app/code/Sodifrance/Customtinymce/view/base/requirejs-config.js, il faut ensuite mapper l’alias tinymce4 (initialement défini ici: vendor/magento/module-ui/view/base/requirejs-config.js) vers notre surcharge de la source du plugin TinyMCE4:

var config = {
    shim: {
        'Sodifrance_Customtinymce/js/customtinymce': {
            exports: 'tinyMCE'
        }
    },
    map: {
        '*': {
            tinymce4: 'Sodifrance_Customtinymce/js/customtinymce'
        }
    }
};

var config = {

shim: {

'Sodifrance_Customtinymce/js/customtinymce': {

exports: 'tinyMCE'

}

map: {

'*': {

tinymce4: 'Sodifrance_Customtinymce/js/customtinymce'

}

};

[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] Initiation à l’injection de dépendances en créant un widget custom qui permet l’upload d’une image et l’ajout d’un lien vers une page CMS

14/01/2020 / admin

Note: pour mettre en place l’upload d’image, nous allons installer l’extension magento2-widget-parameters. Je vous invite à consulter le billet de blog suivant pour la démarche à suivre: [Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom.

Convention: on part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.

Une fois l’extension magento2-widget-parameters installée, nous allons créer les fichiers suivants:

app/code/Sodifrance/Pdv/etc/widget.xml

Le champ « Clé d’URL de la page de destination » est en required="false" car l’utilisateur n’est pas obligé d’associer un lien pointant vers une autre page à ce widget. Nous verrons avec le code de la vue PHTML comment nous gérons ça en PHP par le biais d’une condition if/else.

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Sodifrance\Pdv\Block\Widget\TwoColsDynamic" id="twocolumnsdynamic_widget">
        <label>2 columns dynamic Widget</label>
        <description>2 columns dynamic Widget for Magento 2</description>
        <parameters>
            <parameter name="block_link" xsi:type="text" required="false" visible="true" sort_order="10">
                <label>Clé d'URL de la page de destination</label>
            </parameter>
            <parameter name="left_col_title" xsi:type="text" required="false" visible="true" sort_order="10">
                <label>Left column title</label>
            </parameter>
            <parameter name="left_col_tagline" xsi:type="text" required="false" visible="true" sort_order="10">
                <label>Left column tagline</label>
            </parameter>
            <parameter name="right_col_image" xsi:type="block" required="false" visible="true" sort_order="10">
                <label translate="true">Right column image</label>
                <block class="Dmatthew\WidgetParameters\Block\Adminhtml\Widget\Type\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter name="right_col_text" xsi:type="block" required="false" visible="true" sort_order="10">
                <label translate="true">Right column text</label>
                <block class="Dmatthew\WidgetParameters\Block\Adminhtml\Widget\Type\Wysiwyg" />
            </parameter>
        </parameters>
    </widget>
</widgets>

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

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

<label>2 columns dynamic Widget</label>

<description>2 columns dynamic Widget for Magento 2</description>

<label>Clé d'URL de la page de destination</label>

</parameter>

<label>Left column title</label>

</parameter>

<label>Left column tagline</label>

</parameter>

<label translate="true">Right column image</label>

<data>

<item name="open" xsi:type="string">Choose Image...</item>

</item>

</data>

</block>

</parameter>

<label translate="true">Right column text</label>

</parameter>

</parameters>

</widget>

</widgets>

app/code/Sodifrance/Pdv/Block/Widget/TwoColsDynamic.php

Ici, on crée 2 fonctions publiques:

getWidgetMediaUrl() qui récupère l’URL de base du site, lui ajoute le chemin vers l’endroit où reposent les médias de contenu éditorial dans Magento 2 et le libellé et le format de l’image uploadée via le widget en BO.
getWidgetTargetPageUrl() qui récupère l’URL de base du site et lui ajoute la clé d’URL de la page cible, telle que renseignée via le widget en BO.

<?php
namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class TwoColsDynamic extends Template implements BlockInterface {

    protected $_template = "widget/twocolsdynamic.phtml";

    /**
     * @var \Magento\Cms\Helper\Wysiwyg\Images $helper
     */
    protected $helper;
    /**
     * @var \Magento\Framework\UrlInterface $urlInterface
     */
    protected $urlInterface;

    // Alt + Inser
    public function __construct(Template\Context $context, \Magento\Cms\Helper\Wysiwyg\Images $helper, \Magento\Framework\UrlInterface $urlInterface, array $data = [])
    {
        $this->helper = $helper;
        $this->urlInterface = $urlInterface;
        parent::__construct($context, $data);
    }

    public function getWidgetMediaUrl()
    {
        return
            $this->helper->getBaseUrl() .
            $this->getData('right_col_image');
    }

    public function getWidgetTargetPageUrl()
    {
        return
            $this->urlInterface->getBaseUrl() .
            $this->getData('block_link');
    }

}

<?php

namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;

use Magento\Widget\Block\BlockInterface;

class TwoColsDynamic extends Template implements BlockInterface {

protected $_template = "widget/twocolsdynamic.phtml";

/**

* @var \Magento\Cms\Helper\Wysiwyg\Images $helper

protected $helper;

/**

* @var \Magento\Framework\UrlInterface $urlInterface

protected $urlInterface;

// Alt + Inser

public function __construct(Template\Context $context, \Magento\Cms\Helper\Wysiwyg\Images $helper, \Magento\Framework\UrlInterface $urlInterface, array $data = [])

{

$this->helper = $helper;

$this->urlInterface = $urlInterface;

parent::__construct($context, $data);

}

public function getWidgetMediaUrl()

{

return

$this->helper->getBaseUrl() .

$this->getData('right_col_image');

}

public function getWidgetTargetPageUrl()

{

return

$this->urlInterface->getBaseUrl() .

$this->getData('block_link');

}

Note: dans l’IDE PHP Storm, il est possible de ne taper que les lignes suivantes:

    /**
     * @var \Magento\Cms\Helper\Wysiwyg\Images $helper
     */
    protected $helper;
    /**
     * @var \Magento\Framework\UrlInterface $urlInterface
     */
    protected $urlInterface;

/**

* @var \Magento\Cms\Helper\Wysiwyg\Images $helper

protected $helper;

/**

* @var \Magento\Framework\UrlInterface $urlInterface

protected $urlInterface;

Ensuite, placez le curseur sous ces lignes et faites le raccourci Alt + Inser. Vous aurez accès à une liste de bouts de code que l’IDE se propose d’écrire pour vous! Si vous choisissez « constructor » et que vous sélectionnez ensuite les 2 entrées $helper et $urlInterface (placez le curseur sur la première, puis Maj + flèche du bas), le constructeur sera généré automatiquement.

app/code/Sodifrance/Pdv/view/frontend/templates/widget/twocolsdynamic.phtml

Dans le template PHTML, on ajoute une condition <?php if (!empty($block->getData('block_link'))): ?> qui vérifie si le champ URL est rempli en BO et génère du HTML en fonction.

<?php
/** \Sodifrance\Pdv\Block\Widget\TwoColsDynamic $block */
?>

<div class="widget widget-twoColsDynamic">
    <div class="widget-twoColsDynamic-left">
        <div class="cms-blockHeading-2">
            <h2 class="heading">
                <?= $block->escapeHtml($block->getData('left_col_title')) ?>
            </h2>
        </div>
        <p><?= $block->escapeHtml($block->getData('left_col_tagline')) ?></p>
    </div>
    <div class="widget-twoColsDynamic-right">
        <?php if (!empty($block->getData('block_link'))): ?>
            <a class="widget-twoColsDynamic-right-content" href="<?= $block->getWidgetTargetPageUrl() ?>" target="_blank">
                <div class="widget-twoColsDynamic-left">
                    <img src="<?= $block->getWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-twoColsDynamic-image" />
                </div>
                <div class="widget-twoColsDynamic-right">
                    <?= $block->getData('right_col_text') ?>
                </div>
            </a>
        <?php else: ?>
            <div class="widget-twoColsDynamic-right-content">
                <div class="widget-twoColsDynamic-left">
                    <img src="<?= $block->getWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-twoColsDynamic-image" />
                </div>
                <div class="widget-twoColsDynamic-right">
                    <?= $block->getData('right_col_text') ?>
                </div>
            </div>
        <?php endif; ?>
    </div>
</div>

<?php

/** \Sodifrance\Pdv\Block\Widget\TwoColsDynamic $block */

<?= $block->escapeHtml($block->getData('left_col_title')) ?>

</h2>

</div>

<p><?= $block->escapeHtml($block->getData('left_col_tagline')) ?></p>

</div>

<?php if (!empty($block->getData('block_link'))): ?>

<a class="widget-twoColsDynamic-right-content" href="<?= $block->getWidgetTargetPageUrl() ?>" target="_blank">

<img src="<?= $block->getWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-twoColsDynamic-image" />

</div>

<?= $block->getData('right_col_text') ?>

</div>

</a>

<?php else: ?>

<img src="<?= $block->getWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-twoColsDynamic-image" />

</div>

<?= $block->getData('right_col_text') ?>

</div>

<?php endif; ?>

</div>

Flushez vos caches; le widget devrait être disponible en backoffice!

[Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom

13/01/2020 / admin

Pour ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom dans Magento 2, nous allons utiliser l’extension suivante: Useful widget types for Magento 2 like image selector and wysiwyg text editor (un article de l’auteur ici: Using an Image Selector Parameter for Magento Widgets).

Code source zippé – magento2-widget-parameters-master.

Convention: on part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.

Installation de l’extension magento2-widget-parameters via Composer

Documentation officielle de Magento 2 sur comment installer une extension via composer.

Lancer la commande $ composer require dmatthew/magento2-widget-parameters:1.0.1 à la racine de votre projet Magento 2.
Des warnings vont probablement s’afficher. Ne pas en tenir compte.

./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing dmatthew/magento2-widget-parameters (1.0.1): Downloading (100%)
Package container-interop/container-interop is abandoned, you should avoid using it. Use psr/container instead.
Package moontoast/math is abandoned, you should avoid using it. Use brick/math instead.
Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.
Package zendframework/zend-barcode is abandoned, you should avoid using it. Use laminas/laminas-barcode instead.
Package zendframework/zend-captcha is abandoned, you should avoid using it. Use laminas/laminas-captcha instead.
Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead.
Package zendframework/zend-config is abandoned, you should avoid using it. Use laminas/laminas-config instead.
Package zendframework/zend-console is abandoned, you should avoid using it. Use laminas/laminas-console instead.
Package zendframework/zend-crypt is abandoned, you should avoid using it. Use laminas/laminas-crypt instead.
Package zendframework/zend-db is abandoned, you should avoid using it. Use laminas/laminas-db instead.
Package zendframework/zend-di is abandoned, you should avoid using it. Use laminas/laminas-di instead.
Package zendframework/zend-diactoros is abandoned, you should avoid using it. Use laminas/laminas-diactoros instead.
Package zendframework/zend-escaper is abandoned, you should avoid using it. Use laminas/laminas-escaper instead.
Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead.
Package zendframework/zend-feed is abandoned, you should avoid using it. Use laminas/laminas-feed instead.
Package zendframework/zend-filter is abandoned, you should avoid using it. Use laminas/laminas-filter instead.
Package zendframework/zend-form is abandoned, you should avoid using it. Use laminas/laminas-form instead.
Package zendframework/zend-http is abandoned, you should avoid using it. Use laminas/laminas-http instead.
Package zendframework/zend-hydrator is abandoned, you should avoid using it. Use laminas/laminas-hydrator instead.
Package zendframework/zend-i18n is abandoned, you should avoid using it. Use laminas/laminas-i18n instead.
Package zendframework/zend-inputfilter is abandoned, you should avoid using it. Use laminas/laminas-inputfilter instead.
Package zendframework/zend-json is abandoned, you should avoid using it. Use laminas/laminas-json instead.
Package zendframework/zend-loader is abandoned, you should avoid using it. Use laminas/laminas-loader instead.
Package zendframework/zend-log is abandoned, you should avoid using it. Use laminas/laminas-log instead.
Package zendframework/zend-mail is abandoned, you should avoid using it. Use laminas/laminas-mail instead.
Package zendframework/zend-math is abandoned, you should avoid using it. Use laminas/laminas-math instead.
Package zendframework/zend-mime is abandoned, you should avoid using it. Use laminas/laminas-mime instead.
Package zendframework/zend-modulemanager is abandoned, you should avoid using it. Use laminas/laminas-modulemanager instead.
Package zendframework/zend-mvc is abandoned, you should avoid using it. Use laminas/laminas-mvc instead.
Package zendframework/zend-psr7bridge is abandoned, you should avoid using it. Use laminas/laminas-psr7bridge instead.
Package zendframework/zend-serializer is abandoned, you should avoid using it. Use laminas/laminas-serializer instead.
Package zendframework/zend-server is abandoned, you should avoid using it. Use laminas/laminas-server instead.
Package zendframework/zend-servicemanager is abandoned, you should avoid using it. Use laminas/laminas-servicemanager instead.
Package zendframework/zend-session is abandoned, you should avoid using it. Use laminas/laminas-session instead.
Package zendframework/zend-soap is abandoned, you should avoid using it. Use laminas/laminas-soap instead.
Package zendframework/zend-stdlib is abandoned, you should avoid using it. Use laminas/laminas-stdlib instead.
Package zendframework/zend-text is abandoned, you should avoid using it. Use laminas/laminas-text instead.
Package zendframework/zend-uri is abandoned, you should avoid using it. Use laminas/laminas-uri instead.
Package zendframework/zend-validator is abandoned, you should avoid using it. Use laminas/laminas-validator instead.
Package zendframework/zend-view is abandoned, you should avoid using it. Use laminas/laminas-view instead.
Writing lock file
Generating autoload files

./composer.json has been updated

Loading composer repositories with package information

Updating dependencies (including require-dev)

Package operations: 1 install, 0 updates, 0 removals

- Installing dmatthew/magento2-widget-parameters (1.0.1): Downloading (100%)

Package container-interop/container-interop is abandoned, you should avoid using it. Use psr/container instead.

Package moontoast/math is abandoned, you should avoid using it. Use brick/math instead.

Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.

Package zendframework/zend-barcode is abandoned, you should avoid using it. Use laminas/laminas-barcode instead.

Package zendframework/zend-captcha is abandoned, you should avoid using it. Use laminas/laminas-captcha instead.

Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead.

Package zendframework/zend-config is abandoned, you should avoid using it. Use laminas/laminas-config instead.

Package zendframework/zend-console is abandoned, you should avoid using it. Use laminas/laminas-console instead.

Package zendframework/zend-crypt is abandoned, you should avoid using it. Use laminas/laminas-crypt instead.

Package zendframework/zend-db is abandoned, you should avoid using it. Use laminas/laminas-db instead.

Package zendframework/zend-di is abandoned, you should avoid using it. Use laminas/laminas-di instead.

Package zendframework/zend-diactoros is abandoned, you should avoid using it. Use laminas/laminas-diactoros instead.

Package zendframework/zend-escaper is abandoned, you should avoid using it. Use laminas/laminas-escaper instead.

Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead.

Package zendframework/zend-feed is abandoned, you should avoid using it. Use laminas/laminas-feed instead.

Package zendframework/zend-filter is abandoned, you should avoid using it. Use laminas/laminas-filter instead.

Package zendframework/zend-form is abandoned, you should avoid using it. Use laminas/laminas-form instead.

Package zendframework/zend-http is abandoned, you should avoid using it. Use laminas/laminas-http instead.

Package zendframework/zend-hydrator is abandoned, you should avoid using it. Use laminas/laminas-hydrator instead.

Package zendframework/zend-i18n is abandoned, you should avoid using it. Use laminas/laminas-i18n instead.

Package zendframework/zend-inputfilter is abandoned, you should avoid using it. Use laminas/laminas-inputfilter instead.

Package zendframework/zend-json is abandoned, you should avoid using it. Use laminas/laminas-json instead.

Package zendframework/zend-loader is abandoned, you should avoid using it. Use laminas/laminas-loader instead.

Package zendframework/zend-log is abandoned, you should avoid using it. Use laminas/laminas-log instead.

Package zendframework/zend-mail is abandoned, you should avoid using it. Use laminas/laminas-mail instead.

Package zendframework/zend-math is abandoned, you should avoid using it. Use laminas/laminas-math instead.

Package zendframework/zend-mime is abandoned, you should avoid using it. Use laminas/laminas-mime instead.

Package zendframework/zend-modulemanager is abandoned, you should avoid using it. Use laminas/laminas-modulemanager instead.

Package zendframework/zend-mvc is abandoned, you should avoid using it. Use laminas/laminas-mvc instead.

Package zendframework/zend-psr7bridge is abandoned, you should avoid using it. Use laminas/laminas-psr7bridge instead.

Package zendframework/zend-serializer is abandoned, you should avoid using it. Use laminas/laminas-serializer instead.

Package zendframework/zend-server is abandoned, you should avoid using it. Use laminas/laminas-server instead.

Package zendframework/zend-servicemanager is abandoned, you should avoid using it. Use laminas/laminas-servicemanager instead.

Package zendframework/zend-session is abandoned, you should avoid using it. Use laminas/laminas-session instead.

Package zendframework/zend-soap is abandoned, you should avoid using it. Use laminas/laminas-soap instead.

Package zendframework/zend-stdlib is abandoned, you should avoid using it. Use laminas/laminas-stdlib instead.

Package zendframework/zend-text is abandoned, you should avoid using it. Use laminas/laminas-text instead.

Package zendframework/zend-uri is abandoned, you should avoid using it. Use laminas/laminas-uri instead.

Package zendframework/zend-validator is abandoned, you should avoid using it. Use laminas/laminas-validator instead.

Package zendframework/zend-view is abandoned, you should avoid using it. Use laminas/laminas-view instead.

Writing lock file

Generating autoload files

app/code/Sodifrance/Pdv/etc/widget.xml

Nous allons déclarer un widget contenant 3 paramètres:

un titre
une image issue de la « médiathèque » de Magento 2
un champ WYSIWYG (qui permet d’utiliser du code HTML pour la mise en page, ou d’inclure un bloc statique)

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Sodifrance\Pdv\Block\Widget\Tab" id="tab_widget">
        <label>Tab Widget</label>
        <description>Tab Widget for Magento 2</description>
        <parameters>
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
                <label>Label</label>
            </parameter>
            <parameter xsi:type="block" name="background_image" visible="true" sort_order="10">
                <label translate="true">Image</label>
                <block class="Dmatthew\WidgetParameters\Block\Adminhtml\Widget\Type\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter xsi:type="block" name="body_text" visible="true" sort_order="10">
                <label translate="true">Body Text</label>
                <block class="Dmatthew\WidgetParameters\Block\Adminhtml\Widget\Type\Wysiwyg" />
            </parameter>
        </parameters>
    </widget>
</widgets>

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

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

<label>Tab Widget</label>

<description>Tab Widget for Magento 2</description>

<label>Label</label>

</parameter>

<label translate="true">Image</label>

<data>

<item name="open" xsi:type="string">Choose Image...</item>

</item>

</data>

</block>

</parameter>

</parameter>

</parameters>

</widget>

</widgets>

app/code/Sodifrance/Pdv/Block/Widget/Tab.php

Il a fallu créer une fonction pour permettre de récupérer l’URL de l’image uploadée.

<?php
namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Tab extends Template implements BlockInterface {

    protected $_template = "widget/tab.phtml";

    /**
     * @var \Magento\Cms\Helper\Wysiwyg\Images
     */
    protected $helper;

    public function __construct(Template\Context $context, \Magento\Cms\Helper\Wysiwyg\Images $helper, array $data = [])
    {
        $this->helper = $helper;
        parent::__construct($context, $data);
    }

    public function getTabWidgetMediaUrl()
    {
        return
            $this->helper->getBaseUrl() .
            $this->getData('background_image');
    }
}

<?php

namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;

use Magento\Widget\Block\BlockInterface;

class Tab extends Template implements BlockInterface {

protected $_template = "widget/tab.phtml";

/**

* @var \Magento\Cms\Helper\Wysiwyg\Images

protected $helper;

public function __construct(Template\Context $context, \Magento\Cms\Helper\Wysiwyg\Images $helper, array $data = [])

{

$this->helper = $helper;

parent::__construct($context, $data);

}

public function getTabWidgetMediaUrl()

{

return

$this->helper->getBaseUrl() .

$this->getData('background_image');

}

app/code/Sodifrance/Pdv/view/frontend/templates/widget/tab.phtml

Le template PHTML.

<?php
/** \Sodifrance\Pdv\Block\Widget\Tab $block */
?>

<div class="widget widget-tab">
    <div class="widget-tab-label cms-blockHeading-2">
        <h2 class="heading">
            <?= $block->escapeHtml($block->getData('title')) ?>
        </h2>
    </div>
    <div class="widget-tab-content">
        <div class="widget-tab-left-col">
            <img src="<?= $block->getTabWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-tab-image" />
        </div>
        <div class="widget-tab-right-col">
            <?= $block->getData('body_text') ?>
        </div>
    </div>
</div>

<?php

/** \Sodifrance\Pdv\Block\Widget\Tab $block */

<?= $block->escapeHtml($block->getData('title')) ?>

</h2>

</div>

<img src="<?= $block->getTabWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-tab-image" />

</div>

<?= $block->getData('body_text') ?>

</div>

Flusher les caches:

$ n98-magerun2 cache:flush

1	$ n98-magerun2 cache:flush

Si problèmes…

Voir aussi: [Magento 2] Créer un widget custom et l’utiliser pour afficher un bloc statique dans une catégorie unique du catalogue.

[Magento 2] Inclure un bloc statique depuis un champ WYSIWYG

10/01/2020 / admin

Inclure un bloc statique depuis n’importe quel champ WYSIWYG (contenu de page CMS, etc…).

{{block class="Magento\Cms\Block\Block" block_id="[Identifier]"}}

1	{{block class="Magento\Cms\Block\Block" block_id="[Identifier]"}}

Exemple:

{{block class="Magento\Cms\Block\Block" block_id="test_content"}}

1	{{block class="Magento\Cms\Block\Block" block_id="test_content"}}

[Magento] Supprimer le wrapper WYSIWYG (classe .std)

05/02/2015 / admin

Source : How to remove std div in magento.

Dans Magento, les contenus WYSIWYG sont nativement entourés d’un container <div class="std" />. Il peut arriver qu’on glisse du contenu dans une page CMS (un widget par exemple comme une liste de produits sur la page d’accueil) et qu’on ne souhaite pas qu’il hérite des styles associés à la classe .std. En ajoutant le code ci-dessous, vous pouvez retirer le wrapper et sa classe et protéger vos blocs d’un éventuel héritage de styles non désiré :

<reference name="content">
	<action method="unsetChild">
		<alias>cms.wrapper</alias>
	</action>
	<block type="cms/page" name="cms_page"/>
</reference>

<alias>cms.wrapper</alias>

</action>

</reference>

[Magento][TinyMCE] Customizer les settings du WYSIWYG

14/10/2014 / admin

Source : Overcoming Magento’s WYSIWYG Part 2: Customizing TinyMCE Settings.
Ressource Git : TinyMCE valid_elements setting for HTML5

Le fichier setup de TinyMCE est localisé dans js/mage/adminhtml/wysiwyg/tiny_mce/setup.js.

Dans ce fichier, repérer la variable var settings = { :

var settings = {
    mode : (mode != undefined ? mode : 'none'),
    elements : this.id,
    theme : 'advanced',
    plugins : plugins,
    [...]

var settings = {

mode : (mode != undefined ? mode : 'none'),

elements : this.id,

theme : 'advanced',

plugins : plugins,

[...]

Les lignes suivantes pourront être ajoutées à ces variables pour :

Modifier le Doctype

doctype : '<!doctype html>',

1	doctype : '<!doctype html>',

[entity_encoding] Eviter que les caractères accentués (é, è, à, etc…) soient transformés en entités HTML (é, è, etc…)

Si la boutique est entièrement en UTF-8, cette fonction peut être désactivée en éditant la configuration de tinyMCE. Ajouter la ligne :

entity_encoding : "raw",

1	entity_encoding : "raw",

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration:entity_encoding, [Résolu] TinyMCE et accents.

[valid_elements]

Source, documentation officielle de TinyMCE : valid_elements.

[extended_valid_elements] Etendre le champ des balises et attributs HTML valides

Ajouter des paramètres pour éviter que TinyMCE ne supprime certaines balises vides.
Très embêtant lorsqu’on cherche, par exemple, à exploiter une police d’icônes dans un bloc statique. Le code HTML suivant est, par défaut, automatiquement supprimé :

<span class="icon-facebook"></span>

1	<span class="icon-facebook"></span>

Pour pallier à ce souci, ajouter la ligne suivante :

extended_valid_elements : "+style[dir<ltr?rtl|lang|media|title|type],+div[*],+a[*],+span[*],+button[*]",

1	extended_valid_elements : "+style[dir<ltr?rtl\|lang\|media\|title\|type],+div[],+a[],+span[],+button[]",

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements.

[valid_children] Etendre le champ des balises HTML enfants valides

Permettre, par exemple, l’imbrication d’un H1 dans un A (pratique désormais permise en HTML5).

valid_children : "+a[h1|h2|h3|h4|h5|h6|p|span|div|img]",

1	valid_children : "+a[h1\|h2\|h3\|h4\|h5\|h6\|p\|span\|div\|img]",

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration:valid_children.

[force_br_newlines][force_p_newlines] Gestion des retours chariot et du formatage des paragraphes

Supprimer le comportement qui consiste à créer un nouveau paragraphe à chaque retour chariot saisi par l’utilisateur backoffice.

force_br_newlines : true,
force_p_newlines : false,

1 2	force_br_newlines : true, force_p_newlines : false,

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration:force_p_newlines, http://www.tinymce.com/wiki.php/Configuration3x:force_br_newlines.

[forced_root_block] Supprimer l’imbrication automatique du texte dans une balise P

forced_root_block : false,

1	forced_root_block : false,

Source, documentation officielle de TinyMCE : http://www.tinymce.com/wiki.php/Configuration3x:forced_root_block.

TinyMCE valid_elements setting for HTML5

Source Git : https://gist.github.com/veprbl/1136304

Fork le plus récent (code ci-dessous)(Last active on 20 Mar 2013) : https://gist.github.com/susebus/5204059

	valid_elements : ""
+"@[accesskey|draggable|style|class|hidden|tabindex|contenteditable|id|title|contextmenu|lang|dir<ltr?rtl|spellcheck|"
  +"onabort|onerror|onmousewheel|onblur|onfocus|onpause|oncanplay|onformchange|onplay|oncanplaythrough|onforminput|onplaying|onchange|oninput|onprogress|onclick|oninvalid|onratechange|oncontextmenu|onkeydown|onreadystatechange|ondblclick|onkeypress|onscroll|ondrag|onkeyup|onseeked|ondragend|onload|onseeking|ondragenter|onloadeddata|onselect|ondragleave|onloadedmetadata|onshow|ondragover|onloadstart|onstalled|ondragstart|onmousedown|onsubmit|ondrop|onmousemove|onsuspend|ondurationmouseout|ontimeupdate|onemptied|onmouseover|onvolumechange|onended|onmouseup|onwaiting],"
+"a[target<_blank?_self?_top?_parent|ping|media|href|hreflang|type"
  +"|rel<alternate?archives?author?bookmark?external?feed?first?help?index?last?license?next?nofollow?noreferrer?prev?search?sidebar?tag?up"
  +"],"
+"abbr,"
+"address,"
+"area[alt|coords|shape|href|target<_blank?_self?_top?_parent|ping|media|hreflang|type|shape<circle?default?poly?rect"
  +"|rel<alternate?archives?author?bookmark?external?feed?first?help?index?last?license?next?nofollow?noreferrer?prev?search?sidebar?tag?up"
  +"],"
+"article,"
+"aside,"
+"audio[src|preload<none?metadata?auto|autoplay<autoplay|loop<loop|controls<controls|mediagroup],"
+"blockquote[cite],"
+"body,"
+"br,"
+"button[autofocus<autofocus|disabled<disabled|form|formaction|formenctype|formmethod<get?put?post?delete|formnovalidate?novalidate|"
  +"formtarget<_blank?_self?_top?_parent|name|type<reset?submit?button|value],"
+"canvas[width,height],"
+"caption,"
+"cite,"
+"code,"
+"col[span],"
+"colgroup[span],"
+"command[type<command?checkbox?radio|label|icon|disabled<disabled|checked<checked|radiogroup|default<default],"
+"datalist[data],"
+"dd,"
+"del[cite|datetime],"
+"details[open<open],"
+"dfn,"
+"div,"
+"dl,"
+"dt,"
+"-em/i,"
+"embed[src|type|width|height],"
+"eventsource[src],"
+"fieldset[disabled<disabled|form|name],"
+"figcaption,"
+"figure,"
+"footer,"
+"form[accept-charset|action|enctype|method<get?post?put?delete|name|novalidate<novalidate|target<_blank?_self?_top?_parent],"
+"-h1,-h2,-h3,-h4,-h5,-h6,"
+"header,"
+"hgroup,"
+"hr,"
+"iframe[name|src|srcdoc|seamless<seamless|width|height|sandbox],"
+"img[alt=|src|ismap|usemap|width|height],"
+"input[accept|alt|autocomplete<on?off|autofocus<autofocus|checked<checked|disabled<disabled"
  +"|form|formaction|formenctype|formmethod<get?put?post?delete|formnovalidate?novalidate|formtarget<_blank?_self?_top?_parent"
  +"|height|list|max|maxlength|min|multiple<multiple|name|pattern|placeholder|readonly<readonly|required<required"
  +"|size|src|step|type<hidden?text?search?tel?url?email?password?datetime?date?month?week?time?datetime-local?number?range?color"
  +"?checkbox?radio?file?submit?image?reset?button?value|width],"
+"ins[cite|datetime],"
+"kbd,"
+"keygen[autofocus<autofocus|challenge|disabled<disabled|form|name],"
+"label[for|form],"
+"legend,"
+"li[value],"
+"main,"+
+"mark,"
+"map[name],"
+"menu[type<context?toolbar?list|label],"
+"meter[value|min|low|high|max|optimum],"
+"nav,"
+"noscript,"
+"object[data|type|name|usemap|form|width|height],"
+"ol[reversed|start],"
+"optgroup[disabled<disabled|label],"
+"option[disabled<disabled|label|selected<selected|value],"
+"output[for|form|name],"
+"-p,"
+"param[name,value],"
+"-pre,"
+"progress[value,max],"
+"q[cite],"
+"ruby,"
+"rp,"
+"rt,"
+"samp,"
+"script[src|async<async|defer<defer|type|charset],"
+"section,"
+"select[autofocus<autofocus|disabled<disabled|form|multiple<multiple|name|size],"
+"small,"
+"source[src|type|media],"
+"-span,"
+"-strong/b,"
+"-sub,"
+"summary,"
+"-sup,"
+"table,"
+"tbody,"
+"td[colspan|rowspan|headers],"
+"textarea[autofocus<autofocus|disabled<disabled|form|maxlength|name|placeholder|readonly<readonly|required<required|rows|cols|wrap<soft|hard],"
+"tfoot,"
+"th[colspan|rowspan|headers|scope],"
+"thead,"
+"time[datetime],"
+"tr,"
+"ul,"
+"var,"
+"video[preload<none?metadata?auto|src|crossorigin|poster|autoplay<autoplay|"
  +"mediagroup|loop<loop|muted<muted|controls<controls|width|height],"
+"wbr"
});

100

101

102

103

104

105

valid_elements : ""

+"|rel<alternate?archives?author?bookmark?external?feed?first?help?index?last?license?next?nofollow?noreferrer?prev?search?sidebar?tag?up"

+"],"

+"abbr,"

+"address,"

+"|rel<alternate?archives?author?bookmark?external?feed?first?help?index?last?license?next?nofollow?noreferrer?prev?search?sidebar?tag?up"

+"],"

+"article,"

+"aside,"

+"blockquote[cite],"

+"body,"

+"br,"

+"formtarget<_blank?_self?_top?_parent|name|type<reset?submit?button|value],"

+"canvas[width,height],"

+"caption,"

+"cite,"

+"code,"

+"col[span],"

+"colgroup[span],"

+"datalist[data],"

+"dd,"

+"del[cite|datetime],"

+"details[open<open],"

+"dfn,"

+"div,"

+"dl,"

+"dt,"

+"-em/i,"

+"embed[src|type|width|height],"

+"eventsource[src],"

+"fieldset[disabled<disabled|form|name],"

+"figcaption,"

+"figure,"

+"footer,"

+"-h1,-h2,-h3,-h4,-h5,-h6,"

+"header,"

+"hgroup,"

+"hr,"

+"|size|src|step|type<hidden?text?search?tel?url?email?password?datetime?date?month?week?time?datetime-local?number?range?color"

+"?checkbox?radio?file?submit?image?reset?button?value|width],"

+"ins[cite|datetime],"

+"kbd,"

+"keygen[autofocus<autofocus|challenge|disabled<disabled|form|name],"

+"label[for|form],"

+"legend,"

+"li[value],"

+"main,"+

+"mark,"

+"map[name],"

+"menu[type<context?toolbar?list|label],"

+"meter[value|min|low|high|max|optimum],"

+"nav,"

+"noscript,"

+"ol[reversed|start],"

+"optgroup[disabled<disabled|label],"

+"option[disabled<disabled|label|selected<selected|value],"

+"output[for|form|name],"

+"-p,"

+"param[name,value],"

+"-pre,"

+"progress[value,max],"

+"q[cite],"

+"ruby,"

+"rp,"

+"rt,"

+"samp,"

+"script[src|async<async|defer<defer|type|charset],"

+"section,"

+"small,"

+"source[src|type|media],"

+"-span,"

+"-strong/b,"

+"-sub,"

+"summary,"

+"-sup,"

+"table,"

+"tbody,"

+"td[colspan|rowspan|headers],"

+"tfoot,"

+"th[colspan|rowspan|headers|scope],"

+"thead,"

+"time[datetime],"

+"tr,"

+"ul,"

+"var,"

+"wbr"

});

Créer un nouveau module

Editer le fichier app/code/Sodifrance/Customtinymce/registration.php

Editer le fichier app/code/Sodifrance/Customtinymce/etc/di.xml

Editer le fichier app/code/Sodifrance/Customtinymce/etc/module.xml

Créer le fichier app/code/Sodifrance/Customtinymce/Plugin/Config.php

Mettre en place vos paramètres TinyMCE 4 custom dans Magento 2 (exemple avec l’option style_formats)

Quelques outils pour convertir un tableau JSON en tableau PHP

Tester la validité de votre tableau avec PHP Sandbox

Tester la validité de données JSON avec JSON Formatter & Validator

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:

app/code/Sodifrance/Pdv/etc/widget.xml

app/code/Sodifrance/Pdv/Block/Widget/TwoColsDynamic.php

app/code/Sodifrance/Pdv/view/frontend/templates/widget/twocolsdynamic.phtml

Installation de l’extension magento2-widget-parameters via Composer

app/code/Sodifrance/Pdv/etc/widget.xml

app/code/Sodifrance/Pdv/Block/Widget/Tab.php

app/code/Sodifrance/Pdv/view/frontend/templates/widget/tab.phtml

Flusher les caches:

Si problèmes…

Modifier le Doctype

[entity_encoding] Eviter que les caractères accentués (é, è, à, etc…) soient transformés en entités HTML (é, è, etc…)

[valid_elements]

[extended_valid_elements] Etendre le champ des balises et attributs HTML valides

[valid_children] Etendre le champ des balises HTML enfants valides

[force_br_newlines][force_p_newlines] Gestion des retours chariot et du formatage des paragraphes

[forced_root_block] Supprimer l’imbrication automatique du texte dans une balise P

TinyMCE valid_elements setting for HTML5

Mettre en place vos paramètres TinyMCE 4 custom dans Magento 2 (exemple avec l’option `style_formats`)