Recent Posts
- (09/10) Fixing Warning: the ECDSA host key for 'github.com' differs from the key for the IP addressTAGS:Web Server Admin
- (12/26) CakePHP 3 - Getting List of Column Definitions from a Table (like schema())TAGS:CakephpCake3
- (09/14) Change Order of Loaded Behaviors in CakePHP 3TAGS:Cake3CakephpWeb ProgrammingPhp
- (05/29) CakePHP 3 - Accept JSON Header Only Working When Debug FalseTAGS:Web ProgrammingCakephpCake3
- (05/23) Remove All Events from Google Calendar (Reset Calendar)TAGS:Web ProgrammingPhp
- (11/08) Google Tag Manager (GTM) Not Firing Default PageView EventTAGS:Web ProgrammingJavascriptGoogle Tag Manager
- (10/13) In PHP, how do you get __toString() Magic Method Result without calling echo?TAGS:CakephpCake3Cakephp 13PhpWeb Programming
- (11/14) Getting output from shell_exec() at all timesTAGS:Web ProgrammingWeb Server Admin
Subscribe to my feed
MainelyDesign.com Blog
Preformatted Text in TinyMCE <pre></pre>
Posted on 04/21/2009 at 10:26 am by Kevin Wentworth
Viewed 21,701 times | 1 comment
Now that I've got my blog up and running, I've been playing around with syntax highlighting of source code. I really appreciate sites that serve up code samples in a nice format, so I've tried to comply with my own version of this best practice.
Getting Geshi working, for syntax highlighting was one battle (I'll try and post what I came up with later). My real trouble came with using <pre></pre> tags for my code samples within TinyMCE. I absolutely love TinyMCE! I did a lot of research on the best JavaScript-based WYSIWYG editor oh about 5 years ago, and decided on TinyMCE and never looked back. I use it in all of my applications that require formatted HTML input (especially Site Avenger). Every now and then I will look at another editor (I know 5 years is ancient by web standards) but I've never found an editor I like more. Each editor has its quirks and I think the quirks within TinyMCE are the most manageable (as I tell my clients- even MS Word has quirks, you're just used to them).
I was having some issues using the PRE tag in TinyMCE. I hadn't upgraded my TinyMCE install for quite a while so I decided to upgrade. I was a little nervous (and avoiding the upgrade) because of some of the custom-built Javascript code that I knew would break. Much to my delight, the upgrade went very smooth, and all of my functionality worked, with the exception of this weird hack I had been using to initialize the editor. With a fresh look at that hack, I decided I didn't need it and ended up using a native config setting that did the same thing- mode: exact, elements: "textareaName, textArea2, etc." It's nice to "refactor" your code!
So now I had Site Avenger running TinyMCE v3.2.2.3 with all my custom-built bells and whistles. I got down to writing my blog entries and started seeing some weird behavior- if I pasted content (through the plain-text dialog window) into a <pre> tag, the spacing/tabbing would be perfect. If I began to edit the code within the <pre> tags (through the TinyMCE editor), especially adding new lines, my line feeds would be turned into line breaks (<br />). Not good... I also found that if I went in and edited an article I had already posted (say for a typo) then the <pre> contents would all get <br /> added. I figured it was the way I was doing it.
Turns out, a lot of people are frustrated with TinyMCE's handling of content within <pre></pre> tags. Someone finally got fed up enough to provide a plugin, aptly named, prelementfix. All you do is add this to your plugins directory, and your plugin config line, and TinyMCE starts acting exactly how I need it to. Hitting the tab key tabs the content. No extraneous <br /> getting stuffed in the code. The code within the pre tags was staying intact and properly formatted. Thank you T Andersen!
I was only pasting PHP code snippets, so I wasn't running into issues with html entity encoding like many people do. I'd love to see this preelementfix plugin functionality be the default. Maybe incorporate the htmlentityencoding that the TinyMCE developers insist <pre> tagged content needs.
Tags for Preformatted Text in TinyMCE <pre></pre>
Tinymce | Geshi | Site Avenger | Usage | Usability | Upgrade
Comments for this Posting
Sorry, comments are closed for this posting.
Please Email Kevin if you have any questions. Thanks!
Posted by Kelvin
on 3/10/11
A little difficult to digest and it would be good to include html entities, but thanks for the post.
www.astleymarketing.com