Sign Up ›
  • Less
  • NEWBIE
  • 0 Points
  • Member since 2008
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 7
    Replies
9 replies

Hijacking the WYSIWYG editor on VF pages

You've developed a VF page, but the richtext edit, while cool, needs more... I wish that SFDC would've given us a way to "sneak" a look at the HTML contents that form the construct of the message/text that we're editing. So you look behind the scenes with firebug or chrome, then you'll see that SFDC's WYSIWYG editor is just their slightly customized instance of the FCK editor.
 
 
 
The code block:
<apex:inputTextarea value="{!inputValue}" id="theTextarea" richText="true" />
  gets expanded behind the scenes into a few sections:
  1. a div that contains a hidden config value
  2. an iframe that contains the editor
  3. ...and javascript section that calls the necessary parameters when the page is loaded.
Hence, it is possible to embed a second call to the javascript that creates the FCK editor - merely doing this will result in two editors on the screen in Mozilla and IE (chrome won't display duplicate ID field objects...). That is a start, and with a little massaging, you can write a function to get rid of the existing iframe containing the old editor and replace it with the new editor that you're calling.
The steps to do this aren't too bad.
 
How to do it
  1. Create your visual force page as you see fit. It goes without saying that you should have a rich text block linked to some textarea field in your object.
  2. Once you've created your page, test it. Using Chrome or Firebug, find out the ids of the divs that get created when the page runs. From the above example, id="theTextarea", might get turned into:
    • The iFrame: "j_id0:j_id2:editBlock:j_id33:theTextarea___Frame"
    • The config block: "j_id0:j_id2:editBlock:j_id33:theTextarea___Config"
    • The textarea: "j_id0:j_id2:editBlock:j_id33:theTextarea"
      (Honestly, you're just interested in the prefix, the "j_id0:j_id2:editBlock:j_id33:" section - You can append the divId and "__Frame", etc...)
  3. Go back to your visualforce page and add this script block directly under the <apex:inputTextarea> code block. 
    <script type="text/javascript">
 setTimeout("swap();",5000);
 function swap() {
  alert("Running function...");
 
  var origFrame = document.getElementById('j_id0:j_id2:editBlock:j_id33:theTextarea___Frame');
  alert("Removing iFrame");
  origFrame.parentNode.removeChild(origFrame);

  var configItem = document.getElementById('j_id0:j_id2:editBlock:j_id33:theTextarea___Config');
  alert("Removing config...");
  configItem.parentNode.removeChild(configItem);

  alert("Creating new editor...");
  var editor = new FCKeditor('j_id0:j_id2:editBlock:j_id33:theTextarea');
  editor.BasePath = '/apexpages/fckeditor/';
  editor.ReplaceTextarea();
 
  alert("Done...");
 }
</script>
  4. Retest your page. The old editor should disappear and be replaced with the new one which includes all the fancy features of FCK.
How it works The swap() funtion gets called ~5 second after the page is loaded. While it isn't necessary to wait this long, it is necessary to wait until after the orgininal iFrame gets instantiated. (calling the function before it is there won't find anything...)
 
If you break it or mess it up bad, just remove the script block in your page - this isn't like Heretic's javascript injection which could really screw things up... Hopefully, they'll add the ability for folks to call custom parameters for FCK in the future, but this seems to work for now.
 
  • November 14, 2008
  • Like
  • 0
3 replies

Obtaining a VF page from a Page Layout without popping up a new window

I have created a VisualForce page that generates a file.  The contenttype parameter has a mime type for the file.  When I run the VF page on its own, it works great.  The file open/save as dialog comes up.

Now I want to be able to click a button on a Page Layout (not a VF page, but a Page Layout), run the VF page that generates the file and have the user prompted to open/save the file.  And I'd like the user to stay on the same record they clicked the button from.  I also don't want any windows popping up when teh button is clicked.  I want the user experience to be as if they are downloading a file; only it's a VF page generating a file on the fly.  I tried this using onClick JavaScript using 2 approaches.  Neither is working.  I could use some help on this or some other suggestions.  The worst case is that I use a button that opens a small window and hopefully add JavaScript to the page that will automatically close it (can i do that?)

Approach 1: AJAX toolkit's remoteFunction method.  When I run this, a big debug window pops up and says the page is being redirected to some odd URL.

Code:
{!requireScript("/soap/ajax/14.0/connection.js")}
sforce.connection.sessionId="{!$Api.Session_ID}";

sforce.connection.remoteFunction({
   url : "https://namespace.na4.visual.force.com/apex/vfpage?id={!Lead.Id}",
   async: true,
   onSuccess : function(response) { }
});

 
Approach 2: Making a JavaScript XMLHttpRequest. This requires me to add a Remote Site for the force.com VisualForce site.  Also, I get a 302 error due to that same redirect.

Code:
xmlhttp=null;
if (window.XMLHttpRequest) {
   xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

if (xmlhttp!=null) {
   xmlhttp.onreadystatechange=state_Change;
   xmlhttp.open("GET","/apex/vfpage?id={!Lead.Id}",true);
   xmlhttp.send(null);
} else {
   alert("Your browser does not support XMLHTTP.");
}

function state_Change() {
   if (xmlhttp.readyState==4) {
      if (xmlhttp.status==200) {
         // Got it!
      } else {
         alert("Problem retrieving vCard data: " + xmlhttp.status);
      }
   }
}

 
A completely different approach (Approach 3) that I was thinking could work would be to embed a new VisualForce page into my Page Layout.  That VF page would only have a button on it.  I am hoping that that page could make the call to the main VF page using the PageReference object.  I can't seem to get it to work.  I went through so many iterations of code I can't post a good example on this one.



Message Edited by hemm on 11-15-2008 11:30 PM
  • November 16, 2008
  • Like
  • 0
9 replies

Hijacking the WYSIWYG editor on VF pages

You've developed a VF page, but the richtext edit, while cool, needs more... I wish that SFDC would've given us a way to "sneak" a look at the HTML contents that form the construct of the message/text that we're editing. So you look behind the scenes with firebug or chrome, then you'll see that SFDC's WYSIWYG editor is just their slightly customized instance of the FCK editor.
 
 
 
The code block:
<apex:inputTextarea value="{!inputValue}" id="theTextarea" richText="true" />
  gets expanded behind the scenes into a few sections:
  1. a div that contains a hidden config value
  2. an iframe that contains the editor
  3. ...and javascript section that calls the necessary parameters when the page is loaded.
Hence, it is possible to embed a second call to the javascript that creates the FCK editor - merely doing this will result in two editors on the screen in Mozilla and IE (chrome won't display duplicate ID field objects...). That is a start, and with a little massaging, you can write a function to get rid of the existing iframe containing the old editor and replace it with the new editor that you're calling.
The steps to do this aren't too bad.
 
How to do it
  1. Create your visual force page as you see fit. It goes without saying that you should have a rich text block linked to some textarea field in your object.
  2. Once you've created your page, test it. Using Chrome or Firebug, find out the ids of the divs that get created when the page runs. From the above example, id="theTextarea", might get turned into:
    • The iFrame: "j_id0:j_id2:editBlock:j_id33:theTextarea___Frame"
    • The config block: "j_id0:j_id2:editBlock:j_id33:theTextarea___Config"
    • The textarea: "j_id0:j_id2:editBlock:j_id33:theTextarea"
      (Honestly, you're just interested in the prefix, the "j_id0:j_id2:editBlock:j_id33:" section - You can append the divId and "__Frame", etc...)
  3. Go back to your visualforce page and add this script block directly under the <apex:inputTextarea> code block. 
    <script type="text/javascript">
 setTimeout("swap();",5000);
 function swap() {
  alert("Running function...");
 
  var origFrame = document.getElementById('j_id0:j_id2:editBlock:j_id33:theTextarea___Frame');
  alert("Removing iFrame");
  origFrame.parentNode.removeChild(origFrame);

  var configItem = document.getElementById('j_id0:j_id2:editBlock:j_id33:theTextarea___Config');
  alert("Removing config...");
  configItem.parentNode.removeChild(configItem);

  alert("Creating new editor...");
  var editor = new FCKeditor('j_id0:j_id2:editBlock:j_id33:theTextarea');
  editor.BasePath = '/apexpages/fckeditor/';
  editor.ReplaceTextarea();
 
  alert("Done...");
 }
</script>
  4. Retest your page. The old editor should disappear and be replaced with the new one which includes all the fancy features of FCK.
How it works The swap() funtion gets called ~5 second after the page is loaded. While it isn't necessary to wait this long, it is necessary to wait until after the orgininal iFrame gets instantiated. (calling the function before it is there won't find anything...)
 
If you break it or mess it up bad, just remove the script block in your page - this isn't like Heretic's javascript injection which could really screw things up... Hopefully, they'll add the ability for folks to call custom parameters for FCK in the future, but this seems to work for now.
 
  • November 14, 2008
  • Like
  • 0
8 replies

Sites Wysiwyg Editor

Hi,

At dream force there was a demo for sites that included a wysiwyg editor for putting content onto a site. I'm trying to figure out how to create a custom object for a site that has this editor for creating new records, does anyone have any ideas on how to achieve this?

Thanks in advance!
4 replies

How to give background:url in CSS

Hi all,
 
In  my Vf page i have one css clss like
 

<div class="Title">Test </div>

css :

.Title {

margin:8px 0 0 8px;

font-size:1em;

font-weight:bold;

background:url(../images/TitleBG.gif) no-repeat;

height:31px;

width:783px;

padding:6px 0 0 10px;

}

I have uploaded all the images in the static resources.But i am not getting the back ground image.

I got a code snippet like this from google which is shown below.
 
 
How can i use this.
 
Please give ur suggestions.