This is a migrated thread and some comments may be shown as answers.

Extra div gets created in RadHTMLField on publishing page

17 Answers 187 Views

Editor

This is a migrated thread and some comments may be shown as answers.

17 Answers, 1 is accepted

answered on 28 Jul 2011, 11:42 AM

Hi Stanimir
Thanks for your response. The version of RadEditor is 5.7.1.0__1f131a624888eeed and the code which is getting generated looks like below.
------------------------------------------------------------------------------------------------
<div class="ExternalClass20D1959A98DF4F73830F9956D39AB82C">
<div class="ExternalClass4209FD6E6A154C0DBD7D0AD8EA2045E8">
    <div class="ExternalClass9174253EF883478D82ED62A58279DF12">
      <div class="ExternalClassA89AC1D9703F4BA98F52F6E593D1C7A0">

// The data in Rad Editor

      </div>
    </div>
</div>
</div>
-------------------------------------------------------------------------------------------------
Every time the page is published, an outer div like shown above is added.

Regards
Sudhanshu

answered on 28 Jul 2011, 12:11 PM

Hello Sudhanshu,

The problem is that every time you edit the content SharePoint adds an additional div element. This is not something that RadEditor for MOSS can control. What you can do is removing the added div elements from the content by using a custom client content filter. Here is a sample implementation of a such one.
1. .Modify the respective ConfigFile.xml or ListConfigFile.xml files, which are located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder. Add the following element:

<property name="OnClientLoad">OnClientLoad</property>

2. Add the following javascript to the MOSSEditorTools.js, which is located in the mentioned above folder:

function OnClientLoad(editor, args)

{

    editor.get_filtersManager().add(new MyFilter());

}

MyFilter = function()

{

    MyFilter.initializeBase(this);

    this.set_isDom(true);

    this.set_enabled(true);

    this.set_name("RadEditor filter");

    this.set_description("RadEditor filter description");

}

MyFilter.prototype =

{

    getHtmlContent: function(contentElement)

    {

        //You can find the problem div elements and remove them here.

        return contentElement;

    }

}

MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);

You need to modify the getHrmlContent method of the filter so it will fit your exact needs.

All the best,
Stanimir
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 13 Sep 2011, 01:00 PM

Hi Stanimir

I have included the code below

-------------------------------
(1) ConfigFile.xml
-------------------------------

<?xml version="1.0" encoding="utf-8" ?>

<configuration>
<property name="ToolbarMode">ShowOnFocus</property>
<property name="ToolsWidth">680px</property>
<property name="OnClientLoad">OnClientLoad</property>
</configuration>

----------------------------------------------------------------------------

------------------------------------
(2) ListConfigFile.xml
------------------------------------
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<property name="EditModes">Design,Html</property>
<property name="Height">240px</property>
<property name="Width">500px</property>
<property name="OnClientLoad">OnClientLoad</property>
</configuration>
----------------------------------------------------------------------------

------------------------------------
(3) ToolsFile.xml
------------------------------------
<root>
<modules>
    <module name="RadEditorDomInspector" />
</modules>
<tools name="MossTools1">
    <tool name="AjaxSpellCheck" />
    <tool name="FindAndReplace" />
    <tool separator="true" />
    <tool name="Cut" shortcut="CTRL+X" />
    <tool name="Copy" shortcut="CTRL+C" />
    <tool name="Paste" shortcut="CTRL+V" />
    <tool separator="true" />
    <tool name="Undo" shortcut="CTRL+Z" />
    <tool name="Redo" shortcut="CTRL+Y" />
    <tool separator="true" />
    <tool name="MOSSLinkManager" shortcut="CTRL+K" />
    <tool name="Unlink" shortcut="CTRL+SHIFT+K" />
    <tool name="ImageManager" shortcut="CTRL+G" />
    <tool name="MOSSTemplateManager" />
    <tool separator="true" />
    <tool name="MOSSInsertTable" />
    <tool name="SetTableProperties" />
    <tool name="ToggleTableBorder" />
    <tool separator="true" />
    <tool name="MOSSInsertTableElement">
      <tool name="InsertRowAbove" />
      <tool name="InsertRowBelow" />
      <tool name="InsertColumnLeft" />
      <tool name="InsertColumnRight" />
      <tool name="DeleteRow" />
      <tool name="DeleteColumn" />
      <tool name="SplitCell" />
    </tool>
    <tool name="MergeColumns" />
    <tool separator="true" />
    <tool name="ToggleSource" />
    <tool name="FormatStripper" />
    <tool separator="true" />
    <tool name="MOSSRightToLeft" />
    <tool name="MOSSLeftToRight" />
    <tool separator="true" />
    <tool name="ForeColor" />
    <tool name="BackColor" />
</tools>
<tools name="MossTools2">
    <tool name="ApplyClass" />
    <tool name="FormatBlock" />
    <tool separator="true" />
    <tool name="FontName" />
    <tool name="FontSize" />
    <tool separator="true" />
    <tool name="Bold" shortcut="CTRL+B" />
    <tool name="Italic" shortcut="CTRL+I" />
    <tool name="Underline" shortcut="CTRL+U" />
    <tool separator="true" />
    <tool name="JustifyLeft" />
    <tool name="JustifyCenter" />
    <tool name="JustifyRight" />
    <tool separator="true" />
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList" />
    <tool separator="true" />
    <tool name="Indent" />
    <tool name="Outdent" />
</tools>
<contextMenus>
    <contextMenu forElement="*">
      <tool name="Cut"/>
      <tool name="Copy"/>
      <tool name="Paste"/>
    </contextMenu>
</contextMenus>
</root>
----------------------------------------------------------------------------

------------------------------------
(4) 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["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);
};

//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);
  }
}
}

//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;
}

answered on 15 Sep 2011, 02:08 PM

Hello Sudhanshu,

I tested the provided code and it works OK. For you convenience I created a small video, where you can actually see how the code is working: http://screencast.com/t/hKQmJjS6zRFm. What I did was adding two alerts in the problem functions:

alert(editor);

alert(editor.get_filtersManager);

For my test I used RadEditor for MOSS 5.7.1. Can you confirm again that this is the version, which you are using?

Greetings,
Stanimir
the Telerik team

answered on 12 Oct 2011, 12:25 PM

editor-error.JPG

Hi Stanimir
I am using RadEditorSharePoint version 5.7.1. Please see the attached screen shots for the error which I am getting and also the methods available with the editor object.
Please suggest what the issue could be and the solution possible.

Regards
Sudhanshu

answered on 13 Oct 2011, 12:35 PM

Hi Stanimir

I didn't understand what exaclty you mean here by "screenshot with editor".
I have already attached the screen shot with the editor object not showing the method "get_filtersManager()" while debugging the code, in my previous post.
Attaching the two files : EditorToolPart.js and MOSSEditorTools.js from the directory "C:/Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.7.1.0__1f131a624888eeed/Resources/".

--------------------------------------
1) EditorToolPart.js
--------------------------------------

function

RadEditorToolPart()

{

}

RadEditorToolPart.prototype.UpdateContent =

function(retValue, params)

{

if (retValue == "" || retValue)

{

this.UpdateContentHolder(retValue);

}

RadEditorToolPart.prototype.UpdateContentHolder =

function(newContent)

{

var contentHolderElement = document.getElementById(this.ContentHolderId);

if($telerik.isSafari && typeof(contentHolderElement.innerText) != "undefined")

{

contentHolderElement.innerText = newContent;

}

else

{

contentHolderElement.value = newContent;

}

RadEditorToolPart.prototype.OnEditorUpdate =

function()

{

this.UpdateContentHolder($find(inPageEditor).get_html(true));

document.forms[MSOWebPartPageFormName].MSOTlPn_Button.value='save';

return true;

}

RadEditorToolPart.prototype.OnEditorApply =

function()

{

this.UpdateContentHolder($find(inPageEditor).get_html(true));

document.forms[MSOWebPartPageFormName].MSOTlPn_Button.value='apply';

return true;

}

--------------------------------------

--------------------------------------
2) MOSSEditorTools.js
--------------------------------------

var

RadE_HasRules = false;

Type.registerNamespace("Telerik.Web.UI.Editor");

(typeof (Telerik.Web.UI.Editor.CommandList) == "undefined")

Telerik.Web.UI.Editor.CommandList = {};

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;

}

function

OnClientLoad(editor, args) {

debugger;

//alert('OnClientLoad');

//alert(editor);

//alert(editor.get_filtersManager);

editor.get_filtersManager.add(

new MyFilter());

}

MyFilter = function() {

alert('123');

MyFilter.initializeBase(this);

this.set_isDom(true);

this.set_enabled(true);

this.set_name("RadEditor filter");

this.set_description("RadEditor filter description");

}
MyFilter.prototype =

{

getHtmlContent: function(contentElement) {

//You can find the problem div elements and remove them here.

alert(

'hi');

return contentElement;

}

MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);

--------------------------------------

Regards
Sudhanshu

answered on 14 Oct 2011, 08:08 AM

Hi Sudhanshu,

Could you confirm which version of Telerik.Web.UI is used in your MOSS site. You can check this by reviewing the web.config file of the site. Send me the SafeControl and dependentAssembly(if there are any) elements, which regard Telerik.Web.UI. Also in the provided screen shot I can tell that the shown methods are not part of the RadEditor's client API. It will be best if you are able to send me a live URL, where I can actually see the issue. You can send the test credentials at clientservice@telerik.com. Just mention the forum id in the mail.

All the best,
Stanimir
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 14 Oct 2011, 11:36 AM

Hi Stanimir
The tags you have asked for are the following.

assemblies>

add assembly="Telerik.Web.UI, Version=2010.1.309.20, Culture=neutral, PublicKeyToken=121FAE78165BA3D4" />

</assemblies>
-------------------------------------------------------
-------------------------------------------------------

</dependentAssembly>

</assemblyBinding>

</runtime>
-------------------------------------------------------
-------------------------------------------------------

SafeControl Assembly="Telerik.Web.UI, Version=2010.1.309.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TypeName="*" Safe="True" />

-------------------------------------------------------
-------------------------------------------------------
Regards
Sudhanshu Kaushik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Extra div gets created in RadHTMLField on publishing page

17 Answers, 1 is accepted