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

UI Issues in a SharePoint 2013 WCM scenario

18 Answers 103 Views
Sharepoint Integration
This is a migrated thread and some comments may be shown as answers.
Ken
Top achievements
Rank 1
Ken asked on 03 Jun 2015, 04:07 AM

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

Sort by
0
Ken
Top achievements
Rank 1
answered on 03 Jun 2015, 04:11 AM

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,

0
Ken
Top achievements
Rank 1
answered on 03 Jun 2015, 04:32 AM

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 ...

0
Danail Vasilev
Telerik team
answered on 08 Jun 2015, 03:31 PM
Hello Rajesh,

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
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 Feedback Portal and vote to affect the priority of the items
0
Danail Vasilev
Telerik team
answered on 09 Jun 2015, 07:08 AM
Hi Rajesh,

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
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 Feedback Portal and vote to affect the priority of the items
0
Ken
Top achievements
Rank 1
answered on 10 Jun 2015, 09:41 PM

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

0
Ken
Top achievements
Rank 1
answered on 10 Jun 2015, 09:45 PM

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

0
Ken
Top achievements
Rank 1
answered on 10 Jun 2015, 10:18 PM

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

 

0
Danail Vasilev
Telerik team
answered on 15 Jun 2015, 03:17 PM
Hi 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
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 Feedback Portal and vote to affect the priority of the items
0
Ken
Top achievements
Rank 1
answered on 16 Jun 2015, 12:15 AM

Hi Danail,

It worked for me, but there are others for whom the issue still exists.

Thanks,

Rajesh

0
Danail Vasilev
Telerik team
answered on 17 Jun 2015, 07:20 AM
Hello 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
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 Feedback Portal and vote to affect the priority of the items
0
Ken
Top achievements
Rank 1
answered on 23 Jun 2015, 02:05 AM

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

0
Ken
Top achievements
Rank 1
answered on 25 Jun 2015, 02:59 PM

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

0
Danail Vasilev
Telerik team
answered on 25 Jun 2015, 03:58 PM
Hello Rajesh,

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
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 Feedback Portal and vote to affect the priority of the items
0
Ken
Top achievements
Rank 1
answered on 25 Jun 2015, 11:47 PM

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

0
Danail Vasilev
Telerik team
answered on 30 Jun 2015, 12:08 PM
Hello 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
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 Feedback Portal and vote to affect the priority of the items
0
Ken
Top achievements
Rank 1
answered on 01 Jul 2015, 04:22 AM

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

0
Danail Vasilev
Telerik team
answered on 01 Jul 2015, 05:49 AM
Hello 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
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 Feedback Portal and vote to affect the priority of the items
0
Ken
Top achievements
Rank 1
answered on 01 Jul 2015, 06:53 AM

Hi Danail,

I have submitted a support ticket with the ID: 949143 with the videos attached.

Thanks,

Rajesh

Tags
Sharepoint Integration
Asked by
Ken
Top achievements
Rank 1
Answers by
Ken
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or