How to Preserve <pre> tag Line Break Formatting in TinyMCE

Why are <pre> tags not preserving line break formatting in TinyMCE?
by

I recently discovered an issue after I upgraded to TinyMCE 4.1.3 version text editor in my ASP.NET web pages that was causing the formatting of my <pre> tags to not keep its line break formating on PostBack.  At first I thought this might be a CSS issue or an HtmlEncoding issue however that wasn't the case for me.  

Before upgrading, I was previously running TinyMCE 3.xxx using the ASP.NET server control.  After upgrading to version 4.1.3, I need to make changes to TextBoxes on my ASP.NET pages.  What I came to realize is that when upgrading to the new version, I had left off my ASP.NET TextBoxes the following declaration: TextMode="Multiline". So the <pre> line break problem was caused because I had attached TinyMCE to TextBoxes in the default "SingleLine" mode, causing the <pre> tag to not preserve line breaks after posting back.  Once I added TextMode="Multiline" to the TextBoxes, the <pre> tag preserved its formatting and looked correct after postback and on pages. 

If you are not using ASP.NET, then be sure to use <textarea> with TinyMCE, instead of <input type="text">.  After some testing, here's what worked for me and what DID NOT work to get <pre> tags to preserve line break formatting with TinyMCE text editor in ASP.NET pages:

    <div>
        <!-- PRE line breaks work correctly with TinyMCE text editor -->
        <asp:TextBox ID="tbxTinymce" runat="server" CssClass="my-tinymce-default" TextMode="MultiLine"></asp:TextBox>  
        <!-- PRE line breaks work correctly with TinyMCE text editor  -->
        <textarea name="textarea" class="my-tinymce-default" ></textarea>

        <!-- PRE line breaks DO NOT preserve line break formatting -->
        <input id="Text1" type="text" class="my-tinymce-default"  />
        <!-- PRE line breaks DO NOT preserve line break formatting -->
        <asp:TextBox ID="TextBox1" runat="server" CssClass="my-tinymce-default"></asp:TextBox> 

    </div>

Also here's the <pre> tag CSS that I am currently using that helps with formatting line breaks in <pre> tags:

pre {
    overflow: auto;
    white-space: pre-wrap; /* CSS3 browsers  */ /* make code wrap */               
    white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
    white-space: -pre-wrap;                /* Opera 4 thru 6 */
    white-space: -o-pre-wrap;              /* Opera 7 and up */
    word-wrap: normal;                 /* IE 5.5+ and up */
	font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
    border: 1px solid #CCCCCC;
    background-color: #f0f9ff ; /*#EEEEEE  #FFFFF4;*/
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 0px;
}

 

 

 

 


0
0

Add your comment

by Anonymous - Already have an account? Login now!
Your Name:

Comment:
Enter the text you see in the image below
What do you see?
Can't read the image? View a new one.
Your comment will appear after being approved.

Related Posts


UPDATE: The better way to do this is to use TinyMCE "rel_list" in the javascript for TinyMCE as seen here. Rather than changing the code in the plugin.min.js file, as shown below (after this update). Also just to note that in TinyMCE version 4.5 they...  more »

If you've recently moved a Visual Studio.net web site project (wsp) or web application project(wap) to deploy on Internet Information Services 7 (IIS7) you may have discovered that your Tiny_MCE text editor no longer is showing up and getting the pop-up...  more »