SPRadEditor Styling

[Andy]

Hi Telerik,

I am using a license Telerik RadControls for SharePoint Q1 2012, v. 12.1.216.0.
My questions are below.

1. How do I apply a default styling for table? What I expect is to add a table, and it will be populated with the default class. Is this achiavable?

2. I have the below control and styling, and I want the user experience that we can just click, then the <a class=".."><span class="button-inner"> will be populated for me. Can you advice a better way to achieve this?

<a class="button"><span class="button-inner">Button</span></a>

3. I have a duplicated entry in "Apply CSS Style", and the "Dropdown List" is not listed. Please advice.
    Here is my classes in ToolsFile.xml. And please look at the attached screenshot ApplyCSSStyle.jpg.
    

<classes>

   <class name="Clear Class" value="" />

   <class name="Dropdown List" value="dl.list" />

   <class name="Ordered List" value="ol.list" />

   <class name="Ordered List (Steps)" value="ol.steps" />

   <class name="Unordered List" value="ul.list" />

</classes>

This is the CSS

ul.list,
ol.list { margin-left: 1.5em; }
ul.list li,
ol.list li { margin-bottom: 0.5em; }
ul.list { list-style-type: disc; }
ol.list { list-style-type: decimal; }
ol.list ol.list { list-style-type: lower-alpha; }
dl.list dt { background: url(images/bullet.png) 0 7px no-repeat; padding-left: 10px; font-weight: bold; }
dl.list dd { padding-left: 10px; margin-bottom: 1em; }

ol.steps {
    list-style-type: none;
    }
ol.steps li { padding-left: 55px; margin-bottom: 0.5em; }
ol.steps li:nth-child(1) { background: url(images/olsteps-1.gif) 0 0 no-repeat; }
ol.steps li:nth-child(2) { background: url(images/olsteps-2.gif) 0 0 no-repeat; }
ol.steps li:nth-child(3) { background: url(images/olsteps-3.gif) 0 0 no-repeat; }
ol.steps li:nth-child(4) { background: url(images/olsteps-4.gif) 0 0 no-repeat; }
ol.steps li:nth-child(5) { background: url(images/olsteps-5.gif) 0 0 no-repeat; }
ol.steps li:nth-child(6) { background: url(images/olsteps-6.gif) 0 0 no-repeat; }
ol.steps li:nth-child(7) { background: url(images/olsteps-7.gif) 0 0 no-repeat; }
ol.steps li:nth-child(8) { background: url(images/olsteps-8.gif) 0 0 no-repeat; }
ol.steps li:nth-child(9) { background: url(images/olsteps-9.gif) 0 0 no-repeat; }
ol.steps li:nth-child(10) { background: url(images/olsteps-10.gif) 0 0 no-repeat; }
ol.steps li:nth-child(11) { background: url(images/olsteps-11.gif) 0 0 no-repeat; }
ol.steps li:nth-child(12) { background: url(images/olsteps-12.gif) 0 0 no-repeat; }

#navbar ul.list,
#content-list ul.list { margin: 0; list-style-type: none; }
#navbar ul.list li,
#content-list ul.list li { background: url(images/bullet.png) 0 7px no-repeat; margin: 0; padding-left: 10px; } 

[Rumen]

Hi,

1) You can attach to the OnClientPasteHtml event and modify the inserted table as per your requirements. You can see how to execute custom code in the RadEditor for SharePoint events in this article: Using RadEditor's Client-Side events in SharePoint 2010.

2) If I understand you correctly, you want to insert the following markup in RadEditor:

<a class="button"><span class="button-inner">Button</span></a>

for example using a custom button. If this is your case, you can see how to create and add a custom button in the following help article: Add Custom Buttons.

If your scenario is other, please provide more information along with screenshots of the desired functionality.

3) The Apply Class dropdown can list only .class (.list) classes but not global classes such as dl.list dt and dl.list dd (dt and dd are a global classes).

You have a couple of ol.list and ul.list declarations that is why they are populated multiple times in the dropdown.

Kind regards,
Rumen
the Telerik team

[Andy]

Hi Rumen,

Thank you for the reply. I have been working on other stuffs, so haven't got a chance to reply your post. But now, the priority is back to the Telerik styling...

2) Can you show me a way to add the "button" class into the function please?

<a class="button"><span class="button-inner">Button</span></a>

Telerik.Web.UI.Editor.CommandList["CustomCommand1"] = function (commandName, editor, args)
{
    alert("Custom command 1");
    //for example you can apply bold formatting by firing the editor.fire("Bold");
};

Is there anyway to add a custom JS file from ToolsFile.xml (the same way we add CSS file through <cssFiles>)?

Thank you.

[Rumen]

Hi,

What do you expect to happen when pressing the custom button? Please, explain your scenario in more details and provide an example.

No, it is not possible to add JavaScript code to the ToolsFile.xml file.

Best regards,
Rumen
the Telerik team

[Andy]

Hi Rumen,

What I meant was, we will have a custom button in the toolbar... And when we press that custom button, it will add the below exact code into the SPRadEditor.
 

<a class="button"><span class="button-inner">Button</span></a>

I understand from your previous guidance is, the custom button's action will be handled at the below code. Can you give me an example of the code / tutorial of how to achieve the above requirement, please?

Telerik.Web.UI.Editor.CommandList["CustomCommand1"] = function (commandName, editor, args)
{
    alert("Custom command 1");
    //for example you can apply bold formatting by firing the editor.fire("Bold");
};

Thank you Rumen :)

[Rumen]

Hello,

You can use the editor.pasteHtml() method to paste the desired HTML content in RadEditor. You can put this method in the CommandList command of the custom button which will be fired when the button is clicked by the user:

Telerik.Web.UI.Editor.CommandList["YourCustomButtonName"] = function (commandName, editor, args)
{
   editor.pasteHtml("<a class='button'><span class='button-inner'>Button</span></a>");
};

In SharePoint 2010 sites, the above script should be added to the end of the Program Files\Common Files\Microsoft Shared\Web Server Extensions\wpresources\RadEditorSharePoint\6.x.x.0__1f131a624888eeed\Resources\SPEditorTools.js file and the custom button tag to the ToolsFile.xml and ListToolsFile.xml files located in the same folder:

<tool name="YourCustomButtonName" />


All the best,
Rumen
the Telerik team

[Andy]

Thank you Rumen for being so helpful :)