This is a migrated thread and some comments may be shown as answers.

SPRadEditor Styling

6 Answers 96 Views
Sharepoint Integration
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 02 May 2012, 03:55 PM
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; } 

6 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 07 May 2012, 12:27 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Andy
Top achievements
Rank 1
answered on 28 May 2012, 11:30 AM

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.

0
Rumen
Telerik team
answered on 30 May 2012, 03:58 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Andy
Top achievements
Rank 1
answered on 31 May 2012, 03:21 AM
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 :)
0
Rumen
Telerik team
answered on 04 Jun 2012, 03:16 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Andy
Top achievements
Rank 1
answered on 05 Jun 2012, 08:59 AM
Thank you Rumen for being so helpful :)
Tags
Sharepoint Integration
Asked by
Andy
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Andy
Top achievements
Rank 1
Share this question
or