https://github.com/ecodeeshop/ps-tinymce-extend

Prestashop TinyMCE Extend
https://github.com/ecodeeshop/ps-tinymce-extend

extend prestashop prestashop-module tinymce tinymce-editor

Last synced: 25 days ago
JSON representation

Prestashop TinyMCE Extend

• Host: GitHub
• URL: https://github.com/ecodeeshop/ps-tinymce-extend
• Owner: ECodeeshop
• Created: 2024-04-09T15:21:52.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-24T09:14:39.000Z (9 months ago)
• Last Synced: 2024-12-17T09:09:35.536Z (25 days ago)
• Topics: extend, prestashop, prestashop-module, tinymce, tinymce-editor
• Language: PHP
• Homepage:
• Size: 212 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ps-tinymce-extend

## Button to Change Background Color of text editor to Black

> [Install Module](/cestinymce)

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](/Button%20to%20Change%20Background%20Color%20of%20text%20editor%20to%20Black.txt)

![alt text](image-1.png)

```javascript

if (tinymce.editors.length) {

    const new_bg_color = '#000'

    $('body').append(`

        

        Change BG Color

        close

    `)

    $('.myclose-bg-color-change').on('click', function () {

        $('.bg-color-change-btn').remove()

    })

    $('.bg-color-change-btn').on('click', function () {

        for (let index = 0; index < 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](/Extend%20the%20editor%20functionality%20to%20have%20more%20content%20editing%20features.txt)

![alt text](image.png)

```javascript

/**

 * Change default icons to marerial icons

 */

function changeToMaterial() {

  var materialIconAssoc = {

    'mce-i-code': 'code',

    'mce-i-none': 'format_color_text',

    'mce-i-bold': 'format_bold',

    'mce-i-italic': 'format_italic',

    'mce-i-underline': 'format_underlined',

    'mce-i-strikethrough': 'format_strikethrough',

    'mce-i-blockquote': 'format_quote',

    'mce-i-link': 'link',

    'mce-i-alignleft': 'format_align_left',

    'mce-i-aligncenter': 'format_align_center',

    'mce-i-alignright': 'format_align_right',

    'mce-i-alignjustify': 'format_align_justify',

    'mce-i-bullist': 'format_list_bulleted',

    'mce-i-numlist': 'format_list_numbered',

    'mce-i-image': 'image',

    'mce-i-table': 'grid_on',

    'mce-i-media': 'video_library',

    'mce-i-browse': 'attachment',

    'mce-i-checkbox': ''

  };

  $.each(materialIconAssoc, function(index, value) {

    $('.' + index).replaceWith(value);

  });

}

function tinySetup(config) {

  if (typeof tinyMCE === 'undefined') {

    setTimeout(function() {

      tinySetup(config);

    }, 100);

    return;

  }

  if (!config) {

    config = {};

  }

  if (typeof config.editor_selector != 'undefined') {

    config.selector = '.' + config.editor_selector;

  }

  const all_plugins = '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';

  const toolbar1 = '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';

  const quickbars_selection_toolbar = 'bold italic | quicklink h2 h3 blockquote quickimage quicktable';

  const content_style = `@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); body { font-family: 'Playfair Display', serif; } h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; }`;

  var default_config = {

    selector: '.rte',

    plugins: all_plugins,

    browser_spellcheck: true,

    quickbars_selection_toolbar: quickbars_selection_toolbar,

    toolbar_mode: 'sliding',

    toolbar1: toolbar1,

    toolbar2: '',

    external_filemanager_path: baseAdminDir + 'filemanager/',

    filemanager_title: 'File manager',

    external_plugins: {

      filemanager: baseAdminDir + 'filemanager/plugin.min.js'

    },

    language: iso_user,

    content_style: lang_is_rtl === '1' ? 'body {direction:rtl;}' : content_style,

    skin: 'prestashop',

    mobile: {

      theme: 'mobile',

      plugins: ['lists', 'align', 'link', 'table', 'placeholder', 'advlist', 'code'],

      toolbar:

        'undo code colorpicker bold italic underline strikethrough blockquote link align bullist numlist table formatselect styleselect',

    },

    menubar: 'edit insert format',

    statusbar: false,

    relative_urls: false,

    convert_urls: false,

    entity_encoding: 'raw',

    extended_valid_elements: 'em[class|name|id],@[role|data-*|aria-*]',

    valid_children: '+*[*]',

    valid_elements: '*[*]',

    init_instance_callback: 'changeToMaterial',

    rel_list: [{title: 'nofollow', value: 'nofollow'}]

  };

  if (typeof window.defaultTinyMceConfig !== 'undefined') {

    Object.assign(default_config, window.defaultTinyMceConfig);

  }

  $.each(default_config, function(index, el) {

    if (config[index] === undefined) config[index] = el;

  });

  var plugins_arr = config['plugins'].split(/[ ,]/);

  var old_plugins_array = ['iespell', 'inlinepopups', 'style', 'xhtmlxtras', 'safari'];

  $.each(plugins_arr, function(index, data) {

    if (data == 'advhr') plugins_arr[index] = 'hr';

    else if (data == 'advlink') plugins_arr[index] = 'link';

    else if (data == 'advimage') {

      plugins_arr[index] = 'image';

      plugins_arr.push('filemanager');

    } else if (data == 'emotions') plugins_arr[index] = 'emoticons';

    else if (old_plugins_array.indexOf(data) >= 0) {

      plugins_arr.splice(index, 1);

    }

  });

  var plugins = plugins_arr.join(',');

  config.plugins = plugins;

  // Change icons in popups

  $('body').on('click', '.mce-btn, .mce-open, .mce-menu-item', function() {

    changeToMaterial();

  });

  tinyMCE.init(config);

  if (tinymce.editors.length) {

    const new_bg_color = '#000'

      $('body').append(`

          

          Change BG Color

          close

      `)

      $('.myclose-bg-color-change').on('click', function () {

          $('.bg-color-change-btn').remove()

      })

      $('.bg-color-change-btn').on('click', function () {

          for (let index = 0; index < tinymce.editors.length; index++) {

              tinymce.editors[index].getBody().style.backgroundColor = new_bg_color

          }

      })

  }

}

```