Enumerations

Name Values
Alignments Left
Center
Right
Headers HeaderNone
Header1
Header2
Header3
Header4
ListTypes None
Checked
Ordered
Unordered
ToolbarItems SectionFont
SectionDecoration
SectionColor
SectionScript
SectionBlock
SectionList
SectionIndent
SectionPosition
SectionInsert
SectionClean
SectionTable
SectionCustom
MenuFontName
MenuFontSize
MenuColor
MenuBackground
ButtonBold
ButtonItalic
ButtonUnderline
ButtonStrike
ButtonSubscript
ButtonSuperscript
ButtonHeader1
ButtonHeader2
ButtonQuote
ButtonCode
ButtonListOrdered
ButtonListUnordered
ButtonListCheck
ButtonIndent
ButtonOutdent
ButtonDirection
ButtonAlignLeft
ButtonAlignRight
ButtonAlignCenter
ButtonHorizontalRule
ButtonLink
ButtonImage
ButtonVideo
ButtonClean
ButtonCustom
ButtonTable
ButtonTableRow
ButtonTableColumn

Constants

Name Type Value

This class exposes no constants.

Events

Definition Description
ContextClick() Triggered when the user right-clicks in the editor area.
EditorDefaults( byRef DefaultFontFace as String, byRef DefaultFontSize as Integer ) Fires during setup. Set the parameters to desired values.
LocalFileSelection( localFileName as String, localFileURL as String ) Triggered when the user selects a file on their computer. localFileName will be equal to the BASE64 encoded file contents.
SelChange() Fires when the selection text values (SelStart or SelLength) are changed.
TextChanged() This event triggers when the text changes.
Toolbar_BackgroundClick() Raised when the user clicks the “Custom” button in the background color selector.
Toolbar_ButtonClick( buttonID as String ) Triggered when the user clicks a custom-added button.
Toolbar_ColorClick() Raised when the user clicks the “Custom” button in the text color selector.
Toolbar_ImageClick() Raised when the user clicks the “Insert Image” button on the toolbar.
Toolbar_InsertTableClick() Raised when the user clicks the “Insert Table” button on the toolbar.
Toolbar_LinkClick() Raised when the user clicks the “Insert Link” button on the toolbar.
Toolbar_VideoClick() Raised when the user clicks the “Insert Video” button on the toolbar.

Methods

Definition Description
AddFont( FontName as String ) Used to add a font to toolbar. Should only be called in the Open event.
BindImageUpload( theControl as WebControl ) Binds the built-in upload feature to a control, usually a WebButton, and binds to the left-click event.
ClearUndoHistory() Clears the undo/redo stack.
CurrentLine() as Integer Returns the current line position of the cursor relative to PlainText.
Delete() Deletes the currently selected text.
InsertAudio( SourceURL as String ) Inserts an <audio> element.
InsertDeltas( theDelta as JSONItem ) Inserts a Parchment Delta object.
InsertFile( theFile as FolderItem, atPos as Integer = 0 ) Attempts to insert an image stored on the local computer without uploading. Doesn't work in some browsers. Best not to use, but it's there if you are in the right scenario.
InsertHorizontalRule() Inserts an <hr> element.
InsertImage( f as FolderItem, altText as String = “”, atPos as Integer = 0 ) Converts the specified FolderItem in to a BASE64 image string, and inserts it at atPos.
InsertImage( URL as String, altText as String = “”, atPos as Integer = 0 ) Inserts an <img> element with the specified URL at atPos.
InsertLink( URL as String, Title as String = “”, atPos as Integer = 0 ) Inserts a link at the current position.
InsertTable( Rows as Integer, Columns as Integer ) Inserts a table with the given number of rows and columns at the current position.
InsertTableColumn() Inserts a new column to the currently selected table.
InsertTableRow( Above as Boolean = False ) Inserts a new row to the currently selected table.
InsertTweet( TweetID as Int64 ) Inserts a tweet at the current position by using the ID.
InsertTweet( URL as String ) Inserts a tweet at the current position by extracting the ID from the tweet's URL.
InsertVideo( URL as String ) Inserts a <video> element at the current position.
Redo() Step forward in the Undo stack.
SelectAll() Select all text and elements in the editor.
ToolbarAddButton( ButtonID as String, ButtonCaption as String, ButtonTooltip as String = “” ) Adds a custom button to the toolbar. Can be done at any time.
ToolbarItemVisible( ParamArray theItem as ToolbarItems, assigns value as Boolean ) Used to hide or show toolbar buttons. See examples for usage.
ToolbarItemVisible_Custom( CustomID as String, Value as Boolean ) Used to hide or show custom-added toolbar buttons.
ToolbarRemoveButton( buttonID as String ) Used to remove a previously added custom button.
ToolbarTooltip( theItem as ToolbarItems, theTooltip as String ) Used to update the tooltip for the specified button. Useful for localization.
Undo() Step backward in the Undo stack.

Properties

Name Type Default Value Description
CanRedo Read-Only Boolean False When True, calling the Redo method results in a change of contents.
CanUndo Read-Only Boolean False When True, calling the Undo method results in a change of contents.
DarkMode Boolean False When True, will style the editor and toolbar to match Dark themes.
EditorBackground Color &cFFFFFF Background color of the editor area.
EditorMarginBottom Integer 0 Margins inside the editor area.
EditorMarginLeft
EditorMarginRight
EditorMarginTop
HTML String “” Get and set the HTML contents.
Length Integer 0 The number of characters in the editor.
PlainText String “” Retrieve the HTML property stripped of all HTML tags, or replace the contents with a plain-text string.
SelAlign Alignments Left Update the text alignment of the current selection.
SelBold Boolean False Get and set the bold property for currently selected text. If any portion of the selected text is bold this will return true.
SelHeader Headers HeaderNone Set the Header style of the currently selected text.
SelItalic Boolean False Get and set the italic property for currently selected text. If any portion of the selected text is italic this will return true.
SelLength Integer 0 The number of highlighted characters.
SelList ListTypes None Set the list type of the currently selected text.
SelPlain Boolean False If true the selected text is all plain. When setting it will make all selected text plain (unformatted)
SelStart Integer 0 The position of the insertion point. A value of zero is before the first character.
SelStrike Boolean False Get and set the strikethrough property for currently selected text. If any portion of the selected text is struck this will return true.
SelText String “” The currently highlighted text. Setting this inserts text into the content.
SelTextBackgroundColor Color &cFFFFFF Get and Set the current background color of the selected text.
SelTextColor Color &c000000 Get and set the color property for currently selected text. When getting this value the control will return the first color it encounters in the selected text. If no color is encountered, black is returned.
SelTextSize Integer TextNormal Get and set the text size in pixels for currently selected text. The pixels limitation is from Quill (I prefer setting things in point.) When getting this value, the control will return the first size change it encounters in the selected text. If no size change is encountered the default font size of 12px is returned.
SelUnderline Boolean False Get and set the underline property for currently selected text. If any portion of the selected text is underlined this will return true.
SpellCheck Boolean True Enable or Disable the browser's built-in spell checking for the editor. Functionality and availability vary by browser.
ToolbarBackground Color &cFFFFFF Set the background color of the toolbar.
ToolbarVisible Boolean True Allows you to hide/show the toolbar.
WordWrap Boolean True Allows you to enable/disable word wrapping.

Examples

Hide a toolbar button

editorInstance.ToolbarItemVisible( GraffitiWebHTMLEditor.ToolbarItems.ButtonAlignLeft ) = False

EditorDefaults Event

Sub EditorDefaults(byRef DefaultFontFace as String, byRef DefaultFontSize as Integer) Handles EditorDefaults
  me.AddFont( "Roboto" )
 
  DefaultFontFace = "Courier New"
  DefaultFontSize = 12
End Sub

Adding Google Fonts

To add Google Fonts to GraffitiHTMLEditor, you should first include the Stylesheet in the App.HTMLHeader property, like so:

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"></html>
Then, in the EditorDefaults event, use AddFont to add the font family to the font selection menu:
<code xojo>Sub EditorDefaults(byRef DefaultFontFace as String, byRef DefaultFontSize as Integer) Handles EditorDefaults
  me.AddFont( "Pacifico" )
End Sub

Handling Toolbar Button Clicks

GraffitiHTMLEditor supplies events for insert buttons on the toolbar to allow you to apply a greater degree of customization to your project. When a user clicks on the Insert Link button, for example, the Toolbar_LinkClick event is fired. In this event you should ready and display a dialog to handle this functionality. The events are:

  • Toolbar_ImageClick
  • Toolbar_InsertTableClick
  • Toolbar_LinkClick
  • Toolbar_VideoClick

The dialogs used in the demo can be found in the demo project at Dialogs/HTMLEditor:

  • dlgHTMLInsertImage
  • dlgHTMLInsertLink
  • dlgHTMLInsertTable
  • dlgHTMLInsertVideo

Notes

ControlReady Event

Prior to R28, GraffitiHTMLEditor has a ControlReady event in which actions were placed to setup the editor. As this is no longer necessary, it has been removed. These action should be moved to the Open, Shown, or even the EditorDefaults events. |