UI Issues in a SharePoint 2013 WCM scenario

19 posts, 0 answers
  1. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 02 Jun 2015 Link to this post

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

     

     

     

     

     

     

  2. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 02 Jun 2015 in reply to Ken Link to this post

    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,


  3. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 02 Jun 2015 in reply to Ken Link to this post

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

  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 08 Jun 2015 Link to this post

    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
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 09 Jun 2015 Link to this post

    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
  6. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 10 Jun 2015 in reply to Danail Vasilev Link to this post

    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

  7. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 10 Jun 2015 in reply to Danail Vasilev Link to this post

    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

  8. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 10 Jun 2015 in reply to Danail Vasilev Link to this post

    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

     

  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 15 Jun 2015 Link to this post

    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
  10. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 15 Jun 2015 in reply to Danail Vasilev Link to this post

    Hi Danail,

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

    Thanks,

    Rajesh

  11. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 17 Jun 2015 Link to this post

    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
  12. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 22 Jun 2015 in reply to Danail Vasilev Link to this post

    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

  13. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 25 Jun 2015 in reply to Ken Link to this post

    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

  14. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 25 Jun 2015 Link to this post

    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
  15. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 25 Jun 2015 in reply to Danail Vasilev Link to this post

    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

  16. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 30 Jun 2015 Link to this post

    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
  17. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 30 Jun 2015 in reply to Danail Vasilev Link to this post

    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

  18. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 01 Jul 2015 Link to this post

    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
  19. Ken
    Ken avatar
    13 posts
    Member since:
    Nov 2014

    Posted 01 Jul 2015 in reply to Danail Vasilev Link to this post

    Hi Danail,

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

    Thanks,

    Rajesh

Back to Top