Using a WYSIWYG Editor in Your Site's Forms

If you create a custom item type form, so visitors to your site can submit content into your database, you may want to use a visual (WYSIWYG) editor for some textarea fields.

The code the the Webvanta form generator produces provides the textarea, but it does not set up all the JavaScript for the text area to function as a WYSIWYG editor like that available in the Webvanta admin system. That editor is highly customized for use as part of the admin system, and it is not directly usable for a front-end form. You'll also probably want to configure the editor to meet your needs, and that means you need control over the editor JavaScript and its configuration files.

You can easily install the WYSIWYG editor code of your choice on your site. The WYSIWYG editor operates independently of the Webvanta system; it simply provides an alternate entry method for content in the textarea. When the form is submitted to the Webvanta system in the usual way, it appears to the back-end system as a normal text area that happens to have HTML code (generated by the WYSIWYG editor's JavaScript code) as its contents.

Installing CKEditor

As an example, here are the minimal steps to install the CKEditor WYSIWYG editor on your front-end forms.

  1. Download the zip package from the CKEditor site.
  2. Upload the zip file to the Files area of your Webvanta site. The zip will be automatically unpacked, and several folders will be generated.
  3. Add the code to the head section of your page template (or to an editable region of your page that is inserted in the head section) to load the desired CKEditor JavaScript file.
  4. Add the class "ckeditor" to the textarea that you want to have appear as a WSYSIWG editor.

Sample Code

When the zip is unpacked by the Webvanta system as you upload it to the Files area, it will create a folder named "ckeditor", in which the file "ckeditor.js" has the core ckeditor code. Thus, the line that you need to add the head section of the page is:

<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>

Then, in your form, just locate the textarea element you want to turn into a WYSIWYG editor, and add the ckeditor class:

<textarea class="ckeditor" ... >

That's all you need to do to make it work, but you'll proably want to customize the CKEditor configuration. It is highly configurable, and there are many options in how the HTML code is generated and other aspects of the editor's behavior. By default, it loads a huge assortment of editor icons, and you probably want only a fraction of them on your form.

For information on configuring CKEditor, see their documentation—in particular: