How do I replace BVCommerce TextEdit boxes with HTML edit boxes?

 

The information in this article applies to:

  • BVCommerce 2004, all editions
  • FCKeditor version 2.0rc1 and above.

GOAL
 Goal of this article is to provide a guide to assist developers wishing to replace BVCommerce's standard text boxes with HTML text boxes (also known rich text editors).  Instead of manually editing code behind files we have opted to use the FCKeditor JavaScript implementation which replaces the textbox with a HTML box once the page loads in your browser. Although this imposes a slight delay in page rendering for the editor pages it does not impact the actual store and allows the changes to be made only to the presentation layer of the application without affecting the actual source of the application.
  
REQUIREMENTS
 In order to follow this procedure you'll need a licensed copy of BVCommerce, have downloaded the FCKeditor and FCKeditor.net releases from www.fckeditor.net and have a configured and tested BVCommerce store online.
  
PROCEDURE
 

Step one: uploading FCKeditor and configuring the website.

Upload the file FredCK.FCKeditorV2.dll from the FCKeditor ASP.net release to the /bin folder within your website's root folder (normally referred to as the wwwroot folder). This DLL is used by the FileUpload manager.

Upload the entire fckeditor folder to your wwwroot folder making sure to keep the folder named fckeditor. Please note the actual editor must reside in the wwwroot folder. This folder contains the actual code for the editor, the skins, etc.

Create a new folder named UserFiles in the wwwroot folder and grant the anonymous web user full permissions on this folder. This folder will be used to store any images uploaded through the file manager.

Step two: Edit the file fckconfig.js as follows:

change line #94, adding  // to the front of the line to comment it out.
change line #96 by removing the // in the front of the line to uncomment it.
change line #111 adding // to the front of the line to comment it out.
change line #112 by removing the // in the front of the line to uncomment it.

These edits make use of the ASP.net file manager / connector for file uploads.

FCKeditor should now be ready for use.

Step three: Edit the proper ASP.net files.

There are several files that are candidates for being converted to Rich Text Edit boxes (HTML textboxes) and it's left to you to decide exactly which files should and should not be edited for your configuration. Below is merely a listing of pages we feel you would most likely wish to edit.

We'll be adding almost the same exact code snippet to each file at the very same location, the code used will be as follows:

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var oFCKeditor = new FCKeditor( 'BodyField','600','200','Default' ) ;
    oFCKeditor.ReplaceTextarea() ;
}
</script>

the line of interest here is: 

var oFCKeditor = new FCKeditor( 'BodyField','600','200','Default' ) ;

This line is used to execute the javascript on pageload to replace a textbox with an ID of 'BodyField" with an HTML edit box with a width of '600', a height of '400' and a style defined as 'Default' in the fckconfig.js file. Additional information can be found within the fckeditor/_doc folder and throughout the fckeditor's code comments. The key thing to remember is that we're create a new FCKeditor object named oFCKeditor to replace the textbox BodyField within our ASP.net page.

We'll be adding this code to each necessary ASP.net file at the same location, directly above the </HEAD> tag. You'll simply look for the </HEAD> tag and paste the necessary card directly above the tag, save the file and then test it to make sure it works.

Which files to edit

/BVAdmin/configuration_affiliate.aspx
code to add:

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'AffiliateIntroductionField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;
    var bFCKeditor = new FCKeditor( 'AffiliateTermsField','600','200','Default' ) ;
    bFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_custompages_edit.aspx
code to add:

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'DescriptionField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_Homepage_EditBlockItem.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'HtmlField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_messages_adminorderreceipt.aspx
note: this particular page has 3 different textareas that can be replaced, thus 3 FCKeditor objects are defined and then called.

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'BodyField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;
    var bFCKeditor = new FCKeditor( 'ItemField','600','200','Default' ) ;
    bFCKeditor.ReplaceTextarea() ;
    var cFCKeditor = new FCKeditor( 'DownloadField','600','200','Default' ) ;
    cFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_messages_dropship.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'BodyField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;
    var bFCKeditor = new FCKeditor( 'ItemField','600','200','Default' ) ;
    bFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_messages_forgotpassword.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'BodyField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_messages_orderreceipt.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'BodyField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;
    var bFCKeditor = new FCKeditor( 'ItemField','600','200','Default' ) ;
    bFCKeditor.ReplaceTextarea() ;
    var cFCKeditor = new FCKeditor( 'DownloadField','600','200','Default' ) ;
    cFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_messages_orderupdate.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'BodyField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;
    var bFCKeditor = new FCKeditor( 'ItemField','600','200','Default' ) ;
    bFCKeditor.ReplaceTextarea() ;
    var cFCKeditor = new FCKeditor( 'DownloadField','600','200','Default' ) ;
    cFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_returns.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'ReturnFormIntroField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;
    var bFCKeditor = new FCKeditor( 'ReturnFormPolicyField','600','200','Default' ) ;
    bFCKeditor.ReplaceTextarea() ;
    var cFCKeditor = new FCKeditor( 'ReturnFormCompleteField','600','200','Default' ) ;
    cFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_shipping.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'ShippingPolicyField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_storeclosed.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'DescriptionField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/content_terms.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'DescriptionField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/people_MailingLists_Send.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'BodyField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/products_categories_edit.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'DescriptionField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/products_ProductChoices_Edit.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'HtmlField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

/BVAdmin/products_products_edit.aspx

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var aFCKeditor = new FCKeditor( 'LongDescriptionField','600','200','Default' ) ;
    aFCKeditor.ReplaceTextarea() ;

}
</script>

Add Feedback