08 Feb 2016

How to change WYSIWYG on Magento 1.7

How to change standart WYSIWYG editor in Admin.

08 Feb 2016

How to change standart WYSIWYG editor in Admin.

Hi there.

It will be my first post on Magento here.

I had some old snippets and mini-tutors for myself, that I’ve decided to post here.

So, one of our clients was unsatisfied with standart Magento editor in Admin.

How to change it, for, say, TinyMCE?

  1. Go to https://www.tinymce.com/download/
  2. Choose your version to download. At the moment of that project I chose  TinyMCE 3.5.8 jQuery package.
  3. As my client was Ukrainian speaker, I’ve downloaded translation – http://archive.tinymce.com/i18n/?ctrl=lang&act=download&pr_id=1.
  4. Unarchive all files into single folder (f.e., tiny_mce). Say yes to rewrite existing files.
  5. Go to Magento root folder on your server.
  6. Go to [magento_root]/js.
  7. You will fine ../tiny_mce here.
  8. Please, back up and delete this folder. Or just rename it.
  9. Optional – if you also downloaded non-English version of Tiny MCE, open file [magento_root]/js/mage/adminhtml/wysiwyg/tiny_mce/setup.js
  10. Find the string starting with var settings = {. I had it on line 97.
  11. Add option language: 'lang_code', where ‘lang_code’ is your language code (I had ‘ru’).
  12. Save the file.
  13. If your admin doesn’t have jQuery already running, download jQuery with jQuery Non-conflict from the official website. Better to check compatible jQuery version on the TinyMCE site. I used jQuery 1.7.2 at the moment of this project running.
  14. You can write your own service extension (a better way, but will be described in later post) to include jQuery on admin. Or just follow step 15 for quick solution.
  15. Copy your jQuery file to [magento_root]/skin/adminhtml/default/default/js folder.
  16. Load script on admin – just edit [magento_root]/app/desig/adminhtml/default/default/layout/main.xml
  17. Find following code (around line 108).
  18. Paste your include code before this line

  19. Remove cache at [magento_root]/var/cache.
  20. Et voila – you just got fresh localized WYSIWYG editor!

PS – please, note, that quick method is described here on how to include jQuery script. It’s always better to use your service extensions to include extra scripts or overwrite existing configurations. So you don’t lose it after Magento updates.

PPS – tested on Magento 1.7.

Leave a comment
More Posts