Add any comments or questions regarding the How to Configure the Telerik RAD Editor in DotNetNuke tutorial from Issue 59

Hi,

First off let me say the videos being published have really helped me out.

I went through the tutorial on configuring the RAD editor and was able to create the styles and have them show up in the editor drop down. If I apply one of the styles to some text it changes it to the style that I defined. The problem is that once I hit save and exit the editor window the styles are no longer applied. I went back and looked at the html and the class is definitely being applied. Is it possible that something is overriding these styles once I exit from the editor?

One more thing, I didn't have portal number 0 but portal number 1 is the default portal and this is where I put the new style sheet.

Any help would be appreciated.

As usual, I start at dnncreative to learn anything new with DNN.

Note that the slash in [PortalRoot]/editor.css is wrong.  Took us a couple of hours to find a contradiction in the 4/28/10 DNN forum post on this.  It should be [PortalRoot]editor.css only.

Is there somebody who knows how to modify either this editor or the FCKeditor to work on an iPad. This problem is a major one for me and I'd think others who want to update content using an iPad would also want this to work.

I Googled a bit and found some discussion that the Safari browser in the iPad is lacking some features.  However, it appears that Firefox is available.  You might want to try that and see if it works.

Love the videos! Really, really helpful. Huge thanks.

Question though, and I hope you didn't cover this and I managed to miss it... how does one configure the options in the "FormatBlock" tool? The videos spend time on configuring the "AddClass" options (and very well done, that), but I didn't see anything on configuring its neighbor, where users can change the block tag from the default

to the various heading tags.

I'm hoping to prevent my users from choosing H1 or H2, since those are applied by the skin and all my content headings start at h3.

Any word on this? Is it possible?

Nevermind! Found the answer. For reference, there is a group of tags you can add to the tools config XML file, which I'm sure will get stripped out of this comment but I'll try anyway...

There is no Firefox iPad browser. I've tried several of the browsers available and none handle the rich text editor making DNN updates impossible.

Hi Can somebody point out where I can change the fonts the editor uses to one default font.
Also can I set a defualt style that would set the text to display say in a 500px table.

Hi,

I followed the videos and searched online too, but I cannot make it working to show the styles under the editor's "Apply CSS Class" list.
This is what I did:
- Made a copy of "ConfigDefault.xml" as "CustomConfigDefault.xml" under \wwwroot\Providers\HtmlEditorProviders\Telerik\Config\
- Inserted another line inside the configuration section of above file, which looks like this:
< property name="CssFiles" >[PortalRoot]RadEditor.css< /property > ( I just put some spaces in the tags to make sure it shows up in the forum)
- Created the "RadEditor.css" file under my portal root folder (\wwwroot\Portals\0\), which has a few styles that I want to show in the editor (.SubHead, .SubSubHead)
- Created a copy of the "ToolsDefault.xml" file and named it "CustomToolsDefault.xml"
- This is my classes section from the "CustomToolsDefault.xml" file:
< classes >
< class name="Head" value=".Head" / >
< class name="SubHead" value=".SubHead" / >
< class name="SubSubHead" value=".SubSubHead" / >
< class name="Normal" value=".Normal" / >
< class name="NormalBold" value=".NormalBold" / >
< class name="NormalRed" value=".NormalRed" / >
< / classes >

In the web.config file I have this section:
< htmlEditor defaultProvider="TelerikEditorProvider" >
< providers >
< clear / >
< add name="TelerikEditorProvider" type="DotNetNuke.HtmlEditor.TelerikEditorProvider.EditorProvider, DotNetNuke.HtmlEditor.TelerikEditorProvider" providerPath="~/Providers/HtmlEditorProviders/Telerik/" toolsFile="~/Providers/HtmlEditorProviders/Telerik/Config/CustomToolsDefault.xml" configFile="~/Providers/HtmlEditorProviders/Telerik/Config/CustomConfigDefault.xml" FilterHostExtensions="True" / >
< /providers >
< / htmlEditor >


I restarted the application under Host settings after I tried different settings, but the styles still don't show up in the editor.
Do I need to restart the application, or clear the cache, or just close and reopen the browser? What is needed to take effect?

Can anybody tell me what am I doing wrong?

Thank you very much.
Steven

< property name="CssFiles" >[PortalRoot]RadEditor.css< /property >

Should be

< property name="CssFiles" >[PortalRoot]\RadEditor.css< /property >

You don't have a slash between PortalRoot and your css file. It could be more, that one just stuck out at first glance. And since I just finished these videos, I can attest that the setup is unforgiving.

I would like to have a custom css drop down for each portal. The way the tutorial describes it, I can do this but it is not ideal. I can put in a custom TelerikRadEditor.css in each portal root and use classes in that for the drop down. But I would then have to add the classes to the ToolsCustom.xml file in the Providers/..../config/ directory.

Is there a better way to have a custom ToolsCustom.xml for each portal?

thanks,

Dan

Hi Dan,

Thanks for your answer.
Finally I used slash, not backslash here: < property name="CssFiles" >[PortalRoot]/RadEditor.css< /property > and it works, but not in FireFox, only in Internet Explorer, and usually I used FireFox to troubleshoot styling of my website, because it has the FireBug tool which is very useful.
Is it possible to have it to show under FireFox too? (latest version, 3.6.13)

Dan, have you tried another editor called dnnwerk provider? They say it has better support for multiple sites. I tried that one too, but that showed up lots of styles under "Apply CSS Class" list, it was a huge list. Probably there is a fix for that too.

Steven

What is the best way to manage the styles, to show the same styles in the Telerik Editor and the page skin?
I am defining those styles on the RadEditor.css file for the editor, but when I finished editing, I realize that the page shows different styles, because I have some styles defined in the skin (skin_name.css) which are not matching.
So do we need to define the exact same styles in bothe places or is it a better solution to pull it from the same place?

Thanks,
Steven

Some update:
I added more styles and they showed up in FireFox. I had before 2 styles in 1 line (ex: .SubHead, .SubSubHead { ... }) which didn't show up, but after I separated them to individual definitions it showed under FireFox too.

I still don't get it, what do I need to do after I added some styles in the RadEditor.css file and ToolsDefault.xml file to show up the style under the "Apply CSS Class" list?
- I refreshed the page - no luck
- I restarted the application under host - no luck
- Finally I deleted browsing history (temp files and cookies) - I had to log in again, and the style appeared.

So if I log out and log in again, will the style appear?
What is the best way to manage the styles to apply for both the live page and inside the editor?

Thank you,
Steven

Steven - I've found that Firefox sometimes really wants to hold on to its cache and so it appears no change has been made. That can lead to some frustration! You can hit control-F5 to force a refresh of the page or go into Tools - Options - Privacy and clear the cache. You do not need to clear the cookies or saved passwords.

I figured out how to customize the editor for each portal. The default path for the tools file in web.config is (note that I changed the default name to ToolsCustom.xml:

toolsFile="~/Providers/HtmlEditorProviders/Telerik/Config/ToolsCustom.xml"


This property will accept a *PortalRoot* token so each portal can have its own version of the tools.xml file -

toolsFile="*PortalRoot*/ToolsCustom.xml"

Will make it look for the .xml file in your portal root.

The same thing can be done for the ConfigFile.

See http://www.telerik.com/support/kb/a...-ajax.aspx for all the options when editing the web.config file for the Telerik editor.

EDIT: I just implemented this and figured out the Telerik documentation was not correct. The PortalRoot should be enclosed in brackets instead of *'s in the web.config file. Like: [PortalRoot]/ToolsCustom.xml. This worked for my system with many portals. I'm sending Telerik a note so hopefully they can fix their docs.

How do I configure my .css file to reference proper class for my image with a caption?

My current class looks like this:
.imagerightsidecaption {
font-size: 85%;
font-style: italic;
float: right;
margin-right: 15px;
margin-bottom: 15px;
}

.imagerightsidecaption img {
border: 5px solid #CCC;
margin-bottom: 5px;
}

The original html code looks like this:

[div class="imagerightsidecaption"][img alt="This is a logo" src="http://www.dnncreative.com/DNN/Portals/0/logo.gif" /]
This is a test[/div]
Cras fringilla, odio eget ultricies ultrices; eros nisl egestas nisl, et mollis magna libero eget nulla. Suspendisse potenti. Suspendisse sem purus, cursus ac malesuada in, vestibulum eget velit. Praesent facilisis nisl non velit venenatis quis porta nulla adipiscing. Curabitur vitae interdum metus. Mauris lacinia bibendum malesuada. Fusce enim metus, ornare at convallis sagittis; pulvinar eu diam.


But when I define the .imagerightsidecaption class in for the telerik editor which references my custom .css file, I get this:

[img class="imagerightsidecaption" alt="This is a logo" src="http://www.dnncreative.com/DNN/Portals/0/logo.gif" /]Cras fringilla, odio eget ultricies ultrices; eros nisl egestas nisl, et mollis magna libero eget nulla. Suspendisse potenti. Suspendisse sem purus, cursus ac malesuada in, vestibulum eget velit. Praesent facilisis nisl non velit venenatis quis porta nulla adipiscing. Curabitur vitae interdum metus. Mauris lacinia bibendum malesuada. Fusce enim metus, ornare at convallis sagittis; pulvinar eu diam.


Somehow, I lost my border around the image and I cant seem to add a description underneath the image? I can do it manually by going to the HTML code behind, but I dont want my casual USER who will be using this editor to do that. Is this possible?

Thoughts?
Chuck

Hello,
I went through the tutorial on configuring the RAD editor and was able to create the styles and have them show up in the editor drop down. If I apply one of the styles to some text it changes it to the style that I defined. The problem is that once I hit save and exit the editor window the styles are no longer applied. I went back and looked at the html and the class is definitely being applied. Is it possible that something is overriding these styles once I exit from the editor?

Another issue I'm having is I can't seem to get rid of some of the tool bars. I believe I have files linked correctly. I'm using DNN6.3.1

This is really doing my head in. Can anyone pls help? I tried the / and \ for the PortalRoot and still can't get the tool bars to be removed and the content not saving the class styles. Please help. Thanks

Hi, DNN 6 introduced the Host > HTML Editor Manager which enables you to configure the editor and toolbar. Not sure if it can do all you're trying to do but it should certainly sort out your toolbar, check it out. Note there are two tabs at the top, one for Editor Configuration, one for Toolbar Configuration. Hope that helps!

This is a terrific tutorial for telerik under DNN 5.x

It looks like everything has been turned up side down in 6.x

Specifically, does anyone know how to add/edit CSS Style Definitions for the
Telerik Table Wizard: Table Properties: CSS Class Layout drop down box?

Table styles for telerik-re Table-1 - telerik-re Table-5 are included, but I cannot find where these entries are
defined. I've scoured DNN 6.x files and Google . . . Nothing.

I understand this used to be done via the TableLayoutCssFile.css, as referenced in this link:

http://demos.telerik.com/aspnet-aja...ultcs.aspx

But this no longer seems to be in play.

Any help is appreciated!

-Shawn C.

In 6.x there is a Host page that you can use to manage and configure editor properties. You might want to start there. It should be easier to use, too.

Thank you Pingle2009.

I have been through the Host: HTML Editor Manager with a fine tooth comb.
There is no section for modifying the styles available in the Table Wizard: Table Properties: CSS Class Layout drop down box selections.

If this can be modified, it must be done in some configuration file. I just cannot find it.

Thank you,
Shawn C.

It may be worthwhile asking the question on the forums over at dotnetnuke.com.

This is just what I want to do. Did you find a solution?

Can you give a few more details about the issue you are having?