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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Option to Select Color

Thread ID:

Created:

Updated:

Platform:

Replies:

116590 Jun 12,2014 02:38 PM UTC Feb 9,2016 09:30 AM UTC ASP.NET MVC 7
loading
Tags: RichTextEditor
lc
Asked On June 12, 2014 02:38 PM UTC

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

Sasikala Nagarajan [Syncfusion]
Replied On 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
Replied On 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

Harikrishnan P [Syncfusion]
Replied On 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.


Radoslaw Jarczynski
Replied On 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

Arun Palaniyandi [Syncfusion]
Replied On 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


Radoslaw Jarczynski
Replied On 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

Ezhil S [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;