Rad Editor content is not coming in <p> tag for single line text

6 posts, 1 answers
  1. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 22 Jan Link to this post

    Rad Editor content is not coming in <p> tag for single line text.

    In Current Version 2018.2.710.45

    While I put single line text like "Test" in rad editor and getting value in debug mode as "Test" 

     

    In Previous Version 2013.2.717.45
    While I put single line text like "Test" in rad editor and getting value in debug mode as "<p>Test</p>" 

     

    My expected result is "<p>Test</p>"  in this version 2018.2.710.45;

     

    This is happening only for single line text .

     

    Please give any solution.

     

  2. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 24 Jan Link to this post

    Hi Rajiv,

    There is a content filter named FixEnclosingP, which strips the empty p tag which Internet Explorer automatically puts in an editabble iframe - as the content area of RadEditor.

    This filter is enabled by default and you can disable it by setting 

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

    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. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 25 Jan in reply to Rumen Link to this post

    Hi Rumen,

    Thanks for reply.

    It is right and its working for version 2013.2.717.45 .

    But after upgrade from 2013.2.717.45 to 2018.2.710.45 it's not working..

    As per my post i want the single line text in "<p>" tag like that "<p>Test</p>"  but its coming like that "Test".

     

    My conent filter setting is given below.

    ContentFilters="ConvertToXhtml".

     

    What should i need to do for O/P:"<p>Test</p>" in version  2018.2.710.45 ?

    If you have any solution then please update me.

     

    Thanks.

  4. Answer
    Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 28 Jan Link to this post

    Hello Rajiv,

    Here you are a custom filter implementation which takes care of adding the paragraph tag surrounding over the single line or empty content area:

    <script>
        var $T = Telerik.Web.UI;
        $E = $T.Editor;
        var utils = $E.Utils;
        var editorObject;
     
        function OnClientLoad(editor, args) {
            editorObject = editor;
            editor.get_filtersManager().add(new RadEditorCustomFilter());
        }
     
        RadEditorCustomFilter = function () {
            RadEditorCustomFilter.initializeBase(this);
            this.set_isDom(true);
            this.set_enabled(true);
            this.set_name("RadEditor filter");
            this.set_description("RadEditor filter description");
        }
        RadEditorCustomFilter.prototype =
        {
            getHtmlContent: function (contentElement) {
                 
                var bodyElement = utils.isTag(contentElement, "html") ?
                    contentElement.getElementsByTagName("BODY")[0] : contentElement;
                var bodyFirstChild = bodyElement ? bodyElement.firstChild : null;
                debugger
                if (!utils.isTag(bodyFirstChild, "p") && bodyElement.childNodes.length == 1 && !utils.hasAttributes(bodyFirstChild)) {
                    var paragraph = editorObject.get_document().createElement("p");
                    paragraph.appendChild(bodyFirstChild);
                    contentElement.appendChild(paragraph);
                }
     
                else if (editorObject.get_html() == "") {
                     
                    var paragraph = editorObject.get_document().createElement("p");
                    var textNode = editorObject.get_document().createTextNode("");
                    paragraph.appendChild(textNode);
                    contentElement.appendChild(paragraph);
                }
     
                return contentElement;
            }
        }
        RadEditorCustomFilter.registerClass('RadEditorCustomFilter', Telerik.Web.UI.Editor.Filter);
     
     
    </script>
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
        <Content></Content>
    </telerik:RadEditor>


    You can further enhance it, if needed.

    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. Rajiv
    Rajiv avatar
    16 posts
    Member since:
    Aug 2018

    Posted 29 Jan in reply to Rumen Link to this post

    Thanks Rumen.

    Its working fine for me.

  6. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 29 Jan Link to this post

    Glad that the solution helps!

    Keep the good work.

    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