Please enable JavaScript to view this site.

iService Forms User Guide

Navigation: HTML Snippets and Examples

Using Rich Text Editor On Forms

Scroll Prev Top Next More

You can use a rich text editor within any textarea on your forms. Since forms are generated as HTML pages, you can use any editor desired as long as you include the links to their javascript files. Beginning with v6, iService has a built-in editor based on CLEditor, and you can incorporate this into your forms as shown in the example below.

Insert into the HEAD of the form body:

<head>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

 <link rel="stylesheet" type="text/css" href="cleditor/jquery.cleditor.css" />

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

 <script>

   function turnOnHtmlEditors() {

     $("textarea.htmleditor").each(function (i) {

       var editor = $(this).cleditor({

         width: "100%",

         height: "100%"

       });

     });

   };

 

   $(document).ready(function () {

     turnOnHtmlEditors();

   });

 </script>

</head>

 

 

Use -customhtml and the class HTMLEDITOR in the body section of the iService Form Body:

<body>

 <form id="form1" method="POST">

   Email: $input -email -required -id'email'$ <br />

   First Name: $input -contactproperty1'first name' -id'firstname'$<br />

   Last Name: $input -contactproperty3'last name' -id'lastname'$<br />

   Subject: $input -id'subject'$<br />

  Body: $input -id'body' -textarea -customhtml$

   <div style="border: 1px solid #000; padding: 0px 2px 2px 0px;">

     <div style="width: 100%; height: 200px;">

       <textarea id="body" name="body" class="htmleditor">$form -id'body'$</textarea>

     </div>

   </div>

   <input type="submit" id="ok" name="ok" value="Submit Question" />

 </form>

 <div style="background-color:yellow;">$errormessage$</div>

</body>

 

 

In the body of the action step (Ticket/AAQ/Note), indicate the input is HTML using -isHTML:

Since the input into the rich text area will contain HTML markup, you will need to specify on the form action that the input is HTML. Use the -isHTML option to indicate that as shown in the example below.

Click to expand

Click to expand

 

Form Example

The form illustrated in this example would display as shown below.

Click to expand

Click to expand