<script type="text/javascript">
RadEditorCommandList[
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)
{ }
}
3 Answers, 1 is accepted
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
Rank 1
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">
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 toolvar 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.
{
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 userXmlDocument 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 databaseif (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);}
}
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