cWebFroalaEditor

Version 1.0.0

psLincenseKey

Type:
String
Default:
""
A license key. You are required to purchase one here.
Set psLincenseKey to "rJZMe1BJGS2HTYVANH=="

psPlaceholderText

Type:
String
Default:
""
Text displayed within the editor when its value is empty. This property can only be set from within the constructor or an "OnLoad" event.
Set psPlaceholderText to "Enter text here"

psIframeCSSfile

Type:
String
Default:
""
Itís possible to load an external CSS file when the editor is in an iFrame mode. This property can only be set from within the constructor or an "OnLoad" event.
Set psIframeCSSfile to "test.css"

piHeight

Type:
Integer
Default:
250
Editor's height in pixels. If you want the editor to take all the available height, use "pbFillHeight".
WebSet piHeight to 250

pbSyncEditorValue

Type:
Boolean
Default:
True
By default editor's "psValue" can be set or retrieved using WebSet/WebGet commands. This is useful when you work with rather small content. It does however have one drawback. The "psValue" property is a web property which means the editor content will travel back and forth between the server and a client with each call. The content is also limited to the WebApp Argument_Size (by default: 64KB).

When we work with a larger content however, it's performance wise better to set "pbSyncEditorValue" property to False, which causes "psValue" to no longer get synchronised and therefore not to be sent back and forth with each call. This also means that the "psValue" property will no longer be accessible using WebGet/WebSet commands. Instead, use set/insert/append functions.
Setting a value when "pbSyncEditorValue" is True:
String sValue

Move "Hello world!" to sValue

WebSet psValue of oEditor to sValue
Retrieving a value:
String sValue

WebGet psValue of oEditor to sValue
Setting a value when "pbSyncEditorValue" is False:
String sValue

Move "Hello world!" to sValue

Send SetData_String of oEditor (&sValue)
Retrieving a value:
Send ProcessData of oEditor "someActionID" "someParam" Froala_DataType_String False False

pbContentChanged

Type:
Boolean
Default:
False
Turns true when content changes after it has initially been set.
WebGet pbContentChanged of oEditor to bChanged
Note: If you are using an "OnChange" event to store changes made by the user, you are required to WebSet the indicator back to false after each occurrence.

pbCharCounterVisible

Type:
Boolean
Default:
False
Displays number of characters, both allowed and used. This property can only be set from within the constructor or an "OnLoad" event.
Set pbCharCounterVisible to True

pbClearOnHide

Type:
Boolean
Default:
False
Automatically clears an editor's value when it's no longer visible. For example when a view containing the editor gets closed.
WebSet pbClearOnHide to True

pbReadOnly

Type:
Boolean
Default:
False
Sets the editor in a read-only mode.
WebSet pbReadOnly to True

pbConvertCSSToInline

Type:
Boolean
Default:
False
When True, this property causes all the active CSS styles to be converted to their inline equivalents when requesting the editor's value. For example, let's assume we have a CSS class like this:
.fr-view p {color: #FFCC33;}
This would cause the following text within the editor to be orange: This is a test. But if we would request the value we would get this: "<p>This is a test</p>". If we would set "pbConvertCSSToInline" to True, the output would be: "<p style='color: rgb(255, 204, 51);'>This is a test</p>".
Please note that this feature doesn't seem to work when the CSS classes are loaded from within an external file ("psIframeCSSfile").
WebSet pbConvertCSSToInline to True

pbInlineToolbar

Type:
Boolean
Default:
False
Causes toolbar to pop after an editable area is clicked, instead of being fixed at the control's top.
WebSet pbInlineToolbar to True

pbButtonFullScreen

Type:
Boolean
Default:
True
Displays the Fullscreen button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonFullScreen to True

pbButtonBold

Type:
Boolean
Default:
True
Displays the Bold button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonBold to True

pbButtonItalic

Type:
Boolean
Default:
True
Displays the Italic button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonItalic to True

pbButtonUnderline

Type:
Boolean
Default:
True
Displays the Underline button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonUnderline to True

pbButtonStrikeThrough

Type:
Boolean
Default:
True
Displays the Strikethrough button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonStrikeThrough to True

pbButtonFontFamily

Type:
Boolean
Default:
True
Displays the Font family button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonFontFamily to True

pbButtonFontSize

Type:
Boolean
Default:
True
Displays the Font family button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonFontSize to True

pbButtonColor

Type:
Boolean
Default:
True
Displays the Color button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonColor to True

pbButtonParagraphStyle

Type:
Boolean
Default:
True
Displays the Paragraph style button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonParagraphStyle to True

pbButtonParagraphFormat

Type:
Boolean
Default:
True
Displays the Paragraph format button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonParagraphFormat to True

pbButtonAlign

Type:
Boolean
Default:
True
Displays the Align button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonAlign to True

pbButtonFormatOL

Type:
Boolean
Default:
True
Displays the Ordered list button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonFormatOL to True

pbButtonFormatUL

Type:
Boolean
Default:
True
Displays the Unordered list button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonFormatUL to True

pbButtonOutdent

Type:
Boolean
Default:
True
Displays the Outdent button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonOutdent to True

pbButtonIndent

Type:
Boolean
Default:
True
Displays the Indent button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonIndent to True

pbButtonQuote

Type:
Boolean
Default:
True
Displays the Quote button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonQuote to True

pbButtonInsertHR

Type:
Boolean
Default:
True
Displays the Horizontal line button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonInsertHR to True
Type:
Boolean
Default:
True
Displays the Insert link button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonInsertLink to True

pbButtonInsertImage

Type:
Boolean
Default:
True
Displays the Insert image button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonInsertImage to True

pbButtonInsertVideo

Type:
Boolean
Default:
True
Displays the Insert video button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonInsertVideo to True

pbButtonInsertTable

Type:
Boolean
Default:
True
Displays the Insert table button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonInsertTable to True

pbButtonUndo

Type:
Boolean
Default:
True
Displays the Undo table button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonUndo to True

pbButtonRedo

Type:
Boolean
Default:
True
Displays the Redo table button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonRedo to True

pbButtonClearFormatting

Type:
Boolean
Default:
True
Displays the Clear formatting button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonClearFormatting to True

pbButtonCodeView

Type:
Boolean
Default:
True
Displays the Code view button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonCodeView to True
Displays the Clear formatting button on the toolbar. This property can only be set from within the constructor or an "OnLoad" event.
Set pbButtonClearFormatting to True

pbIframe

Type:
Boolean
Default:
False
Puts the editor into an iFrame mode. This property can only be set from within the constructor or an "OnLoad" event.
Set pbIframe to True

pbFullHtmlIframe

Type:
Boolean
Default:
False
When an editor is put in an iFrame mode ("pbIframe"), there are still tags that are being left out, like DOCTYPE, HEAD, STYLE, BODY etc. Setting "pbFullHtmlIframe" to True allows for usage of all HTML tags.
Set pbFullHtmlIframe to True

pbStickyToolbar

Type:
Boolean
Default:
False
When True, the toolbar will always stick at the top of the control.
Set pbStickyToolbar to True

piLanguage

Type:
Integer
Default:
Froala_Language_English_United_States
Sets the toolbar language. The following languages are available: Arabic, Bosnian, Czech, Danish, German, English (Canada/United Kingdom), English (United States), Estonian, Spanish, Persian, Finnish, French, Hebrew, Croatian, Hungarian, Indonesian, Italian, Japanese, Korean, Montenegrin, Norwegian, Dutch, Polish, Portuguese_Brazil, Portuguese_Portugal, Romanian, Russian, Serbian, Swedish, Thai, Turkish, Ukrainian, Chinese (China/Taiwan).
Set piLanguage to Froala_Language_Dutch

piMaxLength

Type:
Integer
Default:
0
Characters limit. By default 0 (no limit).
Set piMaxLength to 1000

OnDefineCustomButtons

Type:
Event
Parameters:
asCustomButtons (String[] ByRef)
This event is used for defining custom toolbar buttons. Use procedure DefineCustomButton to define a button.

DefineCustomButton

Type:
Procedure
Parameters:
Button ID (String), Button name (String), icon CSS class (String)
Used for defining a custom toolbar button.
Procedure OnDefineCustomButtons String[] ByRef asCustomButtons
  Send DefineCustomButton "MyButton1" "My custom button 1" Froala_ToolbarIcon_Battery3 (&asCustomButtons)
  Send DefineCustomButton "MyButton2" "My custom button 2" Froala_ToolbarIcon_Archive (&asCustomButtons)
End_Procedure
There is a pre-defined set of icons ("Froala_ToolbarIcon_*") which you can use, but you are free to use whatever you like. If you want to use a custom CSS class for your button, you're required to pass its name and define a CSS class with a "pa-" prefix, like so:
CSS:
.fa-myicon
{
  content: "\f028";
}
DataFlex:
Send DefineCustomButton "SomeId" "SomeName" "myicon"

ProcessData

Type:
Procedure
Parameters:
Optional action ID (String), Optional parameter (String), Data type (Integer), Strip HTML tags (Boolean), Selected text only (Boolean)
Used for requesting data from the editor. When calling "ProcessData", we can pass two optional references: an action ID and a parameter. These two will be send to "OnProcessData_*" procedure along with the editor data. Depending on the chosen data type ("Froala_DataType_*" parameter), one of the following events will fire within the editor object: OnProcessData_String, OnProcessData_StringArray or OnProcessData_UCharArray.
Also, see pbSyncEditorValue.
Send ProcessData of oEditor "someActionID" "someParam" Froala_DataType_String False False
After calling this procedure, the following will be called:
Procedure OnProcessData_String String sActionId String sParam String ByRef sValue
End_Procedure

OnProcessData_String

Type:
Event
Parameters:
sActionId (String), sParam (String), sValue (String ByRef)
This event will fire after editor data has been requested (using ProcessData procedure).
Procedure OnProcessData_String String sActionId String sParam String ByRef sValue
End_Procedure

OnProcessData_StringArray

Type:
Event
Parameters:
sActionId (String), sParam (String), asValue (String[] ByRef)
This event will fire after editor data has been requested (using ProcessData procedure).
Procedure OnProcessData_StringArray String sActionId String sParam String[] ByRef asValue
End_Procedure

OnProcessData_UCharArray

Type:
Event
Parameters:
sActionId (String), sParam (String), UChar (UChar[] ByRef)
This event will fire after editor data has been requested (using ProcessData procedure).
Procedure OnProcessData_UCharArray String sActionId String sParam UChar[] ByRef aucValue
End_Procedure

OnLoadImages

Type:
Event
Parameters:
None
Called when image manager is opened. It's purpose is to provide a collection of images used to seed the selection list. The source of images can be both local and external.
Procedure OnLoadImages
  Send ManagerAddImage "Images/DF_Logo_Retina.png"
  Send ManagerAddImage "Images/PoweredByDataFlex.png"
  Send ManagerAddImage "https://i.froala.com/assets/photo3.jpg"
  Send ManagerAddImage "https://i.froala.com/assets/photo4.jpg"
End_Procedure
For the event to work control requires an external file which will provide the required list. We supplied such a file, it's called "FroalaImageManager.asp" and it should be placed in AppHtml folder of your application. Next we need to instruct the editor to use that list, we do that by setting property "psImageManager" to the correct filename (in our case "FroalaImageManager.asp"). The file will call function "FroalaLoadImages" which we will be placing in an existing oWebResourceManager object ("WebResourceManager.wo").
{ Published=True }
Function FroalaLoadImages String sSource Returns String
 String sImages
 Handle hEditor

 Get DecryptKey sSource to sSource

 Move (Replace(".", sSource, "")) to sSource

 Get WebObjectByName sSource to hEditor

 If ((sSource = "") or (hEditor = 0)) Function_Return ""

 Send OnLoadImages of hEditor

 Get psImages of hEditor to sImages

 Set psImages of hEditor to ""

 Function_Return sImages
End_Function

SetData_String

Type:
procedure
Parameters:
sValue (String ByRef)
This procedure is used for setting an editor value. To retrieve it, use ProcessData.
String sValue

Move "Hello world!" to sValue

Send SetData_String of oEditor (&sValue)

SetData_StringArray

Type:
procedure
Parameters:
asValue (String[] ByRef)
This procedure is used for setting an editor value. To retrieve it, use ProcessData.
String[] asValue

Move "Hello " to asValue[0] Move "world!" to asValue[1]

Send SetData_StringArray of oEditor (&asValue)

SetData_UCharArray

Type:
procedure
Parameters:
sValue (UChar[] ByRef)
This procedure is used for setting an editor value. Note that there are three different procedures to be used when setting editor data: SetData_String, SetData_StringArray and SetData_UCharArray. All three do the same, the only difference is with the data type passed. Also, note that first two are still limited to the WebApp Argument_Size, whereas UChar one is not. To retrieve a value from the editor, use ProcessData.
UChar[] ucContent

Direct_Input Channel 5 sOutFile

Read_Block Channel 5 ucContent -1

Close_Output Channel 5

Send SetData_UCharArray of oEditor (&ucContent)

AppendData_String

Type:
procedure
Parameters:
sValue (String ByRef)
This procedure is used for appending an editor value. To retrieve it, use ProcessData.
String sValue

Move "Hello world!" to sValue

Send AppendData_String of oEditor (&sValue)

AppendData_StringArray

Type:
procedure
Parameters:
asValue (String[] ByRef)
This procedure is used for setting an editor value. To retrieve it, use ProcessData.
String[] asValue

Move "Hello " to asValue[0] Move "world!" to asValue[1]

Send AppendData_StringArray of oEditor (&asValue)

AppendData_UCharArray

Type:
procedure
Parameters:
sValue (UChar[] ByRef)
This procedure is used for appending an editor value. Note that there are three different procedures to be used when setting editor data: AppendData_String, AppendData_StringArray and AppendData_UCharArray. All three do the same, the only difference is with the data type passed. Also, note that first two are still limited to the WebApp Argument_Size, whereas UChar one is not. To retrieve a value from the editor, use ProcessData.
UChar[] ucContent

Direct_Input Channel 5 sOutFile

Read_Block Channel 5 ucContent -1

Close_Output Channel 5

Send AppendData_UCharArray of oEditor (&ucContent)

InsertData_String

Type:
procedure
Parameters:
sValue (String ByRef)
This procedure is used for inserting an editor value at the current cursor position. If a current selection exists, it will be overwritten by the value passed.
String sValue

Move "Hello world!" to sValue

Send InsertData_String of oEditor (&sValue)

InsertData_StringArray

Type:
procedure
Parameters:
asValue (String[] ByRef)
This procedure is used for inserting an editor value at the current cursor position. If a current selection exists, it will be overwritten by the value passed.
String[] asValue

Move "Hello " to asValue[0] Move "world!" to asValue[1]

Send InsertData_StringArray of oEditor (&asValue)

InsertData_UCharArray

Type:
procedure
Parameters:
sValue (UChar[] ByRef)
This procedure is used for inserting an editor value at the current cursor position. If a current selection exists, it will be overwritten by the value passed. Note that there are three different procedures to be used when setting editor data: InsertData_String, InsertData_StringArray and InsertData_UCharArray. All three do the same, the only difference is with the data type passed. Also, note that first two are still limited to the WebApp Argument_Size, whereas UChar one is not. To retrieve a value from the editor, use ProcessData".
UChar[] ucContent

Direct_Input Channel 5 sOutFile

Read_Block Channel 5 ucContent -1

Close_Output Channel 5

Send InsertData_UCharArray of oEditor (&ucContent)