Aucune image disponible

Prestashop TinyMCE Extend

Prestashop TinyMCE Extend

Developed by ECodeeshop

Get This Module Free on GitHub
License: Inconnu Status: Active Health: Very Outdated

Info updated 1 month ago

Sources
GitHub Visit →
Last commit: Apr 24, 2024
Type
Module

Info checked: Mar 2, 2026

ps-tinymce-extend

Button to Change Background Color of text editor to Black

> Install Module

OR

> Install Manually Using Below Steps

Button to Change Background Color of text editor to Black

Note: Add any js file and load it under Hook - displaybackOfficeHeader

Copy Snippet Code.txt

!alt text

if (tinymce.editors.length) {

const new_bg_color = &#039;#000&#039; $(&#039;body&#039;).append(<code>&amp;lt;button fixed; bottom: 80px; right: 15px;&amp;quot; class=&amp;quot;btn-secondary cancel-button btn bg-color-change-btn&amp;quot;&amp;gt; &amp;lt;i class=&amp;quot;material-icons&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; Change BG Color &amp;lt;span 1px solid; border-radius: 5px;&amp;quot;&amp;gt;&amp;lt;i class=&amp;quot;material-icons myclose-bg-color-change&amp;quot;&amp;gt;close&amp;lt;/i&amp;gt;&amp;lt;/span&amp;gt; &amp;lt;/button&amp;gt;</code>)

$(&#039;.myclose-bg-color-change&#039;).on(&#039;click&#039;, function () { $(&#039;.bg-color-change-btn&#039;).remove() })

$(&#039;.bg-color-change-btn&#039;).on(&#039;click&#039;, function () { for (let index = 0; index &lt; tinymce.editors.length; index++) { tinymce.editors[index].getBody().style.backgroundColor = new_bg_color } }) }

Extend the editor functionality to have more content editing features

Note: File to update: js/admin/tinymce.inc.js

Copy Snippet Code.txt

!alt text

/**
Change default icons to marerial icons

*/ function changeToMaterial() { var materialIconAssoc = { &#039;mce-i-code&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;code&lt;/i&gt;&#039;, &#039;mce-i-none&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_color_text&lt;/i&gt;&#039;, &#039;mce-i-bold&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_bold&lt;/i&gt;&#039;, &#039;mce-i-italic&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_italic&lt;/i&gt;&#039;, &#039;mce-i-underline&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_underlined&lt;/i&gt;&#039;, &#039;mce-i-strikethrough&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_strikethrough&lt;/i&gt;&#039;, &#039;mce-i-blockquote&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_quote&lt;/i&gt;&#039;, &#039;mce-i-link&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;link&lt;/i&gt;&#039;, &#039;mce-i-alignleft&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_align_left&lt;/i&gt;&#039;, &#039;mce-i-aligncenter&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_align_center&lt;/i&gt;&#039;, &#039;mce-i-alignright&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_align_right&lt;/i&gt;&#039;, &#039;mce-i-alignjustify&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_align_justify&lt;/i&gt;&#039;, &#039;mce-i-bullist&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_list_bulleted&lt;/i&gt;&#039;, &#039;mce-i-numlist&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;format_list_numbered&lt;/i&gt;&#039;, &#039;mce-i-image&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;image&lt;/i&gt;&#039;, &#039;mce-i-table&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;grid_on&lt;/i&gt;&#039;, &#039;mce-i-media&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;video_library&lt;/i&gt;&#039;, &#039;mce-i-browse&#039;: &#039;&lt;i class=&quot;material-icons&quot;&gt;attachment&lt;/i&gt;&#039;, &#039;mce-i-checkbox&#039;: &#039;&lt;i class=&quot;mce-ico mce-i-checkbox&quot;&gt;&lt;/i&gt;&#039; };

$.each(materialIconAssoc, function(index, value) { $(&#039;.&#039; + index).replaceWith(value); }); }

function tinySetup(config) { if (typeof tinyMCE === &#039;undefined&#039;) { setTimeout(function() { tinySetup(config); }, 100); return; }

if (!config) { config = {}; }

if (typeof config.editor_selector != &#039;undefined&#039;) { config.selector = &#039;.&#039; + config.editor_selector; }

const all_plugins = &#039;align colorpicker link image filemanager table media placeholder lists advlist code table autoresize preview importcss searchreplace autolink directionality code visualblocks visualchars fullscreen image link media table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap emoticons&#039;; const toolbar1 = &#039;undo redo | fontselect fontsize fontsizeselect formatselect | colorpicker | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat typography | charmap emoticons | code fullscreen preview | print | pagebreak anchor | ltr rtl&#039;; const quickbars_selection_toolbar = &#039;bold italic | quicklink h2 h3 blockquote quickimage quicktable&#039;; const content_style = <code>@import url(&amp;#039;https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&amp;amp;display=swap&amp;#039;); body { font-family: &amp;#039;Playfair Display&amp;#039;, serif; } h1,h2,h3,h4,h5,h6 { font-family: &amp;#039;Playfair Display&amp;#039;, serif; }</code>;

var default_config = { selector: &#039;.rte&#039;, plugins: all_plugins, browser_spellcheck: true, quickbars_selection_toolbar: quickbars_selection_toolbar, toolbar_mode: &#039;sliding&#039;, toolbar1: toolbar1, toolbar2: &#039;&#039;, external_filemanager_path: baseAdminDir + &#039;filemanager/&#039;, filemanager_title: &#039;File manager&#039;, external_plugins: { filemanager: baseAdminDir + &#039;filemanager/plugin.min.js&#039; }, language: iso_user, content_style: lang_is_rtl === &#039;1&#039; ? &#039;body {direction:rtl;}&#039; : content_style, skin: &#039;prestashop&#039;, mobile: { theme: &#039;mobile&#039;, plugins: [&#039;lists&#039;, &#039;align&#039;, &#039;link&#039;, &#039;table&#039;, &#039;placeholder&#039;, &#039;advlist&#039;, &#039;code&#039;], toolbar: &#039;undo code colorpicker bold italic underline strikethrough blockquote link align bullist numlist table formatselect styleselect&#039;, }, menubar: &#039;edit insert format&#039;, statusbar: false, relative_urls: false, convert_urls: false, entity_encoding: &#039;raw&#039;, extended_valid_elements: &#039;em[class|name|id],@[role|data-|aria-]&#039;, valid_children: &#039;+[]&#039;, valid_elements: &#039;[]&#039;, init_instance_callback: &#039;changeToMaterial&#039;, rel_list: [{title: &#039;nofollow&#039;, value: &#039;nofollow&#039;}] };

if (typeof window.defaultTinyMceConfig !== &#039;undefined&#039;) { Object.assign(default_config, window.defaultTinyMceConfig); }

$.each(default_config, function(index, el) { if (config[index] === undefined) config[index] = el; });

var plugins_arr = config[&#039;plugins&#039;].split(/[ ,]/); var old_plugins_array = [&#039;iespell&#039;, &#039;inlinepopups&#039;, &#039;style&#039;, &#039;xhtmlxtras&#039;, &#039;safari&#039;]; $.each(plugins_arr, function(index, data) { if (data == &#039;advhr&#039;) plugins_arr[index] = &#039;hr&#039;; else if (data == &#039;advlink&#039;) plugins_arr[index] = &#039;link&#039;; else if (data == &#039;advimage&#039;) { plugins_arr[index] = &#039;image&#039;; plugins_arr.push(&#039;filemanager&#039;); } else if (data == &#039;emotions&#039;) plugins_arr[index] = &#039;emoticons&#039;; else if (old_plugins_array.indexOf(data) &gt;= 0) { plugins_arr.splice(index, 1); } });

var plugins = plugins_arr.join(&#039;,&#039;);

config.plugins = plugins;

// Change icons in popups $(&#039;body&#039;).on(&#039;click&#039;, &#039;.mce-btn, .mce-open, .mce-menu-item&#039;, function() { changeToMaterial(); });

tinyMCE.init(config);

if (tinymce.editors.length) { const new_bg_color = &#039;#000&#039; $(&#039;body&#039;).append(<code>&amp;lt;button position: fixed; top: 45px; right: 15px; z-index: 999999; color: #fff; background: #889da2; border-color: #889da2; font-weight: 600; padding: .5rem 1rem; overflow: hidden; font-size: .875rem; text-align: center; text-overflow: ellipsis; text-shadow: none; white-space: nowrap; border: 1px solid #6c868e; border-radius: 4px; transition: .25s ease-out; margin: 0 14px 2px 0;&amp;quot; class=&amp;quot;btn-secondary cancel-button btn bg-color-change-btn&amp;quot;&amp;gt; &amp;lt;i class=&amp;quot;material-icons&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; Change BG Color &amp;lt;span 1px solid; border-radius: 5px; margin-left: 5px;&amp;quot;&amp;gt;&amp;lt;i .875rem;&amp;quot; class=&amp;quot;material-icons myclose-bg-color-change&amp;quot;&amp;gt;close&amp;lt;/i&amp;gt;&amp;lt;/span&amp;gt; &amp;lt;/button&amp;gt;</code>)

$(&#039;.myclose-bg-color-change&#039;).on(&#039;click&#039;, function () { $(&#039;.bg-color-change-btn&#039;).remove() })

$(&#039;.bg-color-change-btn&#039;).on(&#039;click&#039;, function () { for (let index = 0; index &lt; tinymce.editors.length; index++) { tinymce.editors[index].getBody().style.backgroundColor = new_bg_color } }) } }

  • Référence
    ps-tinymce-extend

  • License
    Inconnu
  • Status
    Actif

Commentaires (0)

Aucun avis n'a été publié pour le moment.