Customized ForeColour Picker

4 posts, 0 answers
  1. Kiran
    Kiran avatar
    4 posts
    Member since:
    Aug 2011

    Posted 19 Nov 2012 Link to this post

    I'm using a RadColorPicker replacing the standard ForeColor tool in RadEditor.


    I have the following script added for the ForeColor Command to apply the selected colour to the text in the Editor. But the following script applies the selected colour to the entire content of the editor. How can I change this  to apply the selected colour only to the selected text in the editor?

     

     

    <script type="text/javascript">

     

    RadEditorCommandList[

     

    "ForeColor"] = function(commandName, editor, oTool) {

     try

     

    if (editor.getSelectionHtml() != "") {  

     

         var style = editor.get_contentArea().style;
        style.color = oTool.value; 

        if (ajaxManager == null

                ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

      

        if (ajaxManager != null)

                 ajaxManager.ajaxRequest(commandName);

        }

     

    else

        alert("Please, select some text!");  

        args.set_cancel(true);  

        }

    catch (err)

    { }

    }

     

     

  2. Rumen
    Admin
    Rumen avatar
    14084 posts

    Posted 20 Nov 2012 Link to this post

    Hello,

    The OnClientLoad event is executed only when the editor is loaded on the page. You need to attach to the OnClientCommandExecuting which is fired when some command is executed. See this forum thread for more information: Add Custom Color.

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

    Posted 20 Nov 2012 Link to this post

    I actually went through  Add Custom Color thread and again modified my code. So now I'm not using any RadColorPicker.

    I'm using the ForeColor tool in Radeditor. What I want to achieve is to display the ForeColorDialog on selecting Add Custom Color link in ForeColor tool and to save that custom colour for the particular user to database. 

    I'm having 2 issues here.

    (1) When I add the new Add Custom Color button to the ForeColor tool, it shows the existing Add Custom Color.. link as well. So how do I have only the new Add Custom Color button in the ForeColor tool.

    (2) When I select a color from the ForeColor picker, how do I apply the color to the selected text only? Since in my ForeColor command handler, I apply the font color to editor.get_contentArea().style I'm
    not able to apply the selected colour only to the selected text. It always apply the selected colour to the entire text at the moment. But the ForeColor command script is getting executed each time a colour is selected from the ForeColor tool. Could you please let me know a fix?

    Thanks a lot.

     

     

      
    Below is my code in the RadEditor  aspx Web page.

     

    <head runat="server">  

    <title>Untitled Page</title> 


    <
    script type="text/javascript">  

    function changeImageManager(editor, args) {

     

        if(args.get_commandName() == "ImageManager") { 

     

        var callbackFunction = function(sender, args) {

        var result = args.get_value(); //get returned value of ImageManager which is IMG element

         result = Telerik.Web.UI.Editor.Utils.getOuterHtml(result); //get HTML source of the DOM element

         var firstIndex = result.indexOf("/")  

        var dd = result.substring(0, firstIndex); 

        //new code  

        var passTxt = document.all("passTxt").value; 

        var lastIndexOfSlash = passTxt.lastIndexOf("/");  

        var secondIndexOfSlash = passTxt.substring(0, lastIndexOfSlash).lastIndexOf("/"); 

        var rootFileFolderName = passTxt.substring(secondIndexOfSlash + 1, lastIndexOfSlash);  

        var charIndex = result.lastIndexOf(rootFileFolderName + "/"); 

        var filename1 = result.substring(charIndex + rootFileFolderName.length + 1);

         result = dd + document.all(

    "passTxt").value + filename1; 

        editor.pasteHtml(result,

    "ImageManager"); 

        };

    args.set_callbackFunction(callbackFunction);

    //register callback function

    </script> 

    </head>  

    <body>  

    <form id="form1" runat="server"

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"> 

    </telerik:RadAjaxManager>

    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"

     ToolsFile="~/Tools/ToolsFile.xml" Width="100%" Height="645"

     OnClientCommandExecuting="changeImageManager"   

    ContentFilters="RemoveScripts, FixUlBoldItalic, FixEnclosingP, IECleanAnchors, MozEmStrong, ConvertFontToSpan, IndentHTMLContent, EncodeScripts, OptimizeSpans, ConvertCharactersToEntities"> 

    <Content>  

    </Content>  

    </telerik:RadEditor>

     

    <asp:HiddenField ID="HFTempValueHolder" runat="server" />

     

    <script type="text/javascript">  

    var ajaxManager = null;

     

    RadEditorCommandList["ForeColor"] = function(commandName, editor, oTool) {   

    try

     

    if (editor.getSelectionHtml() != "") { 

    var style = editor.get_contentArea().style;    //editor.getSelectionHtml().style;

     style.color = oTool.value;

     if (ajaxManager == null)

     ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");  

    document.getElementById('HFTempValueHolder').value = oTool.value;  

     

    if (ajaxManager != null)

     ajaxManager.ajaxRequest(commandName);

    else {

    alert(

    "Please, select some text!");

    args.set_cancel(

    true);

     

    }

    }

     

    catch (err)

     

    { }

    }

     

    function OnClientLoad(editor) { 

     

    var tool = editor.getToolByName("ForeColor"); 

     

    //Add the button to the color picker

    tool.old_renderFooter = tool.renderFooter;

    tool.renderFooter =

    function() { 

    this.old_renderFooter();  

    //Create a button and add it to the tool

     var button = document.createElement("button");

     button.innerHTML = "Add custom color..";  

    button.onclick = showColorDialog; 

    this.get_popupElement().appendChild(button); 

    }

     

    function showColorDialog() { 

    var myCallbackFunction = function(sender, color) {  

    var colors = tool.get_items(); 

    //If no colors are set get the colors from the editor

     

    if (colors.length == 0) {

    colors = editor.get_colors();

    }

    colors[colors.length] = color;

    tool.set_items(colors);

     

    //Set the color to the current selection

     editor.get_document().execCommand(

    "ForeColor", false, color);

    }

     

    //Hide the color picker

     tool.hide();

     

    //Show the Custom Color dialog

     editor.showExternalDialog( 

    'ForeColorDialog.aspx'

    null,  

    600,

    400,

    myCallbackFunction, 

    null

    'ForeColor',  

    true,

    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move, 

    false

    false);  

    </script>

     
     Below is my code in the aspx.cs file to save the custom color for the user.
     

    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

    try

    {

    if 

    (e.Argument == "ForeColor")

     { 

    string selForecolour = HFTempValueHolder.Value; 

    //saved the new colour to database  

    //read them on page load and save in tools file before tools file is being used for the specific user

     XmlDocument doc = new XmlDocument();  

     string toolsFileName = Page.Server.MapPath(RadEditor1.ToolsFile);  

    bool isColourAvaialble = false;

    doc.Load(toolsFileName);

     

    // Get a list of nodes whose name is color 

    XmlNodeList lstTitles = doc.GetElementsByTagName("color");

     foreach (XmlNode node in lstTitles)  

    XmlElement customSettings = (XmlElement)node; 

    string colour = customSettings.GetAttribute("value");

    if (colour == selForecolour)

    {

    isColourAvaialble = true;   

    break;

    }

    }

     

    if (!isColourAvaialble)

    //saved the new colour to database

      

    if (HFUserID.Value!=null && HFUserID.Value.Trim() != "" )

    int UserID = int.Parse(HFUserID.Value.Trim()); 

    SaveColour(UserID,selForecolour);

     }

    }

      

    HFTempValueHolder.Value =

    "";

     

    }

    }

    catch (Exception ex)  

    string message = "Error on saving to DB:" + ex.Message;

     string script = "alert('" + message + "')";  

    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", script, true);

    }

    }

  4. Rumen
    Admin
    Rumen avatar
    14084 posts

    Posted 23 Nov 2012 Link to this post

    Hi,

    1) This is a custom solution and it is up to the developer to decide how to save the custom color to the desired location.
    2) You shouldn't execute var style = editor.get_contentArea().style; style.color = oTool.value; because it updates only the content area of RadEditor, but not the selected content. You should fire editor.fire("ForeColor", { value: color }); which will execute the default ForeColor command of RadEditor.

     Another options is to fire
    editor.get_document().execCommand("ForeColor", false, color);

    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.
Back to Top