RadEditor in Sitecore - pasteHtml changing the html

6 posts, 0 answers
  1. Maciej
    Maciej avatar
    3 posts
    Member since:
    Jan 2019

    Posted 31 Jan Link to this post

    We have been trying to extend the Rich Text Editor built into Sitecore 9, but have encountered a problem with the pasteHtml method. Trying to insert this snippet:

    <blockquote>
        <p>Quote Text</p>
    </blockquote>
    <cite>Quote Author</cite>

    results in:

    <p>Quote Text</p>
    <blockquote></blockquote><cite>Quote Author</cite>

    Is there anything that can be done to fix this behaviour?

  2. Rumen
    Admin
    Rumen avatar
    14098 posts

    Posted 31 Jan Link to this post

    Hello Maciej,

    I tried to reproduce the reported issue with default configuration of the latest version of the control, but without success.

    You can see my test in the attached video recorded in Edge, Chrome and Firefox (latest versions).

    I also attached my project so that you can test on your side.

    Best regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Maciej
    Maciej avatar
    3 posts
    Member since:
    Jan 2019

    Posted 31 Jan Link to this post

    Hi Ruben,

    Thanks for the quick reply. As far as I know, Sitecore uses version 2017.2.711. I have investigated the issue and found that the markup is first inserted just fine, but later modified during calls to applyFix(...), _fixNestedParagraphs(...) and _unwrapElement(...) functions. Is there any way to alter this behaviour?

  4. Rumen
    Admin
    Rumen avatar
    14098 posts

    Posted 04 Feb Link to this post

    HI Maciej,

    You can disable the ConvertToXhtml filter which should solve the problem in the older version:

    RadEditor1.DisableFilter(Telerik.Web.UI.EditorFilters.ConvertToXhtml);

    You can also disable it through the ContentFilters property.


    Best regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Maciej
    Maciej avatar
    3 posts
    Member since:
    Jan 2019

    Posted 04 Feb in reply to Rumen Link to this post

    Hi Rumen,
    Thanks for the reply. Unfortunately, disabling the filter did not solve the issue.

    Kind Regards,
    Maciej
  6. Rumen
    Admin
    Rumen avatar
    14098 posts

    Posted 04 Feb Link to this post

    Hi Maciej,

    In this case, I can see two different approaches:
    • contact Sitecore support and ask them how you can upgrade the Telerik.Web.UI.dll to the latest version in their CMS system - this is the recommended approach since we can implement fixes for the upcoming versions only. Please check out this article: Bug Fixes.
    • or override the applyFix or _fixNestedParagraphs functions on your own and resolve the issue in the older version:


      <script>
          var BLOCK_ELEMENTS = "div,table,ol,ul,h1,h2,h3,h4,h5,h6,hr";
          var PARAGRAPH = "p";
          var ANCHOR = "a";
          var browser = Telerik.Web.Browser;
          var $T = Telerik.Web.UI;
          var $E = $T.Editor;
       
          $E.NestedElementsFix.prototype.applyFix = function (elements) {
              alert(1)
              var that = this;
       
              that.blockElements = elements || that.getBlockElements();
       
              // for example comment out some of the functions
              //that._fixNestedParagraphs();
              //that._unwrapBlockElements();
          }
       
          //or override the functionality inside the _fixNestedParagraphs one
          $E.NestedElementsFix.prototype._fixNestedParagraphs = function () {
              var context = this.context;
              var paragraphs = null;
              if (utils.isEditorContentArea(context)) {
                  paragraphs = context.getElementsByTagName(PARAGRAPH);
              }
              else {
                  var parentBlockElement = this._getParentBlockElement(context);
                  if (utils.isTag(parentBlockElement, PARAGRAPH)) {
                      paragraphs = [parentBlockElement];
                  }
              }
       
              if (!paragraphs) {
                  return;
              }
       
              for (var i = paragraphs.length - 1; i >= 0; i--) {
                  var parentParagraph = paragraphs[i],
                      $childParagraphs = this._getParagraphs(parentParagraph);
                  for (var j = $childParagraphs.length - 1; j >= 0; j--) {
                      this._unwrapElement($childParagraphs[j], parentParagraph);
                  }
                  if ($childParagraphs.length && utils.isNodeEmptyRecursive(parentParagraph)) {
                      this._removeBlockElement(parentParagraph);
                  }
              }
          }
      </script>
      <telerik:RadEditor ID="RadEditor1" runat="server">
          <Content>
              <blockquote>
                  <p>Quote Text</p>
              </blockquote>
              <cite>Quote Author</cite>
          </Content>
      </telerik:RadEditor>


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top