Use cWebView.pkg
Use cWebPanel.pkg
Use cWebForm.pkg 
Use csfWebRichTextEditor.pkg
Use cWebCombo.pkg
Use cWebButton.pkg
Use cCustomerDataDictionary.dd
Use cWebDragDropFileHelper.pkg

Object odbRichTextEditorDemo is a cWebView
    Object oCustomer_DD is a cCustomerDataDictionary
    End_Object

    Set Main_DD to oCustomer_DD
    Set Server to oCustomer_DD

    //Set piWidth to 700
    Set psCaption to "dbRich Text Editor Demo"

    // Your DDO structure will go here

    Object oWebMainPanel is a cWebPanel
      Set piColumnCount to 12

      Object oCustomer_Customer_Number is a cWebForm
          Entry_Item Customer.Customer_Number
          Set piColumnSpan to 3
          Set psLabel to "Customer Number"
          Set peLabelPosition to lpTop
      End_Object

      Object oCustomer_Name is a cWebForm
          Entry_Item Customer.Name
          Set piColumnSpan to 8
          Set psLabel to "Customer Name"
          Set peLabelPosition to lpTop
          Set piColumnIndex to 3
      End_Object


      Object oRichTextEditor is a csfWebRichTextEditor
        Set piHeight to 400
        Set piColumnSpan to 12
        Set pbServerOnChange to True
        Entry_Item Customer.Comments
        
        Procedure OnChange Boolean bIsInteracted
          Integer iCount
          WebGet piCharCount to iCount
          Send none
          //Set Field_Changed_State of oCustomer_DD Field Customer.Comments to true
        End_Procedure
        
      End_Object

      Object oSetDataButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Set Content"
      
          Procedure OnClick
            String sValue 
            Move '<p>This is a <em><span style="text-decoration: underline;">small example</span></em>&nbsp;of what can be done with this Rich Text Editor</p>' to sValue
#IF (!@ > 191)            
            Append sValue @'
<p><img 
src="data:image/jpeg;base64,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" class="e-rte-image e-
imginline" alt="DM.jpg" width="auto" height="auto" style="min-width: 0px; max-width: 1170px; min-height: 0px;"> </p>            
            '            
#ENDIF            
            Append sValue "<p> It doesn't show much yet.</p>"
            WebSet psValue of oRichTextEditor to sValue
            Send none
          End_Procedure
      End_Object
      
      Object oWebDragDropFileHelper is a cWebDragDropFileHelper
      
          //  Register drop targets
          Send RegisterDropTarget oRichTextEditor C_WebDropOnControl
                      
          //  Called for each file dropped, should return the local path to write the file
          Function OnFileDrop String sFileName Integer iBytes String sMime Handle hoDropTarget WebDropPosition eDropPosition Returns String
              String sPath
              tWebTreeViewDropData tDropData
              Boolean bExists

#IFDEF Is$WebApp
              Get UploadFolder of ghoWebApp True to sPath
#ELSE
              // not supported by FlexTron it seems
              Get UploadFolder of ghoWebResourceManager True to sPath
#ENDIF
              If (sPath<>"") Begin
                Move (sPath + "\" + sFileName) to sPath
                
                //  Check if we are not overwriting an existing file
                File_Exist sPath bExists
                If (bExists) Begin
                    Send UserError "File already exists!"
                    Function_Return ""
                End
              End
              
              Function_Return sPath
          End_Function
          
          Procedure OnFileFinished String sFileName String sLocalPath
          End_Procedure
      End_Object

      Object oGetDataButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Get Content"
          Set piColumnIndex to 2
      
          Procedure OnClick
            String sValue 
            WebGet psValue of oRichTextEditor to sValue
            Send none
          End_Procedure
      End_Object

      Object oInsertTextButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Insert Text"
          Set piColumnIndex to 4
      
          Procedure OnClick
            Send InsertText of oRichTextEditor "Rich Text Editor"
          End_Procedure
      End_Object

      Object oInsertHtmlButton is a cWebButton
          Set piColumnSpan to 2
          Set psCaption to "Insert Html"
          Set piColumnIndex to 6
      
          Procedure OnClick
            Send InsertHtml of oRichTextEditor '<a href="https://projects.vdf-guidance.com/projects/syncfusion-library/wiki">vdf-guidance SyncFusion wiki</a>'
          End_Procedure
      End_Object

      Object oWebForm1 is a cWebForm
          Set piColumnSpan to 3
          Set pbShowLabel to False
          Set piColumnIndex to 9
      End_Object
        
        // place controls here
        
    End_Object 

End_Object