We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Option to Select Color

Hi,
is there a way to implement a ColorPicker to the Toolbar of a RichTextEditor? Changing the HTML works, but I'm looking for Toolbaritem doing this for Users

Thanks for your help

Kind regards 
lc

7 Replies

SN Sasikala Nagarajan Syncfusion Team June 13, 2014 09:25 AM UTC

Hi lc,

Thanks for using Syncfusion products.

In RTE Control, we provide the colorpalette option to pick the color for font and also background. We have prepared the sample for RTE Control with colorpalette option. Please find the sample from the below location.In the given example we enabled the Color palette option.

RTE SAMPLE WITH COLORPALETTE OPTION

Also, we need to clarify that whether the given response meets your requirement or we misunderstood, if so could please provide more details about the requirement and it will be easy for us to provide the exact solution.

Please let us know if you have any concerns.

Regards,

Sasikala Nagarajan



LC lc June 16, 2014 10:54 AM UTC

Thanks for your quick replay.

Unfortunately i have some issues with the references to syncfision.ej and syncfusion.ej.mvc. these seem to be missing in our version of syncfusion. We are using Essential Studio 11.4.0.26

Regards,
lc


HP Harikrishnan P Syncfusion Team June 17, 2014 01:50 PM UTC

Hi lc,

Thanks for the update.

Query: Unfortunately i have some issues with the references to syncfision.ej and syncfusion.ej.mvc. these seem to be missing in our version of syncfusion. We are using Essential Studio 11.4.0.26

We would like to let you know that, we have marked the previous ASP.NET MVC controls (i.e., ASP.NET MVC components before 12.1.0.43 version) as ASP.NET MVC (Classic) components. Now we have provided newer set of controls powered by Essential JavaScript as ASP.NET MVC Controls from 12.1.0.43 version. The newer version provides several advantages over classic edition including purely client side rendered HTML5/JavaScript controls, offers better performance and provides better support for touch interactivity.

While installing ASP.NET MVC (newer version) the above mentioned assemblies (Syncfusion.EJ and Syncfusion.EJ.MVC) will be installed in your GAC location, if you check the option “Register Syncfusion assemblies in GAC”.  Otherwise you can get these assemblies from the location where Syncfusion Essential studio has been installed. It will be available in the folder “precompiledassemblies”. You can access this folder by navigating as follows,

[Installed Drive:] - > Syncfusion -> Essential Studio -> 12.1.0.43 -> precompiledassemblies.

Please refer our online link for more details about getting started with ASP.NET MVC controls,

http://help.syncfusion.com/ug/js/default.htm#!Documents/createusingprojectte.htm

Please let us know if you have further queries.

Regards,

HariKrishnan.



RJ Radoslaw Jarczynski February 2, 2016 03:06 PM UTC

Hello,

The build-in color picker is too simplistic for my needs  I would like to embed ColorPicker control into RTE. Could you please give me a hint where selected color is stored ? I'd rather avoid doing it from scratch - I would simply would like to pass a value from the ColorPicker to the build-in fontColor and fontBackground selectors.  An example with full integration would be the best, but I would appreciate any hint. Thanks in advance!

Kind regards,
Radek


AP Arun Palaniyandi Syncfusion Team February 4, 2016 04:06 AM UTC

Hi Radek,

Thanks for contacting Syncfuion support,

Query :”The build-in color picker is too simplistic for my needs  I would like to embed ColorPicker control into RTE. Could you please give me a hint where selected color is stored ? I'd rather avoid doing it from scratch - I would simply would like to pass a value from the ColorPicker to the build-in fontColor and fontBackground selectors.  An example with full integration would be the best, but I would appreciate any hint. “


We can embed the colorPicker control into the RTE using the custom tool list and this controls can be formed in the clientside prerender event function. And you can get the selected color value using the clientside select event of the colorPicker. Please find the below code snippet to change the color using the selected color using the colorPicker.


<code>
<cshtml>
List<String> toolsList = new List<string>() { "formatStyle", "font", "style", "effects", "alignment", "lists", "indenting", "clipboard", "doAction", "clear", "links", "images", "media", "tables", "casing", "customTools", "view", "custom" };
.
.
.
.
.
</p>).ShowFooter(true).Tools(tool=>tool.CustomTools(custom=>custom.Name("Colorpicker").Tooltip("colorpicker").Add()).Clear(clear).FormatStyle(formatStyle).Tables(tables).Links(links).Images(images).Effects(effects).Casing(casing).Font(font).Styles(style).Media(media).Alignment(alignment).Lists(lists).Clipboard(clipboard).DoAction(doAction).Indenting(indenting).View(view)).ClientSideEvents(evt => evt.PreRender("onRender")).Render();}

<script>

function onRender(args)

    {

        var ddl = $("#Colorpicker");

        var ddltarget = $("<input id='color'></div>");

        ddl.append(ddltarget);

        $("#color").ejColorPicker({ value: "#278787",select: "onselect" });

    }


    function onselect(args)

    {

        var rte = $("#rteSample").data("ejRTE");

        rte.executeCommand("foreColor", args.value);
    }

</script>

Based on your requirement we have prepared a sample .You can download the sample from the below location:
http://www.syncfusion.com/downloads/support/forum/116590/ze/MvcApplication1796228280

Please find the API documentation link for the select event:
http://help.syncfusion.com/js/api/ejcolorpicker#events:select

Also we are having an online documention for custom tool option and it can be found under the following link.
http://help.syncfusion.com/aspnetmvc/richtexteditor/toolbar-support#customized-tools-option


Please let us know if you have further concern.

Regards,

Arun P



RJ Radoslaw Jarczynski February 8, 2016 09:41 AM UTC

Hi Arun,,

Fantastic, it works, thank you! A hint for other users: to change background color in similar way, use 

rte.executeCommand("backColor", args.value);

By the way, is there a list of valid parameters for executeCommand method ? I could not find it.

Kind regards,
Radek J


ES Ezhil S Syncfusion Team February 9, 2016 09:30 AM UTC

Hi Radek,

We are glad your issue have been resolved.

You can use all the Toolbar names available in RTE except the lowercase, uppercase, fullscreen, video, image, hyperlink and table as a command in executeCommand API. Because those toolbar items uses insertHTML for their functionality. To get to know the list of valid parameters to use in executeCommand, check the following reference on execCommand which we have used in our RTE as well.
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Please let us know if you need further assistance.

Regards,
Ezhil S

Loader.
Live Chat Icon For mobile
Up arrow icon