The RedDot plugin for TinyMCE has been updated. This version is a maintenance update only, but contains several minor bug fixes. See http://webpress.missouristate.edu/TinyMCE.htm for full details.
One frustrating part of the WCMS templating system is that while an anchor can output two (or more) pieces of information (title and url), you must choose either to use the basic tag markup (standard <a> tag) or use the path and file name only option of the anchor. This presents challenges when you want both the url and page title, but want to add additional markup. This issue really comes into play with breadcrumbs and lists.
I recently wanted to change our base templates to have breadcrumbs that conformed to Google’s rich snippet standards. This requires a change in the markup generated by the anchor placeholder. After trying multiple different approaches, I finally found a workable solution using pre-execution.
Step 1 – Use techniques previously posted to get the full anchor tag into a pre-execute variable
While looping through the breadcrumb, I create an anonymous function which has a body of only a comment followed by the anchor tag placeholder. I can use the “toString()” method to get the whole function tag as a string and use a regular expression to extract only the original placeholder.
Step 2 – Parse the anchor tag and add the necessary attributes and tags
Once I have the anchor tag in a variable, I can then insert my new properties and tags into it’s markup. For convenience, I simply add the result to a javascript array.
Step 3 – Use VBScript to output the result
Javascript arrays have an extremely handy function “join” which concatenates each element in the array together separated by a provided string. I call the join function in a VBScript block as calling “Response.Write” in server-side Javascript doesn’t seem to work in pre-execution.
Final Code
<!IoRangePreExecute> <script language="javascript" runat="server"> var PlaceholderValueRegExp = /^\(?function(\s+\w)?\s*\(\s*\)\s*\{\s*\/\/([\s\S]*)\}\s*\)?\s*$/i; function GetPlaceholderValue(PlaceholderFunctionString) { var arr = PlaceholderFunctionString.match(PlaceholderValueRegExp); if (arr && arr.length && arr.length > 1) { return arr[2]; } else { return ""; } } //Array to hold each breadcrumb part var BreadcrumbParts = []; function FormatBreadcrumbPart(input) { //Remove leading and trailing whitespace var BreadcrumbPart = input.replace(/(^\s+|\s+$)/ig,""); //Sanity check to make sure we actually have the end of an HTML tag var TagEndIndex = BreadcrumbPart.indexOf(">"); if (TagEndIndex > 0) { BreadcrumbPart = "<span itemscope itemtype=\"http://data-vocabulary.org/Breadcrumb\">" + BreadcrumbPart.substring(0, TagEndIndex) + " itemprop=\"url\"><span itemprop=\"title\"" + BreadcrumbPart.substring(TagEndIndex, BreadcrumbPart.length - 4) + "</span></a></span>"; } return BreadcrumbPart; } </script> <!/IoRangePreExecute> <div id="Breadcrumb"> <!IoRangeBreadCrumb><!IoRangePreExecute> <script runat="server" language="javascript"> BreadcrumbParts.push( FormatBreadcrumbPart( GetPlaceholderValue( (function({ //<%BreadcrumbAnchor%> }).toString() ))); </script> <!/IoRangePreExecute><!/IoRangeBreadCrumb> <!IoRangePreExecute><%=BreadcrumbParts.join(" > ")%><!/IoRangePreExecute> > <%Headline%> </div> |
With the release of Internet Explorer 9, our CMS experience went downhill in a hurry. The CMS screens render horribly. Thankfully, Microsoft envisioned problems such as these and engineered a solution that can be applied to the server.
Internet Explorer Rendering Modes
Versions 8 and 9 of Internet Explorer have shipped with the rendering engine of previous versions built in. By default, IE will look at for the existence of a DOCTYPE to trigger it to render in standards or quirks mode. However, it also supports standards mode rendering for each prior version back to IE7. The trick is specifying which version you want.
Custom Headers
Internet explorer looks for the X-UA-Compatible http header in order to determine what rendering mode it should use. In the absence of that header, it will either render in standards mode for the newest browser if there is a DOCTYPE, or use quirks mode (roughly IE5) rendering.
For OpenText (RedDot) CMS, the appropriate value is “IE=EmulateIE8”.
Learn more about the X-UA-Compatible header
Configure IIS
It’s a simple matter to add custom headers in IIS. You can find the option in the IIS Snap-in, under the properties for the CMS folder.
And that’s all there is to it. Your editors should now see the site as rendered by IE8.
Web pages should load fast. Period. It’s irritating for any reason to wait on a computer. As a web developer, so many of the factors that go into page loading speed are outside of our control. However, some of the biggest ones are fixable with a minimal amount of work. The effort isn’t really justified for every page, but high traffic pages (like the university homepage) are definitely worth it.
Formatting for speed
As a programmer, I much prefer to maintain nicely formatted code. But when you are after speed, the whitespace has got to go. You can reduce the size of your page significantly. Smaller code size = less bandwidth used = faster load times = win for everyone but the programmer. Removing whitespace is effective on the HTML of the page, stylesheets and JavaScript.
Beyond whitespace
With JavaScript you can optimize even further. Tools such as Google’s Closure-Compiler can not only remove whitespace, but perform some pretty hefty optimizations on your code. For our redesign, Closure-Compiler reduced a 38KB file down to 14KB – and size was only part of the speed benefits it gave.
All zipped and ready
In today’s world, why would you send uncompressed resources? Processing power is cheap – it’s network speeds that still seem to limit us. Text files such as HTML, CSS and JavaScript can easily be compressed on the fly by almost any modern web server – as long as you have the processing power to spare. That 14KB JavaScript file actually gzips down to a measly 5.2KB. That brings our combined savings on that file alone up to nearly 87%!
Compression Resources
Zero is less than something
Of course downloading nothing is always faster. Usage stats show us that we have a high degree of returning visitors to our homepage. By setting some pretty aggressive cache headers, users only have to request new HTML. All of the images, stylesheets and scripts can be loaded from what they got on their last visit.
Cache headers are somewhat confusing and can have unintended side effects. Google has a great article on the relevant cache headers: http://code.google.com/speed/page-speed/docs/caching.html
Tools of the trade
Optimizing your site for loading speed can be a daunting task. There are a few tools that make this easier. My personal favorite is Google Page Speed (an addon for FireBug). In addition to a prioritized list of suggestions, several optimizations can be run within the tool itself such as image optmization and whitespace removal.
This is the second post in a series about the techniques used in the 2010 redesign of the Missouri State homepage. Other posts in the series:
It’s been over a year since the last update of TinyMCE for RedDot CMS. I’ve finally completed work on the next major update and it includes several bug fixes and changes:
- Fixed a major bug in the code cleanup routine. The editor is now much more tightly coupled to the Text Editor Settings in the content class. Permission code additions provided by Jeremy Landes at Penn State University.
- The Spell Checker Plugin has been re-written in .NET 1.1 and 2.0 compatible code so it no longer requires extra setup steps. The plugin is now enabled by default.
- The editor has been tested in CMS 7.5, 9, 10.0 and 10.1. Installation instructions are now provided for each version.
- The distribution now ONLY includes the integration plugin and code. Users will need to download the latest version of TinyMCE separately. Since the integration is now completely contained within the plugin, updating the TinyMCE code can be done separately from plugin releases.