Hi,
I'm using a subclassed RadHtmlField field control on page layouts in a SharePoint 2013 environment to include the editor. Most of what I need works except for the following:
1. When I toggle to the full screen mode, selecting the 'Insert Link' option opens up the 'Select an Asset' SharePoint dialog. This all works fine, but when a selection is made & the dialog closes, the underlying RadEditor goes back to normal mode with the toggle full screen button depressed. This causes the page to sort of freeze until the full screen toggle button is raised again.
2. I add content such as this:
<
div
>
<
div
class
=
"tile tile-image-top-left"
>
<
div
data-collapse
=
"mobile"
data-collapse-default
=
"close"
>
<
button
data-collapse
=
"control"
data-desktop
=
"exclude"
>Top Left</
button
>
<
div
data-collapse
=
"content"
>
<
div
class
=
"tile-image"
>
<
img
alt
=
"Top Left"
src
=
"images/icon-tile-dummy-image.png"
/>
</
div
>
<
div
class
=
"tile-title tile-title-background"
>
<
p
>Top Left</
p
>
</
div
>
<
div
class
=
"tile-description"
>
<
p
>This demonstrates how a tile can be used for diplaying an image on the top left of the container. Any text around the tile image will wrap around the image associated with the tile.</
p
>
<
p
>Additionally, the tile can contain HTML content including hyperlinks and other images if required.</
p
>
<
p
><
ul
><
li
><
a
href
=
"#"
>Browse to website 1</
a
></
li
></
ul
></
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
But the editor removes the <button> element.
Here are the contents of the files that you might find useful:
Sub-classed class
public
class
CustomRadHtmlField : Telerik.SharePoint.FieldEditor.RadHtmlField
{
#region Protected Methods
protected
override
void
OnLoad(EventArgs e)
{
base
.OnLoad(e);
ConfigureRadHtmlField();
}
protected
override
bool
AllowFirstFocus {
get
{
return
false
; } }
#endregion
#region Internal Methods
internal
static
void
ConfigureRadEditorControl(
ref
SPRadEditor editor)
{
editor.ConfigFile =
"/_layouts/15/divportals/telerik/configfile.xml"
;
editor.ToolsFile =
"/_layouts/15/divportals/telerik/toolsfile.xml"
;
editor.EnsureToolsFileLoaded();
editor.ContentAreaMode = EditorContentAreaMode.Iframe;
editor.EnableFilter(EditorFilters.ConvertTags );
editor.DisableFilter(EditorFilters.EncodeScripts | EditorFilters.RemoveScripts);
editor.EditModes = EditModes.All;
editor.ToolbarMode = EditorToolbarMode.RibbonBarPageTop;
editor.NewLineMode = EditorNewLineModes.Div;
editor.ContextMenus.Clear();
editor.EnableEmbeddedScripts =
true
;
editor.EnableEmbeddedSkins =
true
;
}
#endregion
#region Private Methods
private
void
ConfigureRadHtmlField()
{
this
.AllowScripts =
false
;
this
.AllowSpecialTags =
false
;
this
.AllowFonts =
false
;
CustomRadHtmlField.ConfigureRadEditorControl(
ref
this
.radEditorControl);
}
#endregion
}
ConfigFile.xml
<
configuration
>
<
property
name
=
"Skin"
>Default</
property
>
<
property
name
=
"ToolbarMode"
>Default</
property
>
<
property
name
=
"ContentAreaMode"
>IFRAME</
property
>
<
property
name
=
"DocumentsFilters"
>
<
item
>*.*</
item
>
</
property
>
<
property
name
=
"OnClientLoad"
>setAutoWidthForRadEditorControls</
property
>
<
property
name
=
"ImagesPaths"
>
<
item
>SiteCollectionImages</
item
>
</
property
>
<
property
name
=
"MaxDocumentSize"
>524288000</
property
>
<
property
name
=
"MaxImageSize"
>524288000</
property
>
<
property
name
=
"MaxFlashSize"
>524288000</
property
>
<
property
name
=
"MaxMediaSize"
>524288000</
property
>
<
property
name
=
"MaxSilverlightSize"
>524288000</
property
>
<
property
name
=
"StripFormattingOptions"
>MSWordRemoveAll,Css,Font</
property
>
</
configuration
>
setAutoWidthForRadEditorControls JavaScript function
function
setAutoWidthForRadEditorControls() {
// Set max width for all rad editor controls that appear in the main content place holder
var
radEditorControl = $(
".radEditorControl"
);
if
(radEditorControl) {
radEditorControl.find(
".reContentArea"
).width(Math.ceil(radEditorControl.width() * 0.98));
}
}
18 Answers, 1 is accepted
Sorry I may have posted too early.... The version I am using is RadEditorSharePoint 7.6.0.0.
Any help with resolving these issues is greatly appreciated.
Thanks,
UPDATE:
I was able to fix the <button> element being stripped by disabling the 'ConvertToXhtml' filter in the sub-classed field control like so:
editor.DisableFilter(EditorFilters.EncodeScripts | EditorFilters.RemoveScripts | EditorFilters.ConvertToXhtml);
Issue#2 still exists ...
Thank you for reporting this issue to us.
We will make a further investigation on the matter and provide an update in this forum.
For the time being you can use the following workaround:
1) Open the following JavaScript file:
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\wpresources\RadEditorSharePoint\7.6.1.0__1f131a624888eeed\Resources\SPEditorTools.js
where the highlighted text is the version of the editor.
2) Add the "editor.toggleScreenMode()" method two times in the at the end of the following callback:
configObj.ReturnCallback =
function
(url, text, config, newAsset) {
elemLink.href = assetPickerValue.value;
document.body.removeChild(assetPickerValue);
if
(inserting && url) {
var
images = elemLink.getElementsByTagName(
"img"
);
var
textContent = elemLink.innerText !=
null
? elemLink.innerText : elemLink.textContent;
if
(textContent ===
""
&& (!images || !images.length)) {
if
(linkContent.match(/</)) {
Telerik.Web.UI.Editor.Utils.setElementInnerHtml(elemLink, linkContent);
}
else
{
var
textNode = elemLink.ownerDocument.createTextNode(linkContent || text);
elemLink.appendChild(textNode);
}
}
if
(editorSelection) editorSelection.selectRange(currentRange);
editor.pasteHyperLink(elemLink,
"InsertLink"
);
if
(editor.isFullScreen() ==
true
) {
editor.toggleScreenMode();
editor.toggleScreenMode();
}
}
};
I have also updated your Telerik points for reporting this issue to us.
Regards,
Danail Vasilev
Telerik
I have logged this issue issue in our feedback portal here (http://feedback.telerik.com/Project/108/Feedback/Details/160653), so that you can monitor, comment and vote on it.
I have also updated the workaround in this forum as well as in the public feedback by adding a flag to check the fullscreen mode.
Regards,
Danail Vasilev
Telerik
Hi Danail,
Thanks for the update. Given we have a SharePoint farm, how do you propose for these changes to be made? Currently, we deploy the "RadControlsSP.wsp" solution and everything is self contained... Will making your proposed changes manually on each of the front end servers cause an issue when a future upgrade that includes the fix is applied? My concern is based around whether the deployment of "RadControlsSP.wsp" in the later version will overwrite the JS files.
Thanks,
Rajesh
Hi Danail,
We currently deploy the "RadControlsSP.wsp" as part of our deployment and this package contains all the necessary artefacts. Now, after we apply your proposed changes and decide to upgrade to a later version of Telerik that has the fix included, will the solution (RadControlsSP.wsp) overwrite the JS file? Obviously, we would prefer it did and that there will be no need to modify/replace this file manually again .. If you can please confirm that, we can take appropriate action as part of our deployment.
Thanks,
Rajesh
Danail,
Your proposed JS fix doesn't seem to work for me. I replaced the JS file and reset the IIS server just in case, but that didn't help either.
Thanks,
Rajesh
Can you try to clear the cache of your browser after you apply the fix and restart the IIS and then tell me whether it helps?
Regards,
Danail Vasilev
Telerik
Hi Danail,
It worked for me, but there are others for whom the issue still exists.
Thanks,
Rajesh
Generally speaking the clearing of the browser cache is not something the developer has control over and it depends entirely on the client.
As for the current issue, it has already been prioritized, so that if everything is fine it may be fixed for the upcoming Q2 2015 release, scheduled for the end of this month.
Regards,
Danail Vasilev
Telerik
Hi Danail,
I was caught up with something else and couldn't reply earlier. Unfortunetly, the issue I was having with <button> tags being stripped by the editor still exists... Here is how I can replicate the issue:
* I have a SharePoint 2013 web part page with the subclassed control as mentioned in this post.
* I go into HTML mode and enter <button>Test</button>.
* I click on the link "Add a web part" as present on the web part page and add any web part. I then chose to "Edit the web part" using the web part's drop down menu and in the web part configuration section, I click "Apply" or "OK". This cause a postback of the page.
* The content in the editor has now changed to "Test" without the button tags..
Any ideas why this is happening? I have set the following the config file during troubleshooting without any success:
<property name="AllowScripts">true</property>
<property name="ConvertToXHtml">false</property>
<property name="ContentFilters">None</property>
<property name="AllowSpecialTags">true</property>
Thanks,
Rajesh
Hi Danail,
Can I please ask for the issues to be looked at with some sort of urgency as we are close to a production deployment, but are not able to go ahead due to the issues mentioned in my post? I don’t mean to be pushy and your help is greatly appreciated.
Thanks,
Raj
I am not able to reproduce the mentioned issue with the latest Telerik UI for ASP.NET AJAX SP2013 Web Parts. You can watch the short video test in the attachment and then tell me if I am missing something.
Regards,
Danail Vasilev
Telerik
Hi Danail,
If I use the editor in the way you've demonstrated in the video, it works for us too. That is, simply adding the button and saving the page. As I mentioned in my post, the issue shows up when you have added the tag and then add a web part that causes a post back when setting the properties of the web part. Here are the steps that I've followed to replicate the issue:
1. Create a web part page
2. Add a button tag to the editor content area (I have used a subclassed RadHtmlField as mentioned at the begiing of the post) of the page and save it. After you have saved the page with a button tag in the content, go back to editing the page
3. In edit mode, add a web part to any of the web part zones. Select the "Edit web part' option from the added web part and in the web part's editor, set any properties and click the OK button. This will cause the page to post back. Now inspect the content of the editor. This is where, in our environment, the issue occurred.
Thanks for looking into this,
Rajesh
I am still unable to reproduce the mentioned issue - a short video is attached for your reference.
Can you please record a video that showcases the exact steps of reproducing the issue and then provide it back to us, so that we can proceed further with the investigation? You can use for example the free Jing software for the recording.
Regards,
Danail Vasilev
Telerik
Hi Danail,
I am unable to upload the videos as part of this post. Is there an alternative method you use to receive such files? The files I am trying to upload are AVI files and a total of 8MB.
Thanks,
Rajesh
In order to upload a file you can either open a support ticket or post the link to the file in the forum post.
Regards,
Danail Vasilev
Telerik
Hi Danail,
I have submitted a support ticket with the ID: 949143 with the videos attached.
Thanks,
Rajesh