Online Business Success

How To: Implement A WYSIWYG Editor for Customer Submitted Web App Items

WebFolio Developer - Friday, January 03, 2014

Using our customer submitted Web App feature is a great way to build database driven, interactive websites. If you want visitors to be able to format their text before it's submitted however, you'll require something more powerful than the default HTML text area.

In this article, we'll show you in just 4 easy steps how to implement a fully-featured WYSIWYG editor that submits text as formatted HTML instead!

Step 1. Set up your Web App

Firstly, you need to make sure your Web App allows customers to create new Web App items.

Go Admin > Build Web Apps and select your Web App

Enable Customer Submitted Web App items

To enable this feature, tick the "Add New Items" checkbox under "Can Customers Create Web Apps?". If you'd also like customers to be able to edit and delete their existing Web App items, tick the appropriate checkboxes.Read more about customer submitted Web App items at the Online Business Wiki.

For this example, we've kept our Web App basic by collecting only the standard Name / Description system fields.

Step 2. Upload the jHtmlArea files to your site

A WYSIWYG editor that plays nice with BC is jHtmlArea. You can download it here.

Once you've downloaded the file, extract its contents and locate the following files:

  • jHtmlArea.css
  • jHtmlArea.png
  • jHtmlArea-0.7.0.min.js
  • jquery-1.3.2.min.js
Upload the files

Upload these files to your site using either FTP or our built-in File Manager. For this example, we'll upload all 4 files to the root directory of our site.

Step 3. Place the submission form on a page

Now we need to create a page to place the customer submission form on. We'll go Websites > Web Pages and click "Create A New Page"

Give the page a name and URL. For this example, we'll call it "Submit", with a friendly URL of /submit.

Using the Module Manager, select Web Apps then "Web Apps Input Form for Customers".

Module Manageer

Choose your Web App from the drop down menu then insert it on the page.

Insert

The form will be inserted in HTML format for easy editing.

Step 4. Insert the script

Switch over to HTML view and insert the following code at the top of the page.

Script

Click here for a version you can quickly Copy and Paste.

If you uploaded the files to a directory other than the root, make sure you change the code to reference their correct paths.

Save and Publish the page.

Save and Publish

Check the results

Switching over to the live page, our description field's text area has been converted to a friendly WYSIWYG editor and even includes a handy HTML view.

WYSIWYG Editor

Once the customer enters their text, formats it using the editor and hits the submit button, it will be submitted as formatted HTML.