Loading ...
Sorry, an error occurred while loading the content.

Rich Text Editor does not render correctly if reset-fonts-grids.css is included

Expand Messages
  • peychevi
    Hello, Is there some known issue with Rich Text Editor when reset-fonts-grids.css is included? I have created RTE and test div. I set the same HTML, which RTE
    Message 1 of 3 , Sep 30 12:06 PM
    • 0 Attachment
      Hello,

      Is there some known issue with Rich Text Editor when reset-fonts-grids.css is included?
      I have created RTE and test div. I set the same HTML, which RTE prepared, to this div. Unfortunately, in this test div the html does not render correctly, but in RTE it does.

      The text renders correctly if "reset-fonts-grids.css" is not included.

      Below is an example HTML page.

      !---Cut below and save as test.html. Tested with FF3 (GNU/Linux)---!

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

      <html>
        <head>
          <title></title>
          <meta content="">
         
          <!-- If you remove reset-fonts-grids the text is being displayed (almost) correctly -->
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
         
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css">
          <!-- Utility Dependencies -->
          <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
          <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
          <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
          <script src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script>
          <script src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
          <script src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
          <!-- Source file for Rich Text Editor-->
          <script src="http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js"></script>

         
          <style></style>
        </head>
        <body class="yui-skin-sam">
       
        <textarea name="msgpost" id="msgpost" cols="50" rows="10">
          <ul><li>test1</li><li>test2</li></ul></li>Normal text. <strong>Bold text</strong>. <em>Italic text.</em><br><ol><li>test3</li><li>test4</li></ol></li>
        </textarea>
       
          <br/>
         
          <input type="button" onmousedown="setCurrentData();" value="Set data" />   
         
          <div id="output1" style="overflow: auto; width: 522px; height: 150px; position:relative; border: 2px solid blue;">
          </div>

          <script type="text/javascript">
         
          var myEditor = new YAHOO.widget.SimpleEditor('msgpost', {
              height: '150px',
              width: '522px',
              dompath: true, //Turns on the bar at the bottom
              animate: true //Animates the opening, closing and moving of Editor windows
          });
         
          var output1 = document.getElementById( 'output1' );
         
          myEditor.subscribe( "editorContentLoaded", function(){
              setCurrentData();
          });
         
          myEditor.render();
         
          function setCurrentData(){
              //Put the HTML back into the text area
              myEditor.saveHTML();

              //The var html will now have the contents of the textarea
              var html = myEditor.get('element').value;

              output1.innerHTML = html;
          }
         
          </script>
        </body>
      </html>


      ------------------------------------------------------------
    • dav.glass@yahoo.com
      peychevi -- The Rich Text Editor will try to output non-styled HTML. So if you are putting a on the page, then you are including reset,
      Message 2 of 3 , Sep 30 12:19 PM
      • 0 Attachment
        peychevi --

        The Rich Text Editor will try to output "non-styled" HTML.

        So if you are putting a <ul><li></li></ul> on the page, then you are including reset, you will need to style it on your own.
        Since reset is wiping the styling from the default <ul><li>'s.

        You could apply base.css to it:
        http://developer.yahoo.com/yui/base/

        Dav
         
        Dav Glass
        dav.glass@...
        blog.davglass.com



        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: peychevi <iliyan.peychev@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Tuesday, September 30, 2008 12:06:26 PM
        Subject: [ydn-javascript] Rich Text Editor does not render correctly if reset-fonts-grids.css is included

        Hello,

        Is there some known issue with Rich Text Editor when reset-fonts-grids.css is included?
        I have created RTE and test div. I set the same HTML, which RTE prepared, to this div. Unfortunately, in this test div the html does not render correctly, but in RTE it does.

        The text renders correctly if "reset-fonts-grids.css" is not included.

        Below is an example HTML page.

        !---Cut below and save as test.html. Tested with FF3 (GNU/Linux)---!

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

        <html>
          <head>
            <title></title>
            <meta content="">
           
            <!-- If you remove reset-fonts-grids the text is being displayed (almost) correctly -->
            <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
           
            <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css">
            <!-- Utility Dependencies -->
            <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
            <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
            <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
            <script src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script>
            <script src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
            <script src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
            <!-- Source file for Rich Text Editor-->
            <script src="http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js"></script>

           
            <style></style>
          </head>
          <body class="yui-skin-sam">
         
          <textarea name="msgpost" id="msgpost" cols="50" rows="10">
            <ul><li>test1</li><li>test2</li></ul></li>Normal text. <strong>Bold text</strong>. <em>Italic text.</em><br><ol><li>test3</li><li>test4</li></ol></li>
          </textarea>
         
            <br/>
           
            <input type="button" onmousedown="setCurrentData();" value="Set data" />   
           
            <div id="output1" style="overflow: auto; width: 522px; height: 150px; position:relative; border: 2px solid blue;">
            </div>

            <script type="text/javascript">
           
            var myEditor = new YAHOO.widget.SimpleEditor('msgpost', {
                height: '150px',
                width: '522px',
                dompath: true, //Turns on the bar at the bottom
                animate: true //Animates the opening, closing and moving of Editor windows
            });
           
            var output1 = document.getElementById( 'output1' );
           
            myEditor.subscribe( "editorContentLoaded", function(){
                setCurrentData();
            });
           
            myEditor.render();
           
            function setCurrentData(){
                //Put the HTML back into the text area
                myEditor.saveHTML();

                //The var html will now have the contents of the textarea
                var html = myEditor.get('element').value;

                output1.innerHTML = html;
            }
           
            </script>
          </body>
        </html>


        ------------------------------------------------------------
      • peychevi
        ... Hm, is there some special reason for that? ... including reset, you will need to style it on your own. ... As I see, RTE is using iframe. Because I don t
        Message 3 of 3 , Sep 30 1:47 PM
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
          >
          > peychevi --
          >
          > The Rich Text Editor will try to output "non-styled" HTML.

          Hm, is there some special reason for that?

          > So if you are putting a <ul><li></li></ul> on the page, then you are
          including reset, you will need to style it on your own.
          > Since reset is wiping the styling from the default <ul><li>'s.

          As I see, RTE is using iframe. Because I don't want to exclude
          reset.css or style <ul><li> on my own, I think a (simple) solution
          could be to load the html, which RTE produces in another iframe,
          placed in my test div, correct? Of course, I will not include
          reset.css, exactly as RTE does.

          > You could apply base.css to it:
          > http://developer.yahoo.com/yui/base/
          >
          > Dav

          Iliyan Peychev
        Your message has been successfully submitted and would be delivered to recipients shortly.