How to make TinyMCE WYSIWYG to work with GESHI Filter

Preksha Patel's picture

How to make TinyMCE WYSIWYG to work with GESHI Filter

GeShi Filter provides a filter for source code syntax highlighting for various languages in any posts, for example in Blog Post.

I got TinyMCE WYSIWYG to work with GESHI filter using the following steps:

1. Download and install WYSIWYG module.

2. Download TinyMCE into sites/all/libraries.

3. Download and install WYSIWYG Filter module.

4. Created a new Text Format with the name "WYSIWYG Filter".

    Enabled the following under Enabled Filters and put them in the filter processing order as listed below:

  •         WYSIWYG Filter
  •         Encode email addresses: Javascript-wrapped HTML entities
  •         Encode email addresses: HTML entities
  •         Convert URLs into links
  •         Correct faulty and chopped off HTML
  •         GeSHi filter
  •         Convert line breaks into HTML

    For Filter Settings: Under WYSIWYG Filter, I added the tags GESHI to the HTML elements and attributes i.e. php as I need php code to be highlighted.

5. In WYSIWYG Profiles I set text format Editor as TinyMCE. To configure it, edit it and under "Cleanup and Output" I disabled everything except Apply Source formatting.

6. Left defaults for GESHI configuration (no line numbers)

7. Now to use the syntax highlighting in a textarea with WYSIWYG:

  •     Disable rich text-format
  •     Enter in <php>your code here</php> wherever you need it
  •     Re-enable rich text format and continue using WYSIWYG

I recognized that all HTML correction from TinyMCE WYSIWYG profile under Cleanup and output needs to be disabled to keep php tag and replace it with p tag, else it was not working for me, the php tag displayed as it is.

Also, under the WYSIWYG Filter, in the filter processing order, it was necessary to keep GeShi filter before the convert line breaks into HTML, else br tag was ended up throughtout the PHP code.