{"id":15145588,"url":"https://github.com/ecodeeshop/ps-tinymce-extend","last_synced_at":"2026-01-18T08:32:34.750Z","repository":{"id":232450011,"uuid":"784299787","full_name":"ECodeeshop/ps-tinymce-extend","owner":"ECodeeshop","description":"Prestashop TinyMCE Extend","archived":false,"fork":false,"pushed_at":"2024-04-24T09:14:39.000Z","size":217,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-09T17:13:54.951Z","etag":null,"topics":["extend","prestashop","prestashop-module","tinymce","tinymce-editor"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ECodeeshop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-09T15:21:52.000Z","updated_at":"2024-04-24T09:14:43.000Z","dependencies_parsed_at":"2024-04-24T10:36:05.274Z","dependency_job_id":null,"html_url":"https://github.com/ECodeeshop/ps-tinymce-extend","commit_stats":null,"previous_names":["ecodeeshop/ps-tinymce-extend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ECodeeshop%2Fps-tinymce-extend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ECodeeshop%2Fps-tinymce-extend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ECodeeshop%2Fps-tinymce-extend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ECodeeshop%2Fps-tinymce-extend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ECodeeshop","download_url":"https://codeload.github.com/ECodeeshop/ps-tinymce-extend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128742,"owners_count":20888234,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["extend","prestashop","prestashop-module","tinymce","tinymce-editor"],"created_at":"2024-09-26T11:41:03.835Z","updated_at":"2026-01-18T08:32:34.718Z","avatar_url":"https://github.com/ECodeeshop.png","language":"PHP","readme":"# ps-tinymce-extend\n## Button to Change Background Color of text editor to Black\n\u003e [Install Module](/cestinymce)\n\nOR\n\n\u003e Install Manually Using Below Steps\n\n## Button to Change Background Color of text editor to Black\n\n#### Note: Add any js file and load it under Hook - displaybackOfficeHeader\n\n[Copy Snippet Code.txt](/Button%20to%20Change%20Background%20Color%20of%20text%20editor%20to%20Black.txt)\n\n![alt text](image-1.png)\n\n```javascript\nif (tinymce.editors.length) {\n    const new_bg_color = '#000'\n    $('body').append(`\u003cbutton style=\"position: fixed; bottom: 80px; right: 15px;\" class=\"btn-secondary cancel-button btn bg-color-change-btn\"\u003e\n        \u003ci class=\"material-icons\"\u003e\u003c/i\u003e\n        Change BG Color\n        \u003cspan style=\"border: 1px solid; border-radius: 5px;\"\u003e\u003ci class=\"material-icons myclose-bg-color-change\"\u003eclose\u003c/i\u003e\u003c/span\u003e\n    \u003c/button\u003e`)\n\n    $('.myclose-bg-color-change').on('click', function () {\n        $('.bg-color-change-btn').remove()\n    })\n\n    $('.bg-color-change-btn').on('click', function () {\n        for (let index = 0; index \u003c tinymce.editors.length; index++) {\n            tinymce.editors[index].getBody().style.backgroundColor = new_bg_color\n        }\n    })\n}\n```\n\n## Extend the editor functionality to have more content editing features\n\n#### Note: File to update: js/admin/tinymce.inc.js\n\n[Copy Snippet Code.txt](/Extend%20the%20editor%20functionality%20to%20have%20more%20content%20editing%20features.txt)\n\n![alt text](image.png)\n\n\n```javascript\n/**\n * Change default icons to marerial icons\n */\nfunction changeToMaterial() {\n  var materialIconAssoc = {\n    'mce-i-code': '\u003ci class=\"material-icons\"\u003ecode\u003c/i\u003e',\n    'mce-i-none': '\u003ci class=\"material-icons\"\u003eformat_color_text\u003c/i\u003e',\n    'mce-i-bold': '\u003ci class=\"material-icons\"\u003eformat_bold\u003c/i\u003e',\n    'mce-i-italic': '\u003ci class=\"material-icons\"\u003eformat_italic\u003c/i\u003e',\n    'mce-i-underline': '\u003ci class=\"material-icons\"\u003eformat_underlined\u003c/i\u003e',\n    'mce-i-strikethrough': '\u003ci class=\"material-icons\"\u003eformat_strikethrough\u003c/i\u003e',\n    'mce-i-blockquote': '\u003ci class=\"material-icons\"\u003eformat_quote\u003c/i\u003e',\n    'mce-i-link': '\u003ci class=\"material-icons\"\u003elink\u003c/i\u003e',\n    'mce-i-alignleft': '\u003ci class=\"material-icons\"\u003eformat_align_left\u003c/i\u003e',\n    'mce-i-aligncenter': '\u003ci class=\"material-icons\"\u003eformat_align_center\u003c/i\u003e',\n    'mce-i-alignright': '\u003ci class=\"material-icons\"\u003eformat_align_right\u003c/i\u003e',\n    'mce-i-alignjustify': '\u003ci class=\"material-icons\"\u003eformat_align_justify\u003c/i\u003e',\n    'mce-i-bullist': '\u003ci class=\"material-icons\"\u003eformat_list_bulleted\u003c/i\u003e',\n    'mce-i-numlist': '\u003ci class=\"material-icons\"\u003eformat_list_numbered\u003c/i\u003e',\n    'mce-i-image': '\u003ci class=\"material-icons\"\u003eimage\u003c/i\u003e',\n    'mce-i-table': '\u003ci class=\"material-icons\"\u003egrid_on\u003c/i\u003e',\n    'mce-i-media': '\u003ci class=\"material-icons\"\u003evideo_library\u003c/i\u003e',\n    'mce-i-browse': '\u003ci class=\"material-icons\"\u003eattachment\u003c/i\u003e',\n    'mce-i-checkbox': '\u003ci class=\"mce-ico mce-i-checkbox\"\u003e\u003c/i\u003e'\n  };\n\n  $.each(materialIconAssoc, function(index, value) {\n    $('.' + index).replaceWith(value);\n  });\n}\n\nfunction tinySetup(config) {\n  if (typeof tinyMCE === 'undefined') {\n    setTimeout(function() {\n      tinySetup(config);\n    }, 100);\n    return;\n  }\n\n  if (!config) {\n    config = {};\n  }\n\n  if (typeof config.editor_selector != 'undefined') {\n    config.selector = '.' + config.editor_selector;\n  }\n\n  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';\n  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';\n  const quickbars_selection_toolbar = 'bold italic | quicklink h2 h3 blockquote quickimage quicktable';\n  const content_style = `@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900\u0026display=swap'); body { font-family: 'Playfair Display', serif; } h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; }`;\n\n  var default_config = {\n    selector: '.rte',\n    plugins: all_plugins,\n    browser_spellcheck: true,\n    quickbars_selection_toolbar: quickbars_selection_toolbar,\n    toolbar_mode: 'sliding',\n    toolbar1: toolbar1,\n    toolbar2: '',\n    external_filemanager_path: baseAdminDir + 'filemanager/',\n    filemanager_title: 'File manager',\n    external_plugins: {\n      filemanager: baseAdminDir + 'filemanager/plugin.min.js'\n    },\n    language: iso_user,\n    content_style: lang_is_rtl === '1' ? 'body {direction:rtl;}' : content_style,\n    skin: 'prestashop',\n    mobile: {\n      theme: 'mobile',\n      plugins: ['lists', 'align', 'link', 'table', 'placeholder', 'advlist', 'code'],\n      toolbar:\n        'undo code colorpicker bold italic underline strikethrough blockquote link align bullist numlist table formatselect styleselect',\n    },\n    menubar: 'edit insert format',\n    statusbar: false,\n    relative_urls: false,\n    convert_urls: false,\n    entity_encoding: 'raw',\n    extended_valid_elements: 'em[class|name|id],@[role|data-*|aria-*]',\n    valid_children: '+*[*]',\n    valid_elements: '*[*]',\n    init_instance_callback: 'changeToMaterial',\n    rel_list: [{title: 'nofollow', value: 'nofollow'}]\n  };\n\n  if (typeof window.defaultTinyMceConfig !== 'undefined') {\n    Object.assign(default_config, window.defaultTinyMceConfig);\n  }\n\n  $.each(default_config, function(index, el) {\n    if (config[index] === undefined) config[index] = el;\n  });\n\n  var plugins_arr = config['plugins'].split(/[ ,]/);\n  var old_plugins_array = ['iespell', 'inlinepopups', 'style', 'xhtmlxtras', 'safari'];\n  $.each(plugins_arr, function(index, data) {\n    if (data == 'advhr') plugins_arr[index] = 'hr';\n    else if (data == 'advlink') plugins_arr[index] = 'link';\n    else if (data == 'advimage') {\n      plugins_arr[index] = 'image';\n      plugins_arr.push('filemanager');\n    } else if (data == 'emotions') plugins_arr[index] = 'emoticons';\n    else if (old_plugins_array.indexOf(data) \u003e= 0) {\n      plugins_arr.splice(index, 1);\n    }\n  });\n\n  var plugins = plugins_arr.join(',');\n\n  config.plugins = plugins;\n\n  // Change icons in popups\n  $('body').on('click', '.mce-btn, .mce-open, .mce-menu-item', function() {\n    changeToMaterial();\n  });\n\n  tinyMCE.init(config);\n\n  if (tinymce.editors.length) {\n    const new_bg_color = '#000'\n      $('body').append(`\u003cbutton style=\"\n      position: fixed;\n      top: 45px;\n      right: 15px;\n      z-index: 999999;\n      color: #fff;\n      background: #889da2;\n      border-color: #889da2;\n      font-weight: 600;\n      padding: .5rem 1rem;\n      overflow: hidden;\n      font-size: .875rem;\n      text-align: center;\n      text-overflow: ellipsis;\n      text-shadow: none;\n      white-space: nowrap;\n      border: 1px solid #6c868e;\n      border-radius: 4px;\n      transition: .25s ease-out;\n      margin: 0 14px 2px 0;\" \n      class=\"btn-secondary cancel-button btn bg-color-change-btn\"\u003e\n          \u003ci class=\"material-icons\"\u003e\u003c/i\u003e\n          Change BG Color\n          \u003cspan style=\"border: 1px solid; border-radius: 5px; margin-left: 5px;\"\u003e\u003ci style=\"font-size: .875rem;\" class=\"material-icons myclose-bg-color-change\"\u003eclose\u003c/i\u003e\u003c/span\u003e\n      \u003c/button\u003e`)\n\n      $('.myclose-bg-color-change').on('click', function () {\n          $('.bg-color-change-btn').remove()\n      })\n\n      $('.bg-color-change-btn').on('click', function () {\n          for (let index = 0; index \u003c tinymce.editors.length; index++) {\n              tinymce.editors[index].getBody().style.backgroundColor = new_bg_color\n          }\n      })\n  }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecodeeshop%2Fps-tinymce-extend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecodeeshop%2Fps-tinymce-extend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecodeeshop%2Fps-tinymce-extend/lists"}