Web Strategy and Development Blog

TinyMCE in RedDot – The New Experience

by

After getting pulled in different directions for a while, I was able to come back and work on TinyMCE. I upgraded the integration to pull the permissions for the text element via an AJAX call which was one of the last major hurdles to supporting in-line editing (see https://blogs.missouristate.edu/web/2008/11/03/tinymce-part-deux/).

The other hurdle was what to do when the element being edited was on the far right side of the page. The toolbar hanging off the right side wasn’t exactly the user experience I had in mind. I found some additional TinyMCE configuration options which let me size and position the toolbar independently of the editor area. So the final solution ended up using JavaScript to detect if the toolbar would fit, and if not have it shift left on the page.

TinyMCE Part Deux

by

This is a follow-up to a post I wrote a couple of weeks ago. You can catch up at https://blogs.missouristate.edu/web/2008/10/24/the-end-of-an-editor-as-we-know-it/

Two weeks into the project, I’ve got linking and images integrated with the asset manager. After a couple of frustrating tries, I took a radically new approach to Edit via Form and it’s working charmingly (in IE and FireFox). We’ve begun testing in earnest and anticipate rolling out the editor live soon.

But probably the coolest achievement to date was this:
httpv://www.youtube.com/watch?v=0WCzXwSNHq8
At this point, this functionality is simply a proof of concept. However, I’m working on finishing it up and we plan to implement editing this way in all of our projects. This integration only required a very minor tweak to our template (I added a span tag and an id). There is no RQL magic involved in invoking the editor.

The End of an Editor as We Know It?

by

I really do feel fine:-)

Wednesday my frustration with the FCKEditor in RedDot CMS hit an all time high. I realized that the majority of the fixes I was working on had nothing to do with RedDot and had more to do with core editor functionality. So I took off on a wild run around internet sites to see what editors people were talking about and I found 3 that met my criteria (cross platform, not java):

  1. FCKEditor
  2. CuteEditor by CuteSoft
  3. TinyMCE

CuteEditor is a commercial product which has a small licensing fee. I’m not opposed to paying for an editor, but I wouldn’t have access to the source code. This makes me a little nervous about adding my own extensions for the CMS integration.

TinyMCE is a javascript editor that was free and open source – now we’re talking. A few tests on their online demo had me convinced (like an actually functional paste from Word and self-closing tags -OMG). So I dove into an area I’ve not ventured before – integrating a new editor from scratch.

From the start, I wanted to minimize the impact on RedDot code to ease deployment and upgrade headaches. With the FCKEditor, saving posts form data to a RedDot CMS page which does some processing then executes the RQL to save the element. This makes changes like saving without closing the window difficult (putting it mildly). For this project, I took a different route. I placed a hidden iframe on the page with it’s own form that does the saving duties all on it’s own – including the RedDot processing (mainly for [ioRD] code replacements). Voilla! Ajax style saves.

As of right now, I can open and save content. There is no asset manager integration, or custom styling yet. Even so though, for the first time in a year, I’m excited about working on the editor again.

Introduction to RQL

by

Since I’ve already had requests, I thought I’d post a summary of my workshop from HighEdWeb 08 along with the materials for those who couldn’t be there. From the packed house and all the followup questions, it’s pretty clear that there is a high degree of interest in this subject.

About RQL

RQL is an XML based language. Queries are submitted to the server and are answered with an RQL response (similar to HTTP requests). IODATA is always the root tag. Tag names are always uppercase while attribute names are always lowercase.

Moving around the project tree is one of the most fundemental activities in RQL. When moving through the tree, you must always keep in mind that you alternate between pages and links. While we are all pretty familiar with a page, a link inculdes dynamic anchors, lists, containers, hdllists, etc.

Using RQL in SmartEdit

While Pre-Execute blocks may at first seem the logical place to use RQL in SmartEdit, they contain no session information. This means that RQL Queries inside a pre-execute block must log in and log out in addition to running the desired queries.

Using an iframe or ajax will preserve session information and make debugging substantially easier, but can inadvertendly cause security risks.

Using RQL from an External Application

If you’ve ever wanted to perform an action starting at a tree node and all following pages, this is the place to look. Moving around the tree can be dangerous. You must make sure that you properly account for references, multiple connections, recursive connections, containers as well as other issues.

The C# project contained in the handout provides both an RQL Function Library as well as the framework for safely traversing the tree from a console application.

Related Materials

Introduction to RQL Handout

Here’s a short listing and description of what’s included:

  • Presentation
  • RQL Admin Website: an ASP.Net 2.0 web application. Designed to be published on the CMS web server it allows users to test RQL Queries.
  • RQLAutomation Project: a ASP.Net 2.0 C# Console application. The application will prompt for login credentials, a project, and then perform the specified action on the specified page and all following pages. (In class we submitted and released the page).
  • Other Goodies: A collection of various SmartEdit/SmartTree RQL Plugins and associated files (including a basic RQLFunctions.asp include file).