SPRadEditor Styling

7 posts, 0 answers
  1. Andy
    Andy avatar
    4 posts
    Member since:
    Dec 2011

    Posted 02 May 2012 Link to this post

    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; } 

  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 07 May 2012 Link to this post

    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.

  3. Andy
    Andy avatar
    4 posts
    Member since:
    Dec 2011

    Posted 28 May 2012 Link to this post

    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.

  4. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 30 May 2012 Link to this post

    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.
  5. Andy
    Andy avatar
    4 posts
    Member since:
    Dec 2011

    Posted 30 May 2012 Link to this post

    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 :)
  6. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 04 Jun 2012 Link to this post

    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.
  7. Andy
    Andy avatar
    4 posts
    Member since:
    Dec 2011

    Posted 05 Jun 2012 Link to this post

    Thank you Rumen for being so helpful :)
Back to Top