function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
mworldmworld 

Editable iFrames / HTML Editor in VF/SF Page

My users would like a simple HTML editor on a page so that they can edit filed content that will be posted to the web but not have to know HTML. This seems like a pretty straighhtforward request and I borrowed some code that allows toggling back and forth between text and HTML. This code works fine in an html page when displayed in Explorer or Firefox but fails to do anything when it's part of a Salesforce page. I wonder if this is because of the iFrame that is the key to the whole thing? Is there a prohibition against editable iFrames within a salesforce page?
 
The code is below. I should note that while there are currently no apex tags in the code it made no difference when there were.
 
Mauricio
 
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> 
<head>
 <script src="/soap/ajax/12.0/connection.js" type="text/javascript"></script>   
 <script language="JavaScript">
  var viewMode = 1; // WYSIWYG
 
  function Init()
  {
   iView.document.designMode = 'On';
  }

  function selOn(ctrl)         
  {           
   ctrl.style.borderColor = '#000000';
   ctrl.style.backgroundColor = '#B5BED6';
   ctrl.style.cursor = 'hand';        
  }
 
  function selOff(ctrl)
  {
   ctrl.style.borderColor = '#D6D3CE';
   ctrl.style.backgroundColor = '#D6D3CE';        
  }

  function selDown(ctrl)
  {
   ctrl.style.backgroundColor = '#8492B5';
  }          
 
  function selUp(ctrl)
  {
   ctrl.style.backgroundColor = '#B5BED6';
  }          
 
  function doBold()
  {
   iView.document.execCommand('bold', false, null);
  }        
 
  function doItalic()
  {
   iView.document.execCommand('italic', false, null);
  }

  function doUnderline()
  {
   iView.document.execCommand('underline', false, null);
  }          
 
  function doBulList()
  {
   iView.document.execCommand('insertunorderedlist', false, null);
  }          
 
  function doToggleView()         
  {           
   if(viewMode == 1) // WYSIWYG            
   {                 
    iHTML = iView.document.body.innerHTML;                
    iView.document.body.innerText = iHTML;                                          
    
    // Hide all controls                 
    tblCtrls.style.display = 'none';                
    iView.focus();                  
    viewMode = 2; // Code            
   }            
   else // Code           
   {                 
    iText = iView.document.body.innerText;                 
    iView.document.body.innerHTML = iText;                  
    
    // Show all controls                 
    tblCtrls.style.display = 'inline';                 
    iView.focus();                  
    viewMode = 1; // WYSIWYG           
   }         
  }   
 </script>
 <style>
  .butClass { border: 1px solid; border-color: #D6D3CE; }
  .tdClass { padding-left: 3px; padding-top:3px; }
 </style>
</head>

<body onLoad="Init()"> 
 <table id="tblCtrls" width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE"> 
  <tr> 
   <td class="tdClass"> 
    <img alt="Bold" class="butClass" src="bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()"> 
    <img alt="Italic" class="butClass" src="italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()"> 
    <img alt="Underline" class="butClass" src="underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()"> 
    <img alt="Bulleted List" class="butClass" src="bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()"> 
   </td> 
  </tr> 
 </table> 
 <iframe id="iView" style="width: 415px; height:205px"></iframe> 
 <table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE"> 
  <tr> 
   <td class="tdClass" colspan="1" width="20%" align="right"> 
    <img alt="Toggle Mode" class="butClass" src="mode.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doToggleView()"> 
    &nbsp;&nbsp;&nbsp; 
   </td> 
  </tr> 
 </table> 
</body> 
</html>

 
dchasmandchasman
Have you tried using <apex:inputTextArea richText="true">? We've already integrated the Dojo rich text editor functionality natively into the <apex:inputTextArea> component - including built in bidirectional value binding!


Message Edited by dchasman on 05-26-2008 08:35 AM
mworldmworld
Somehow I misssed that! Thanks!
dchasmandchasman
I'm not surprised that you were unaware of it - the rich edit feature is not heavily advertised. We would really appreciate any feedback you have on it - both the good and the bad!