Skip to content

Modifying RadEditor’s Table Wizard

May 27, 2010

The next step I took in bending RadEditor to my liking was modifying the Table Wizard, the built-in tool for inserting tables. The first thing I wanted to do was hide the entire Layout fieldset in the Table Properties tab. This wasn’t very hard. All you have to do is search for document.write(localization["Layout"]);, find the <tr> it’s contained in (line 373 for me), and add style="visibility: hidden" to that tag. It’s important not to use display:none because that will mess up the layout of the dialog; visibility:hidden makes that box invisible, but it still takes up the same amount of space so things display correctly.

My next task for the Table Properties tab was defining custom CSS classes for users to choose. This is explained in a Telerik forum post, and it’s not too hard. First, make a CSS file with all of the classes you want users to be able to choose from. I named it tablelayoutcss.css and put it in my \Resources\ folder. Then, open ConfigFile.xml and add the following code anywhere in between the <configuration> tags:

<property name="TableLayoutCssFile">/_wpresources/RadEditorSharePoint/5.x.x.x__1f131a624888eeed/Resources/tablelayoutcss.css</property>

Change that path and filename to whatever your CSS file is, of course. If you did this correctly, the CSS Class Layout drop-down should now contain your custom CSS classes!

My final change on that tab was setting display:none to the <div> around document.write(localization["ApplySpecialFormatsTo"]); and to the <table> around those special format options because they don’t apply to my custom CSS classes.

Next, I wanted to hide some options from the Cell Properties tab. This is a pretty similar process to hiding options from the Image Manager’s Properties tab. Looking through CellProperties.ascx, search for the option you want to hide (no spaces because it’s going to be in the format document.write(localization["ContentAlignment"]);) and add style="display: none" to the <tr> that contains it.

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: