Click here to Skip to main content
15,071,921 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi guys

I was trying to create a rich text editor for fun and learning purposes myself from scratch, and I have a minor problem.


I've come as far as making it function as expected but I have a small UI glitch. I want the text area inside the Iframe to auto-resize its height as user types I don't like how user has to scroll to view the full document I feel it removes the 'What u see is what you get' element when I only see half the picture. I want it to be kinda like the one I'm using now here but all I get is this:


https://docs.google.com/file/d/0B0xtvsdSbHMnNVFoRDc4Y3VhWFk/edit?usp=sharing[^]

And here's the html code

HTML
<blockquote class="FQ"><div class="FQA">Quote:</div><div id="bio" >
  <h1>Biography</h1>
                Enter Bio:
             <div id="txtEd">
            <form id="bioForm" method="post" action=""  >
            <ul>                                              
               <div id="wysiwyg_cp">
                 <a href="java<!-- no -->script:void(null)"  önclick="iBold();" title="bold"><img src="Images/bold.gif" alt="bold" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iUnderline();" title="Underline"><img src="Images/underline.gif" alt="Underline" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iItalic();" title="Italics"><img src="Images/italic.gif" alt="Italics" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iFontSize();" title="Font Size"><img src="Images/icon_increase_font_size.gif" alt="Font Size" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="show_menu();" title="Font Color"><img src="Images/font_color_icon.jpg" alt="Font Color" height="30" width="32"></a>
                 <div id="dropdown_menu" class="hidden_menu">
                     <ul>
                         <li href="javascript:void(null);"  önclick="iForeColor('blue');" style="color: blue;">Blue</li>
                         <li href="javascript:void(null)"  önclick="iForeColor('aqua');" style="color: aqua;">Aqua</li>
                         <li href="javascript:void(null)"  önclick="iForeColor('blueviolet');" style="color: blueviolet;">blue violet</li>
                         <li href="javascript:void(null)"  önclick="iForeColor('brown');" style="color: brown;">Brown</li>           
                     </ul>
                 </div> 
                  
                 <a href="java<!-- no -->script:void(null)"  önclick="iHorizontalRule();" title="Horizontal rule"><img src="Images/horizontalrule.gif" alt="Horizontal Rule" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iUnorderedList();" title="Unordered List"><img src="Images/bulletedlist.gif" alt="Unordered List" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iOrderedList();" title="Ordered List"><img src="Images/numberedlist.gif" alt="Ordered List" height="30" width="32"></a>
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iLink();" title="Link"><img src="Images/add-link.gif" alt="Link" height="30" width="32"></a>
                 
                   
                 <a href="java<!-- no -->script:void(null)"  önclick="iUnLink();" title="Remove Link"><img src="Images/link_remove.gif" alt="Remove Link" height="30" width="32"></a>
                  
                 <a href="java<!-- no -->script:void(null)"  önclick="iImage();" title="Add Image"><img src="Images/camera-icon.gif" alt="Add Image" height="27" width="38"></a>
                
              </div>
              <!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
              <textarea style="display:none;  box-sizing: content-box; -moz-box-sizing: border-box;" name="myTextArea" id="myTextArea" cols="100" rows="300"></textarea>
              <iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:100%; height:100%; margin-bottom: 50%;"></iframe>
              <!-- End replacing your normal textarea -->
                          
              
              <a href="java<!-- no -->script:void(null)"  önclick="submit_form();" title="Save Bio" class="txtSavebtn" />Save </a>
		             
            </ul>
                
            </form>
            </div>
            </div></blockquote>


When the user clicks on a link to edit Bio that hides all other div's on the page and show the dio div this js function is called:

JavaScript
<blockquote class="FQ"><div class="FQA">Quote:</div>var $divState ={};
       function showhide($id){
           if(document.getElementById){
               var $divid = document.getElementById($id);
               $divState[$id] = ($divState[$id]) ? false : true;
               for (var $div in $divState){
                   if ($divState[$div] && $div != $id){
                       document.getElementById($div).style.display = 'none';
                       $divState[$div] = false;
                   }
               }
               $divid.style.display = ($divid.style.display == 'block' ? 'none' : 'block');
           }
           if($id == 'bio' ) {
            var el = document.getElementById('wysiwyg_cp');
            el.style.display = 'block';
            
            var el = document.getElementById('txtEd');
            el.style.display = 'block';
            
            iFrameOn();
            }
       }

function iFrameOn(){
	richTextField.document.designMode = 'On';
}

</blockquote>


Thanks in advance ...
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900