Add Custom Color

47 posts, 0 answers
  1. Sasha Shevelev
    Sasha Shevelev avatar
    9 posts
    Member since:
    Apr 2004

    Posted 21 Jul 2008 Link to this post

    Hi,

    What happened to the "Add Custom Color" feature on the ForeColour tool?
    Has it been removed from editor for good?

    Thanks,
    Sasha
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 21 Jul 2008 Link to this post

    Hi Sasha,

    RadEditor for ASP.NET AJAX uses our RadColorPicker control which currently does not feature the Add Custom / HEX Color features.

    Nevertheless, you can write your own mechanism for adding new colors based on the Add method of the Colors collection of RadEditor.

    All the best,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sasha Shevelev
    Sasha Shevelev avatar
    9 posts
    Member since:
    Apr 2004

    Posted 21 Jul 2008 Link to this post

    Thanks Rumen,

    Are you planning to add this feature back or has it been pulled off the Editor for good?

    Thanks,
    Sasha.
  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 21 Jul 2008 Link to this post

    Hi Sasha,

    We do not have any plans to bring this option back in the new editor, because we want to keep the editor as simple as possible. However, we plan to integrate RadSlider in the editor's colorpicker which will allow the end user to select unlimited colors (similarly to Photoshop).

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Jeff Van Dyk
    Jeff Van Dyk avatar
    12 posts
    Member since:
    Oct 2012

    Posted 08 Aug 2008 Link to this post

    For what it's worth, I would like to vote for this option to be added back to the color picker on the editor.  We quite often need to match the colors that are used in the design of a website and selecting them using a slider is tedious and error prone.
  7. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 11 Aug 2008 Link to this post

    Hi Jeff,

    Thank you for your feedback. I logged it in our ToDo list and if we receive more requests about adding the "Add custom color" feature, we will reconsider our position.


    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Laird Rixford
    Laird Rixford avatar
    5 posts
    Member since:
    Aug 2005

    Posted 18 Sep 2008 Link to this post

    This is a required feature.  It is disappointing that after years of having the feature it was removed.  Going forward in reverse. 

    I vote that this feature is reintroduced as soon as possible.  Thank you.

    Laird Rixford
    Insurance Technologies Corporation
  9. Darchele
    Darchele avatar
    1 posts
    Member since:
    Sep 2006

    Posted 23 Sep 2008 Link to this post

    Rumen,

    I would like to add my vote to have the hex color option returned to the editor.  My users are very unhappy about this.

    Thanks
  10. Carlos
    Carlos avatar
    1 posts
    Member since:
    Jan 2008

    Posted 24 Sep 2008 Link to this post

    I also would like to add my vote to have the hex color option returned to the editor.

    Thank you,

    CS
  11. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 25 Sep 2008 Link to this post

    Hi guys,

    Please, find attached a sample working example which demonstrates how to integrate the requested "Add Custom Color" feature in the built-in ForeColor dropdown of RadEditor. You can use the solution as a base and you can further enhance it.

    Here is a screenshot of the "Add Custom Color" feature:


    Here is some additional information on the subject: The current implementation is based on Yahoo ColorPicker. We plan to add the missing "Add Custom Colors" feature to our RadColorPicker for ASP.NET AJAX control and after that we will provide an integration example for RadEditor and RadColorPicker.

    We are currently unable to provide an estimate when this feature will be added to RadColorPicker but we are determined to implement it since we believe it will increase the usability of the control.


    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  12. Simon
    Simon avatar
    9 posts
    Member since:
    Jan 2008

    Posted 28 Nov 2008 Link to this post

    Ramen

    Thanks for this, works fine if you have the ToolbarMode set to Default, however my client has requested that we use a floating toolbar. However I am unable to get a reference to the tool until the user has clicked the ToggleFloatingToolbar button. This also unfortunately doesn't fire off an event so that I can run the procedure at that point.

    Is there any way I can use getToolByName when the floating toolbar is hidden?

    Cheers

    Simon
  13. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 01 Dec 2008 Link to this post

    Hello Simon,

    The ToolbarModes use a RadWindow object, and you could take advantage of this fact by hooking into one the RadWindow standard events  - OnClientShow (or rather its clientside version - add_show), e.g.

    function OnClientLoad(editor, args)
    {
         //Get a reference to the toolbar's RadWindow
        var wnd = editor.get_toolAdapter().get_window();
        wnd.add_show(function()
        {
            //Do something here, just before the tools get shown
        });
    }

    Best regards,
    Tervel
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  14. Emily
    Emily avatar
    9 posts
    Member since:
    Sep 2008

    Posted 26 Feb 2009 Link to this post

    Hi - I too am hoping that the Allow Custom Colors functionality will be restored to the RadEditor. Specifically I have two clients who use it to customize their table background colors; is that going to be possible when the functionality is restored?

    Thanks
    Emily
  15. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 04 Mar 2009 Link to this post

    Hello Emily,

    We do plan to integrate the ability to add a custom color back into the editor's ColorPicker.
    For the time being you should use the approach provided by Rumen (.e.g the custom dialog).
    Unfortunately, at present the workaround only applies to the color pickers of the RadEditor toolbar, and not of the color pickers in the dialogs - but once this functionality is integrated into the editor, all color pickers should be able to expose this behavior.


    Best regards,
    Tervel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  16. Keith LeBeau
    Keith LeBeau avatar
    51 posts
    Member since:
    Feb 2005

    Posted 18 Mar 2009 Link to this post

    Is there a estimated date for the re-implementation of custom colors?
  17. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 23 Mar 2009 Link to this post

    Hi Keith,

    There is no firm estimate when this will happen. We will try to do it for Q2 but it is not among the high priorities.

    Kind regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  18. Dr. Acula
    Dr. Acula avatar
    18 posts
    Member since:
    Aug 2007

    Posted 16 Apr 2009 Link to this post

    I've implemented the "Add Custom Color" feature that is posted above and it works great in Firefox, IE6. In IE7 it causes some strange behaviour which means whenever a line of text is selected it is immediately deleted, needless to say this isn't exactly desirable.
    In Safari and Google Chrome it doesn't change the colour, but my main concern is the IE7 behaviour
  19. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 17 Apr 2009 Link to this post

    Hello Dr. Acula,

    I tried to reproduce the reported problem in IE7, but unfortunately to no avail. Could you please provide detailed step-by-step instructions how to reproduce the problem on our side?

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  20. Dr. Acula
    Dr. Acula avatar
    18 posts
    Member since:
    Aug 2007

    Posted 17 Apr 2009 Link to this post

    here's my code for the editor:

    <telerik:RadEditor ID="PageEditor" Runat="server" OnClientLoad="OnClientLoad"
                        <DocumentManager DeletePaths="~/uploads/documents/"
                            UploadPaths="~/uploads/documents/" ViewPaths="~/uploads/documents/" />
                        <MediaManager DeletePaths="~/uploads/media/" UploadPaths="~/uploads/media/"
                            ViewPaths="~/uploads/media/" />
                        <CssFiles>
                            <telerik:EditorCssFile Value="~/EditorStyles.css" />
                        </CssFiles>
                        <ImageManager DeletePaths="~/uploads/images/" UploadPaths="~/uploads/images/"
                            ViewPaths="~/uploads/images/" />
                        <TemplateManager DeletePaths="~/uploads/templates/"
                            UploadPaths="~/uploads/templates/" ViewPaths="~/uploads/templates/" />
                        <Content>
                        </Content>
                        <FlashManager DeletePaths="~/uploads/flash/" UploadPaths="~/uploads/flash/"
                            ViewPaths="~/uploads/flash/" />
                        <Tools>
                            <telerik:EditorToolGroup>
                                <telerik:EditorTool Name="Print" />
                                <telerik:EditorTool Name="AjaxSpellCheck" />
                                <telerik:EditorTool Name="FindAndReplace" />
                                <telerik:EditorTool Name="Cut" />
                                <telerik:EditorTool Name="Copy" />
                                <telerik:EditorTool Name="Paste" />
                                <telerik:EditorToolStrip Name="Paste">
                                    <telerik:EditorTool Name="Paste" />
                                    <telerik:EditorTool Name="PasteFromWord" />
                                    <telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />
                                    <telerik:EditorTool Name="PastePlainText" />
                                    <telerik:EditorTool Name="PasteAsHtml" />                            
                                </telerik:EditorToolStrip>
                                <telerik:EditorSeparator />
                                <telerik:EditorTool Name="Undo" />
                                <telerik:EditorTool Name="Redo" />
                            </telerik:EditorToolGroup>
                            <telerik:EditorToolGroup>
                                <telerik:EditorTool Name="ImageManager" />
                                <telerik:EditorTool Name="AbsolutePosition" />
                                <telerik:EditorSeparator />
                                <telerik:EditorTool Name="FlashManager" />
                                <telerik:EditorTool Name="MediaManager" />
                                <telerik:EditorTool Name="DocumentManager" />
                                <telerik:EditorTool Name="TemplateManager" />
                                <telerik:EditorSeparator />
                                <telerik:EditorTool Name="LinkManager" />
                                <telerik:EditorTool Name="Unlink" />
                            </telerik:EditorToolGroup>
                            <telerik:EditorToolGroup>
                                <telerik:EditorTool Name="Superscript" />
                                <telerik:EditorTool Name="Subscript" />
                                <telerik:EditorTool Name="InsertParagraph" />
                                <telerik:EditorTool Name="InsertGroupbox" />
                                <telerik:EditorTool Name="InsertHorizontalRule" />
                                <telerik:EditorTool Name="InsertDate" />
                                <telerik:EditorTool Name="InsertTime" />
                            </telerik:EditorToolGroup>
                            <telerik:EditorToolGroup>
                                <telerik:EditorTool Name="FormatBlock" />
                                <telerik:EditorTool Name="FontName" />
                                <telerik:EditorTool Name="FontSize" />
                            </telerik:EditorToolGroup>
                            <telerik:EditorToolGroup>
                                <telerik:EditorTool Name="SelectAll" />
                                <telerik:EditorSeparator />
                                <telerik:EditorTool Name="Bold" />
                                <telerik:EditorTool Name="Italic" />
                                <telerik:EditorTool Name="Underline" />
                                <telerik:EditorTool Name="StrikeThrough" />
                                <telerik:EditorSeparator />
                                <telerik:EditorTool Name="JustifyLeft" />
                                <telerik:EditorTool Name="JustifyCenter" />
                                <telerik:EditorTool Name="JustifyRight" />
                                <telerik:EditorTool Name="JustifyNone" />
                                <telerik:EditorSeparator />
                                <telerik:EditorTool Name="Indent" />
                                <telerik:EditorTool Name="Outdent" />
                                <telerik:EditorSeparator />
                                <telerik:EditorTool Name="InsertOrderedList" />
                                <telerik:EditorTool Name="InsertUnorderedList" />
                                <telerik:EditorTool Name="ToggleTableBorder" />
                            </telerik:EditorToolGroup>
                            <telerik:EditorToolGroup>                       
                               <telerik:EditorTool Name="ForeColor" Text="Fore Color" />
                               <telerik:EditorTool Name="BackColor" />
                               <telerik:EditorTool Name="ApplyClass" />   
                               <telerik:EditorTool Name="FormatStripper" />                          
                            </telerik:EditorToolGroup>
                            <telerik:EditorToolGroup>                       
                               <telerik:EditorTool Name="InsertSymbol" />
                               <telerik:EditorTool Name="InsertTable" />
                               <telerik:EditorTool Name="InsertFormElement" />   
                               <telerik:EditorTool Name="FormatStripper" />      
                               <telerik:EditorTool Name="InsertSnippet" />      
                               <telerik:EditorTool Name="ImageMapDialog" />
                               <telerik:EditorTool Name="InsertCustomLink" />
                               <telerik:EditorSeparator />    
                               <telerik:EditorTool Name="ConvertToLower" />
                               <telerik:EditorTool Name="ConvertToUpper" />
                               <telerik:EditorSeparator />  
                               <telerik:EditorTool Name="AboutDialog" />      
                               <telerik:EditorTool Name="Zoom" />      
                               <telerik:EditorTool Name="ModuleManager" />
                               <telerik:EditorTool Name="ToggleScreenMode" />                                                   
                            </telerik:EditorToolGroup>
                        </Tools>
                    </telerik:RadEditor>
                    <script type="text/javascript">
                            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>

    I am using the same ForeColorDialog.aspx as is provided in the example.
    When in Design mode if I select a line of text it is immediately removed, this only happens in design mode

    thanks
  21. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 21 Apr 2009 Link to this post

    Hi Dr. Acula,

    The provided code is the same as this one in the provided demo project. The only difference is that you have add tools to the toolbar collection. Nevertheless, I added the provided markup and js code to my test project and I was not able to reproduce the problem again.

    For your convenience I have attached my test project and video demonstrating my test in IE7. Could you please tell me what I am missing?

    P.S. The project uses the latest Q1 SP1 2009 version of Telerik.Web.UI.dll.

    All the best,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  22. nilesh
    nilesh avatar
    5 posts
    Member since:
    May 2009

    Posted 04 May 2009 Link to this post

    I would like to vote for this option to be added back to the color picker on the editor.
  23. Ramon Achten
    Ramon Achten avatar
    10 posts
    Member since:
    Mar 2005

    Posted 12 May 2009 Link to this post

    Yes, please add the custom color editor to the RadEditor again!
  24. Dr. Acula
    Dr. Acula avatar
    18 posts
    Member since:
    Aug 2007

    Posted 26 May 2009 Link to this post

    I'm using the Q2 version of the Telerik.Web.UI.dll maybe this is causing some problem?
  25. Laird Rixford
    Laird Rixford avatar
    5 posts
    Member since:
    Aug 2005

    Posted 09 Jul 2009 Link to this post

    The Q2 2009 Controls have the ColorPicker Control that offers the RGB and Slider.  Can this functionality be added to the RadEditor instead of the static one discussed above?

    Not really keen on the Yahoo API option.  Wish your controls just talked to each other.
  26. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 10 Jul 2009 Link to this post

    Hi Laird Rixford,
    I have created a simple test page that demonstrates how you can replace the ForeColor and BackColor tools in the RadEditor with a RadColorPicker - please find it attached. The basic idea behind this approach is to add two RadColorPickers to the Controls collection of the RadEditor and then, in the ClientLoaded handler of the editor, replace the two tools with those color pickers.

    I have additionally styled the two color pickers so that their buttons (ShowIcon=true) look like the splitButtons that open the default editor tools.

    You can additionally configure the RadColorPickers according to your requirements.

    All the best,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  27. Ian Sampson
    Ian Sampson avatar
    5 posts
    Member since:
    Sep 2006

    Posted 24 Sep 2009 Link to this post

    The ability to add custom colors (or colour pick) is really important to us.

    Can you give me some guidance on how to add your code above to the DNN RADEditor?

    Thanks
    Ian
  28. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 30 Sep 2009 Link to this post

    Hi Ian,

    You can see how to attach custom functions to the OnClientLoad function of RadEditor in this KB article: Executing custom code called on RadEditor's events.

    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.
  29. brian
    brian avatar
    11 posts
    Member since:
    Apr 2009

    Posted 12 Oct 2009 Link to this post


    I vote for this as well. I have implemented the color picker controls, per the demo, and it is a good fix.

    This would be nice for the border and background color within the properties inspector also. 
     Can I access the built in Module.RadEditorHtmlInspector in the same manner?



     Regards,

    Brian
  30. brian
    brian avatar
    11 posts
    Member since:
    Apr 2009

    Posted 13 Oct 2009 Link to this post

    I spoke too soon.

    I can not get your example to work in conjunction with this OnClientCommandExecuting function. The color picker will not fire this function, but with this function available, it will not trigger the

    forePicker.add_colorChange

    of the new ColorPickerTool

     function OnClientCommandExecuting(editor, args) {  
                var commandName = args.get_commandName();  
     
                if ("InsertTable" == commandName) {  
                    var cArea = editor.get_contentArea();  
                    var tables = cArea.getElementsByTagName("TABLE");  
                    for (var i = 0; i < tables.length; i++) {  
                        curTables[curTables.length] = tables[i];  
                    }  
                }  
                alert('executing');             
            } 

  31. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 15 Oct 2009 Link to this post

    Hi Brian,

    Could you please open a support ticket and send a sample working project demonstrating your scenario and detailed step-by-step instructions on how to reproduce the problem? I will examine it and do my best provide a solution.

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017