To continue with this content, please log in with your Data Access ID or create a new account.
Cancel Data Access ID
You may not be authorized to see this content. Please contact Data Access Europe for more information.
Cancel Data Access Europe
You are not authorized to see this content.
Cancel Data Access Europe
Next lesson:

Quill Editor Library

Lesson 3 - Adding Features

In the previous lesson, we created the basic view logic.  In this lesson we look at multiple features the Quill editor.


  1. The HTML edit mode, was available in Froala, as well
  2. Simply turn it on
  3. Notice a new HTML toolbar button has appeared
  4. As you can see, it really edits the content
  5. Keep in mind, Quill censors the edited content to provide protection against JavaScript injections.


  1. The next feature, which has been newly added to this implementation, is code sections
  2. These are sections in between text to provide code snippets
  3. Also included is syntax highlighting
  4. Many languages are already included in this feature like SQL, javascript, VB, C/C++. Unfortunately, DataFlex is not included.It could be added to a later version if there is enough interest


  1. Something the 19.1 and earlier users might love is support for a select spectrum of Unicode
  2. The way it works is before sending the content to the server, the editor replaces all the Unicode characters with HTML encoded tags
  3. While not all your favourite emojis make the cut, the DataFlex implementation of the Quill editor supports most languages, Japanese for example
  4. Let’s save this and look at the viewer and database
  5. No question marks appear in the viewer
  6. As you can see, the Unicode was replaced with the HTML tags
  7. While it may take a bit more space of the database field, for those waiting for DataFlex 20 to be available this is a nice compromise


  1. Before discussing the images feature, we would like to point out a compatibility feature
  2. This feature transforms incompatible Froala structures into Quill compatible content
  3. This includes dot-lists, etc. 
  4. The client transforms the content when loading the content and pushes it back to the server on the next save


  1. Now, the most requested feature, inline images
  2. Let’s first look at some of the properties that come with this feature
  3. First up is the puiUploadLimit assigning the maximum upload size, the default is 5 MB
  4. Next, the psDirectoryName.  This is the directory inside of the Data folder the images are to be stored in. It may include slashes since this value is used in the path building
  5. The property sFileExtension is the format of the image on the server. It is important that the extension is of an image format when you save an image from the editor or viewer.  Most viewers read the headers inside of the file and disregard the extension. This property has no relation to the transcoding of images, since that is not currently supported
  6. Once all properties have been specified, images are allowed in the editor
  7. This is the point where data dictionary events are filled in
  8. In the requestsave add a SaveImages call to the editor which performs all the actions on the client stack, like adding and removing images from the server
  9. If a record is to be deleted, then the corresponding images needs to be delete, as well
  10. Add a DeleteImages call to the request delete
  11. This procedure also comes with an optional sValue parameter allowing all images in the specified value to be deleted
  12. As you can see, the editor loaded the image back in without a problem
  13. Will the viewer too?
  14. No, the image is missing because the viewer needs to allow images to be set to true
  15. If a programmer only wants to show the text without the images this property can be set
  16. And as you can see, it works fine now