CKEditor Distinguish Modx Tags! (quick tutorial)

Hi, thought I'd share a little workaround that has made my MODX life a bit easier. Ever wanted to keep MODX tags in CKEditor as 'read-only' so that people who don't know what they are can't easily change them (often by accident). This also allows you to move the tags around freely as independent object, and finally, the coolest bit is that it allows you to edit the tags through a neat dialog box.

I've attached an Image so that you can see what I am talking about.

Instructions

Backup your CKEditor addon folder! 'manager\assets\components\ckeditor'

Step 1.

Go to CKEditor website, and download latest CKEditor version (4.3 at this time), it will be a zip file, you need to extract these files into your CKEditor folder:
(this update is necessary because the widget app only works with version 4.3)

ckeditor.js
styles.js
contents.css
lang (folder)
adapters (folder)

Extract these filders to your CKEditor folder and overwrite the existing files.

Step 2.

Download and Extract the following plugins from the CKEditor website:

Widget (http://ckeditor.com/addon/widget)
Lineutils (http://ckeditor.com/addon/lineutils)
Placeholder (http://ckeditor.com/addon/placeholder)

And extract them into your plugins folder

Step 3.
In your System Settings, find CKEditor options and add in the plugins so that MODX starts them up with CKEditor

widget,placeholder

That's it, now your modx tags will be treated as read-only blocks that can be editied from a dialog box.

Hope folks find it useful, I know its a really crude workaround but its pretty cool--it would be nice if the CKEditor addon had this sort of thing built in to it, to accommodate for MODX Tags/Syntax

Peace

That was interesting. After replacing the ckeditor files and directories, every Manager panel except the resource editing panels are blank, and all you get for the resource editing panel is bits of the TV tab. Disable the ckeditor plugin and all is well. Thank goodness for the Tree's context menu!

looool, that's disappointing--I've really just recounted all the steps I took to achieve it and its working fine. I should add that I am using Revo version 2.2.9 currently--if that has any bearing. I'm also using Firefox as browser. I only overrode these files/folders: ckeditor.js,styles.js,contents.css,lang (folder),adapters (folder). Everything else was left untouched as I feared it may interfere with how CKEditor was ported into Modx.

lol hope it helps, clearly your mileage has definitely varied from mine..

FF/Mac and Revo 2.2.12 I was very careful to follow your instructions exactly, tried it three times. No errors at all anywhere. Checking with Firebug, the content of the right panel (except for parts of the TV tab) simply isn't there. Of course, with all the crap ExtJS piles on, it's kind of hard to tell what should be there and what isn't. It looks like most of the ExtJS structure is in place, just none of the content.

Which version of ckeditor did you download? There are three offered, plus the option of configuring your own.