custom button not working

[amit aggarwal]

Hi,

I am using a custom button in our rad editor implementation. JS for that button is available in mossEditorTools.js

Telerik.Web.UI.Editor.CommandList["clearFormatting"] = function(commandName, editor, args)
{
 editor.get_document().execCommand("RemoveFormat", null, null);
};

Now when i am clicking on clearFormatting button, an alert pops in saying that command in not implemented yet. Not able to get the reason why when in view source i am seeing that this JS correctly added.

Please help me out.

Thanks,
Amit

[Stanimir]

Hello amit ,

Could you confirm that you cleared the browser's cache? It is most certain that the browser saves the MOSSEditorTools.js file in the temporary internet files folder. What I suggest you to do is add an alert("test"); statement in the file and check if it will be execute when the editor loads.

If this does not help, provide us with your ConfigFile.xml, ListConfigFile.xml, ToolsFile.xml, ListToolsFile.xml and MOSSEditorTools.js files. I will check them out and advise you further.


Greetings,
Stanimir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[amit aggarwal]

Hi Stanimir,

I have tried all suggestions you have made. NOthing worked, even alert is not happening. Earlier all was working fine. PFA files required by you. Please help me out.

config and listconfig are same:

<?xml version="1.0" encoding="utf-8" ?>
<!-- ==============================================================================================
 Config File valid structure:
 <configuration>
    <property>...</property>
    ...
  <property>
   <item>...</item>
   <item>...</item>
   ...
  </property>
  ...
 </configuration>
=============================================================================================== -->
<configuration>
 <property name="ExternalDialogsPath">/_wpresources/RadEditorSharePoint/5.7.1.0__1f131a624888eeed/Resources/</property>
 <property name="StripFormattingOptions">AllExceptNewLines</property>
 <property name="ToolbarMode">Default</property>
 <property name="TableLayoutCssFile">/_wpresources/RadEditorSharePoint/5.7.1.0__1f131a624888eeed/Resources/TableLayoutCss.css</property>
 <property name="ImagesPaths">
  <item>/PublishingImages</item>
 </property>
 <!--<property name="NewLineBr">false</property>-->
</configuration>

Tool and ListTools.xml are same:
<root>
  <tools name="InsertToolbar" enabled="true" >
   <tool name="InsertSymbol" />
    <tool name="FormatStripper" />
    <tool name="AjaxSpellCheck"/>
    <tool name="ImageManager" shortcut="CTRL+M"/>
 </tools>
  <tools name="InsertToolbar" enabled="true" >
    <tool name="InsertTable" />
    <tool name="ToggleTableBorder" />
    <tool name="ToggleScreenMode" />
    <tool name="Help" />
  </tools>
  <tools enabled="true">
    <tool name="Undo" />
    <tool name="Redo" />
    <tool separator="true"/>
    <tool name="Cut" />
    <tool name="Copy" />
 </tools>
 <tools enabled="true">
  <tool name="PastePlainText" />
    <tool name="PasteAsHtml"  />
    <tool separator="true"/>
    <tool name="InsertParagraph" />
 <tool name="InsertHorizontalRule" />
 </tools>
 <tools enabled="true">
 <tool name="FormatBlock" />
 <tool name="clearFormatting" />
   
  </tools>
  <tools enabled="true" dockable="true">
    <tool name="Bold" />
    <tool name="Italic" />
    <tool name="Underline" />
 </tools>
    <tools enabled="true" dockable="true">
    <tool name="JustifyLeft" />
    <tool name="JustifyCenter" />
    <tool name="JustifyRight" />
 </tools>
  <tools enabled="true" dockable="true">
    <tool name="Indent" />
    <tool name="Outdent" />
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList"/>
 </tools>
 <tools enabled="true" dockable="true">
    <tool name="AbsolutePosition" />
    <tool name="LinkManager" />
    <tool name="Unlink" />
  </tools>
  <tools name="DropdownToolbar" dockable="true" >
    <tool name="ApplyClass"/>
  </tools>
  <links>
  </links>
  <symbols></symbols>
  <fontNames></fontNames>
  <fontSizes></fontSizes>
  <colors></colors>
 <classes>
    <class name="Clear Class" value="" />
    <class name="Body Text" value=".bodyText-Content" />
 </classes>
  <paragraphs>
   <paragraph name="Normal" value="&lt;p&gt;" />
   <paragraph name="&lt;H1&gt;Heading 1&lt;/H1&gt;" value="&lt;H1&gt;" />
   <paragraph name="&lt;H2&gt;Heading 2&lt;/H2&gt;" value="&lt;H2&gt;" />
   <paragraph name="&lt;H3&gt;Heading 3&lt;/H3&gt;" value="&lt;H3&gt;" />
 </paragraphs>
  <dialogParameters></dialogParameters>
  <languages></languages>
  <cssFiles>
    <item name="/_wpresources/RadEditorSharePoint/5.7.1.0__1f131a624888eeed/Resources/cssEditorApollo.css" />
  </cssFiles>
</root>

MOSSEditorTools.js

var RadE_HasRules = false;
Type.registerNamespace("Telerik.Web.UI.Editor");
if (typeof (Telerik.Web.UI.Editor.CommandList) == "undefined")
 Telerik.Web.UI.Editor.CommandList = {};

Telerik.Web.UI.Editor.CommandList["clearFormatting"] = function(commandName, editor, args)
{
 editor.get_document().execCommand("RemoveFormat", null, null);
 //for example you can apply bold formatting by firing the editor.fire("Bold");
};

Telerik.Web.UI.Editor.CommandList["MOSSRightToLeft"] = function(commandName, editor, args)
{
 Telerk_MOSS_SetDirectionOfSelection(editor, "rtl");
};
Telerik.Web.UI.Editor.CommandList["MOSSLeftToRight"] = function(commandName, editor, args)
{
 Telerk_MOSS_SetDirectionOfSelection(editor, "ltr");
};
Telerik.Web.UI.Editor.CommandList["MOSSHelp"] = function(commandName, editor, args)
{
 HelpWindowKey('WCMHTMLEditor');
};
Telerik.Web.UI.Editor.CommandList["ToggleSource"] = function(commandName, editor, args)
{
 //todo: call the source dialog as the MOSS editor does
 editor.set_mode(Telerik.Web.UI.EditModes.Html);
};
Telerik.Web.UI.Editor.CommandList["MOSSInsertTable"] = function(commandName, editor, args)
{
 //todo: change the dialog to use the moss default (after firefox is fixed)
 editor.fire("TableWizard", args);
};
Telerik.Web.UI.Editor.CommandList["MOSSImageManager"] = function(commandName, editor, args)
{
 var params = editor._dialogParameters;
 var docEditor = editor.get_document();
 var configObj = new AssetPickerConfig("");
 configObj.ClientID = editor.get_id();
 configObj.DefaultAssetLocation = "";
 configObj.DefaultAssetImageLocation = "";
 configObj.CurrentWebBaseUrl = params["CurrentWebBaseUrl"];
 configObj.ManageHyperlink = false;
 configObj.AllowExternalUrls = params["AllowExternalUrls"];
 var bInserting = false;
 var elemToReplace = null;
 var imageAssetObj = new ImageAsset("");

 elemToReplace = editor.getSelectedElement();
 if (elemToReplace && elemToReplace.tagName && elemToReplace.tagName.toUpperCase() == "BODY")
 {
  //if there is no selection or selection is the whole content body
  elemToReplace = null;
 }
 var elemImage = FormJSRTE_GetNearestContainingParentElementOfTypes(editor.get_contentWindow().frameElement.id, elemToReplace, new Array("IMG"));
 if (!elemImage)
 {
  bInserting = true;
  elemImage = docEditor.createElement("IMG");
  elemImage.border = 0;
 }
 configObj.ReturnCallback = function(newAssetUrl, newAssetText, currentConfig, dialogReturnedData)
 {
  if (dialogReturnedData)
  {
   if (bInserting)
   {
    var tempDiv = docEditor.createElement("DIV");
    tempDiv.appendChild(elemImage);
    editor.pasteHtml(tempDiv.innerHTML, commandName);
    tempDiv = null;
   }
  }
 }
 var dialogReturnedData = imageAssetObj.LaunchModalDialogOnElement(configObj, elemImage, true, !bInserting);
};
Telerik.Web.UI.Editor.CommandList["MOSSLinkManager"] = function(commandName, editor, args)
{
 var params = editor._dialogParameters;
 var docEditor = editor.get_document();
 var configObj = new AssetPickerConfig("");
 configObj.ClientID = editor.get_id();
 configObj.DefaultAssetLocation = "";
 configObj.DefaultAssetImageLocation = "";
 configObj.CurrentWebBaseUrl = params["CurrentWebBaseUrl"];
 configObj.AllowExternalUrls = params["AllowExternalUrls"];
 var bInserting = false;
 var elemToReplace = null;
 var linkAsset = new LinkAsset("");
 var innerLinkHTML = null;
 linkAsset.ManageLinkDisplayText = false;
 var elemLink = FormJSRTE_GetNearestContainingParentElementOfTypes(editor.get_contentWindow().frameElement.id, editor.getSelectedElement(), new Array("A"));
 if (!elemLink)
 {
  bInserting = true;
  elemLink = docEditor.createElement("A");
  if (elemLink == null) return;
  var editorSelection = editor.getSelection();
  if (editorSelection.isControl())
  {
   elemToReplace = editor.getSelectedElement();
  }
  else
  {
   innerLinkHTML = editorSelection.getHtml();
  }
 }
 else
 {
  innerLinkHTML = elemLink.innerHTML;
 }
 configObj.ReturnCallback = function(newAssetUrl, newAssetText, currentConfig, dialogReturnedData)
 {
  if (dialogReturnedData)
  {
   var linkText = "";
   if ($telerik.isIE)
    linkText = elemLink.innerText;
   else
    linkText = elemLink.textContent;
   if (innerLinkHTML && innerLinkHTML != "")
   {
    elemLink.innerHTML = innerLinkHTML;
   }
   else if (linkText == "")
   {
    if (linkAsset.AssetText && linkAsset.AssetText != "")
    {
     linkText = linkAsset.AssetText;
    }
    else
    {
     linkText = linkAsset.AssetUrl;
    }
    elemLink.innerHTML += linkText;
   }
   if (elemToReplace != null)
   {
    var parentEl = elemToReplace.parentNode;
    elemLink.innerHTML = "";
    parentEl.insertBefore(elemLink, elemToReplace);
    elemLink.appendChild(elemToReplace);
    linkAsset.FixupIconsAndEmptyAnchors(elemLink);
    return;
   }
   else if (bInserting)
   {
    var selection = docEditor.selection;
    if (selection != null)
    {
     var textRange = selection.createRange();
     if (textRange != null)
     {
      var text = textRange.text;
      if (text && text != "" && !text.match(/^\s+$/))
      {
       textRange.execCommand("Unlink");
       elemLink.innerHTML = textRange.htmlText;
       linkAsset.FixupIconsAndEmptyAnchors(elemLink);
      }
      var tempDiv = docEditor.createElement("DIV");
      tempDiv.appendChild(elemLink);
      textRange.pasteHTML(tempDiv.innerHTML);
     }
    }
    else
    {
     //if we cannot get the selection, use the editor paste function instead
     var tempDiv = docEditor.createElement("DIV");
     tempDiv.appendChild(elemLink);
     editor.pasteHtml(tempDiv.innerHTML, commandName);
     tempDiv = null;
    }
   }
   else
   {
    linkAsset.FixupIconsAndEmptyAnchors(elemLink);
   }
  }
 }
 linkAsset.LaunchModalDialogOnElement(configObj, elemLink, true, !bInserting);
};
Telerik.Web.UI.Editor.CommandList["MOSSTemplateManager"] = function(commandName, editor, args)
{
 if (!RadE_HasRules)
 {
  RTE2_InstantiateStaticSafeHtmlRules();
  RadE_HasRules = true;
 }
 var params = editor._dialogParameters;
 var docEditor = editor.get_document();
 var configObj = new AssetPickerConfig("");
 configObj.ClientID = editor.get_id();
 configObj.DefaultAssetLocation = "";
 configObj.CurrentWebBaseUrl = params["CurrentWebBaseUrl"];
 configObj.AllowExternalUrls = params["AllowExternalUrls"];
 var bInserting = false;
 var elemToReplace = null;
 var fragmentId = null;
 var elemViewToEdit = FormJSRTE_GetNearestContainingParentElementOfTypes(editor.get_contentWindow().frameElement.id, editor.getSelectedElement(), new Array("SPAN"));
 if ((elemViewToEdit != null) && (elemViewToEdit.id == g_strRTE2ReusableFragmentCommonToken))
 {
  fragmentId = elemViewToEdit.getAttribute("fragmentid");
 }
 var dialogInput = new Object();
 dialogInput.fragmentId = fragmentId;
 var callback = function(dialogOutput)
 {
  if ((dialogOutput != null) && (dialogOutput.fragmentView != null))
  {
   var selection = docEditor.selection;
   if (selection != null)
   {
    if (selection.type == "Control")
    {
     var controlRange = selection.createRange();
     if (controlRange != null)
     {
      controlRange.execCommand("Delete");
     }
    }
    if (selection.type != "Control")
    {
     var textRange = selection.createRange();
     if (textRange != null)
     {
      var safeHtmlDocument = RadE_CreateTemporaryDocument();
      safeHtmlDocument.body.innerHTML = dialogOutput.fragmentView;
      var elements = RTE2_GetAllElements(safeHtmlDocument);
      //setting these to hardcoded values since they are not passed in the params[] array yet.
      var instanceVariables = new Object();
      instanceVariables.EditorOpenFromWebPart = false;
      instanceVariables.DisableCustomStyles = false;
      RTE2_ApplyContentFilters(elements, instanceVariables);
      textRange.pasteHTML(dialogOutput.fragmentView);
      RTE2_AlterReusableFragmentHighlights(docEditor.body, "ms-reusableTextView");
     }
    }
   }
   else
   {
    editor.pasteHtml(dialogOutput.fragmentView, commandName);
    RTE2_AlterReusableFragmentHighlights(docEditor.body, "ms-reusableTextView");
   }
  }
 };
 var dialogUrl = params["CurrentWebBaseUrl"] + "/_layouts/ReusableTextPicker.aspx";
 commonShowModalDialog(dialogUrl, "dialogHeight:600px; dialogWidth:800px; center:yes; resizable:yes; scroll:no; status:no;", callback, dialogInput);
};

function fixRadEditorReusableContent(editor)
{
 var editorBody = null;
 if (editor.get_mode() == Telerik.Web.UI.EditModes.Html)
 {
  editorBody = editor.get_document().createElement("div");
  Telerik.Web.UI.Editor.Utils.setElementInnerHtml(editorBody, editor.get_html(true));
 }
 else
 {
  editorBody = editor.get_document().body;
 }
 var allElements = editorBody.getElementsByTagName("*");
 var i = 0, len = allElements.length;
 var tempDiv = editor.get_document().createElement("div");
 var fragmentIds = [], elementsToModify = [];
 while (i < len)
 {
  var element = allElements[i];
  if (element.id == g_strRTE2ReusableFragmentCommonToken)
  {
   var fragmentId = element.getAttribute("fragmentid");
   if (fragmentId != null)
   {
    Array.add(fragmentIds, fragmentId);
    Array.add(elementsToModify, element);
   }
   else
   {
    element.removeAttribute("id", false);
   }
  }
  i++;
 }
 if (elementsToModify.length > 0)
 {
  for (var j = 0; j < elementsToModify.length; j++)
  {
   var element = elementsToModify[j];
   if (element)
   {
    tempDiv.innerHTML = "<" + element.tagName + " id=\"" + element.id + "\"></" + element.tagName + ">";
    var parent = element.parentNode;
    parent.replaceChild(tempDiv.firstChild, element);
   }
  }
 }
 var headerHtml = "";
 if (fragmentIds.length > 0)
 {
  headerHtml = "<div id=\"" + g_strRTE2ReusableFragmentCommonToken + "IdSection\">";
  for (var index = 0; index < fragmentIds.length; index++)
  {
   var fragmentId = fragmentIds[index];
   if (fragmentId != null)
   {
    headerHtml += "<a href=\"" + STSHtmlEncode(fragmentId) + "\">a</a>";
   }
  }
  headerHtml += "</div>";
 }
 if (headerHtml && editorBody.firstChild)
 {
  if (editor.get_mode() == Telerik.Web.UI.EditModes.Html)
  {
   editor.set_html(headerHtml + editorBody.innerHTML);
  }
  else
  {
   Telerik.Web.UI.Editor.Utils.setElementInnerHtml(tempDiv, headerHtml);
   editorBody.insertBefore(tempDiv.firstChild, editorBody.firstChild);
  }
 }
}

//Contains the href of HtmlEditorTableFormats.css
var Telerik_RadEditor_TableFormatsCSSLink = "";

//overwriting getDialogArguments for the predefined MOSS table layouts
Telerik.Web.UI.Editor.CommandList._oldGetDialogArguments = Telerik.Web.UI.Editor.CommandList._getDialogArguments;
Telerik.Web.UI.Editor.CommandList._getDialogArguments = function(argument, tagName, editor, commandName)
{
 //cal the original function from RadEditor for ASP.NET AJAX
 Telerik.Web.UI.Editor.CommandList._oldGetDialogArguments(argument, tagName, editor, commandName);
 if (!argument.tableLayoutCssFile)
 {
  //Add css
  if ("TD" == tagName || "TH" == tagName || "TABLE" == tagName)
  {
   //set the link for the Table formats css
   if (!Telerik_RadEditor_TableFormatsCSSLink)
   {
    var links = document.getElementsByTagName("LINK");
    var linksLength = links.length;
    for (var i = 0; i < linksLength; i++)
    {
     var href = links[i].getAttribute("href");
     if (href.indexOf("HtmlEditorTableFormats.css") != -1)
     {
      Telerik_RadEditor_TableFormatsCSSLink = href;
      break;
     }
    }
   }
   argument.tableLayoutCssFile = Telerik_RadEditor_TableFormatsCSSLink.substring(0, Telerik_RadEditor_TableFormatsCSSLink.indexOf("?"));
  }
 }
}

// support functions
function Telerk_MOSS_SetDirectionOfSelection(editor, strDirection)
{
 var rngSelection = editor.getSelection();
 var strTagNames;
 strTagNames = "|H1|H2|H3|H4|H5|H6|P|PRE|TD|DIV|BLOCKQUOTE|DT|DD|TABLE|HR|IMG|BODY|TR|UL|OL|";
 if (rngSelection.getParentElement())
 {
  var elemSelectionParent = rngSelection.getParentElement();
  while ((elemSelectionParent != null) && (strTagNames.indexOf("|" + elemSelectionParent.tagName + "|") == -1))
  {
   elemSelectionParent = elemSelectionParent.parentNode;
  }
  if (elemSelectionParent)
  {
   Telerik_MOSS_SetDirectionOnElement(elemSelectionParent, strDirection);
  }
 }
}

function Telerik_MOSS_SetDirectionOnElement(element, strDirection)
{
 if ("ltr" == strDirection)
 {
  element.dir = "ltr";
  element.align = "left";
 }
 else if ("rtl" == strDirection)
 {
  element.dir = "rtl";
  element.align = "right";
 }
}

function RadE_CreateTemporaryDocument()
{
 // creating a temporary document for storing template content
 var iframe = document.createElement('iframe');
 document.body.appendChild(iframe);
 iframe.src = "javascript:'<html></html>'";
 iframe.frameBorder = '0';
 iframe.style.width = "0px";
 iframe.style.height = "0px";
 var doc = iframe.contentWindow.document;
 doc.open();
 doc.writeln('<head><style></style></head><body></body>');
 doc.close();
 if (!doc.body)
 {
  var oBody = doc.createElement("body");
  doc.appendChild(oBody);
 }
 if (doc.getElementsByTagName("head").length < 1)
 {
  var oHead = doc.createElement("head");
  oHead.style.visibility = "hidden";
  doc.body.parentNode.insertBefore(oHead, doc.body);
 }
 return doc;
}

//this code belongs in form.js, however it is copied here as well since in some pages form.js is not loaded by default.
function FormJSRTE_GetNearestContainingParentElementOfTypes(strBaseElementID, elem, aTagNames)
{
 var aTagNames_length = aTagNames.length;
 if (elem == null) return null;
 for (var i = 0; i < aTagNames_length; i++)
 {
  if (elem.tagName == aTagNames[i])
  {
   return elem;
  }
 }
 var elemParent = elem.parentNode;
 while (elemParent != null)
 {
  if (elemParent.id == strBaseElementID)
  {
   return null;
  }
  for (var i = 0; i < aTagNames_length; i++)
  {
   if (elemParent.tagName == aTagNames[i])
   {
    return elemParent;
   }
  }
  elemParent = elemParent.parentNode;
 }
 return null;
}

[Stanimir]

Hello amit ,

I tested the issue on our server, unfortunately I was not able to reproduce it. For your convenience I attached a small video with my test. Please inform me if I am doing anything wrong in it.


Kind regards,
Stanimir
the Telerik team

[amit aggarwal]

:) thats where i stuck up

It looks like everything is just fine... MossEditorTools.js is available in view source as well, and first alert like you have put in is working fine with me as well. Its just the function where alerts are not coming and also function is not working.

dont know what is wrong.

amit.

[Stanimir]

Hi amit ,

Check if there are no javascript errors in the page where you are using the editor. If there are such errors, they might be causing the script to break.

Also if there are javascript errors they should occur after the loading of MossEditorTools.js, since you can see the initial alert.

Best wishes,
Stanimir
the Telerik team