[Solved] Changing Color at Preview?

[RJ]

Hi, its my first time to use Radeditor. I was just wondering if I can change some text color during preview mode using some of my custom tool.
Heres the situation. Text are already created by other user and the only modification that this page will do, is to do some text highlight and color change. If they are going to do this in design mode they can alter the text by adding and removing some. So I just wanted to make the changes in preview mode only or maybe a readonly but when they do some text hightlight and clicking my custom button it will update the preview... Is there a way that this can be done? Any inputs would be very much appreciated.

Im using ASP.NET AJAX Q1 2009

Thanks in advance,
RJ

[Rumen]

Hi RJ,

The following help article could be helpful for your scenario:

Applying external stylesheet to the content of RadEditor in Preview mode.



Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[RJ]

Hi Rumen,
I've cheked the sample but seem like its not suited to my requirements. I just wanted to set background to the text that I selected by clicking on my custom tool.. like for instance I got custom tool or button that is red, blue and green. When I select some text and click on button red, that text will have a background of red...

Is custom tool can be enabled even on preview mode?
if not. Can I add a button that will trigger to format my selected text to change background color?

What is the command for changing background color that I select?
I found some command for fontsize and color only.. how about the background..

 

 Telerik.Web.UI.Editor.CommandList["ApplySizeColor"] = function(commandName, editor, args)
            {
                 if (editor.getSelectionHtml() != "")
                 {
                     editor.fire("FontSize", {value : "4"}); //fire the FontSize command
                     editor.fire("ForeColor", {value : "red"}); //fire the ForeColor command

                 }
                 else
                 {
                    alert("Please, select some text!");
                    args.set_cancel(true);
                 }
            };

 Hope you could answer my question. Thanks in advance.

[Rumen]

Hi RJ,

Here is the requested code solution, but please note that it works only in Internet Explorer:

<Telerik:RadEditor runat="server" OnClientLoad="OnClientLoad" ID="RadEditor1">
    <Tools>
        <Telerik:EditorToolGroup>
            <Telerik:EditorTool Name="MyTool" />
        </Telerik:EditorToolGroup>
    </Tools>
</Telerik:RadEditor>

<script type="text/javascript">
function OnClientLoad(editor, args)
{
editor.add_modeChange(function(sender, args)
{
   var mode = sender.get_mode();
   switch (mode)
   {
      case 1:
       //alert( "We are in Design mode");
       //do something
       break;
      case 2:
       //do something
       break;
      case 4:
       var tool = editor.getToolByName("MyTool");
       tool.setState(0);
       break;
  }
});
}

Telerik.Web.UI.Editor.CommandList["MyTool"]  = function(commandName, editor, args)
{
if (editor.getSelectionHtml() != "")
 {
     editor.fire("FontSize", {value : "4"}); //fire the FontSize command
     editor.fire("ForeColor", {value : "red"}); //fire the ForeColor command
     editor.fire("BackColor", {value : "yellow"}); //fire the BackColor command

 }
 else
 {
    alert("Please, select some text!");
    args.set_cancel(true);
 }
};
</script>

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[RJ]

Thank you very much Rumen it works like a charm.