TinyMCE – devfrontend.info

Astuces d’utilisation de TinyMCE dans Magento 2

TinyMCE supprime les icônes Font Awesome (les balises `<i>` vides)

Source: 2.3 – WYSIWYG Editor removes <i> tag.

Solution: mettre un commentaire afin que le tag ne soit pas vide <i class="fa fa-gamepad"></i>.

Surcharger la configuration de TinyMCE dans Magento 2

Ajouter le support d’un élément HTML que TinyMCE supprime/efface par défaut

Nous allons ajouter le support de l’élément HTML <marquee> dans TinyMCE. Pour ce faire, nous allons surcharger le fichier /vendor/magento/module-backend/view/adminhtml/templates/widget/form/element.phtml dans app/design/adminhtml/Sodifrance/pdv/Module_Backend/templates/widget/form/element.phtml (ou Sodifrance/pdv sont les Vendor/theme).

extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],marquee",

1	extended_valid_elements : "a[name\|href\|target\|title\|onclick],img[class\|src\|border=0\|alt\|title\|hspace\|vspace\|width\|height\|align\|onmouseover\|onmouseout\|name],hr[class\|width\|size\|noshade],font[face\|size\|color\|style],span[class\|align\|style],marquee",

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"

});

Articles récents

Catégories

Archives

Méta

Étiquette : TinyMCE

[Magento 2] Astuces d’utilisation et de configuration de TinyMCE

Astuces d’utilisation de TinyMCE dans Magento 2

TinyMCE supprime les icônes Font Awesome (les balises `<i>` vides)

Surcharger la configuration de TinyMCE dans Magento 2

Ajouter le support d’un élément HTML que TinyMCE supprime/efface par défaut

[Magento][TinyMCE] Customizer les settings du WYSIWYG

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

Astuces d’utilisation de TinyMCE dans Magento 2

TinyMCE supprime les icônes Font Awesome (les balises <i> vides)

Surcharger la configuration de TinyMCE dans Magento 2

Ajouter le support d’un élément HTML que TinyMCE supprime/efface par défaut

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

TinyMCE supprime les icônes Font Awesome (les balises `<i>` vides)