Requirements

Operating System Information
MacOS 10.10 or above
Windows WebKit Renderer

Enumerations

Name Values
ToolbarItems SectionFont
SectionDecoration
SectionColor
SectionScript
SectionBlock
SectionList
SectionIndent
SectionPosition
SectionInsert
SectionClean
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

Constants

Name Type Value Description
AlignLeft Integer 0 Left alignment of text.
AlignCenter Integer 1 Center alignment of text.
AlignRight Integer 2 Right alignment of text.
HeaderNone Integer 0 No header tag.
Header1 Integer 1 Corresponds to <H1>
Header2 Integer 2 Corresponds to <H2>
Header3 Integer 2 Corresponds to <H3>
Header4 Integer 2 Corresponds to <H4>

Events

Definition Description
ContextClick( X as Integer, Y as Integer ) Raised when the user right-clicks the editor area.
EditorDefaults( byRef DefaultFontFace as String, byRef DefaultFontSize as Integer ) Raised during initialization to set font defaults for the editor.
MenuClear() as Boolean This event is fired when the user has selected Clear from the edit menu. Return True to override default.
MenuCopy() as Boolean Fired when user selects Copy from the edit menu. Return True to override default.
MenuCut() as Boolean Fired when user selects Cut from the edit menu. Return True to override default.
MenuPaste() as Boolean Fired when user selects Paste from the edit menu. Return True to override default.
MenuRedo() as Boolean Fired when user selects Redo from the edit menu. Return True to override default.
MenuSelectAll() as Boolean Fired when user selects Select All from the edit menu. Return True to override default.
MenuUndo() as Boolean Fired when user selects Unde from the edit menu. Return True to override default.
SelChange() Fired when the user changes the current selection in the editor.
TextChanged This event triggers when the text changes.
Toolbar_BackgroundClick() Fired when the user clicks the Background Color button on the toolbar.
Toolbar_ButtonClick(buttonID as String Fired when the user clicks a custom button on the toolbar.
Toolbar_ColorClick() Fired when the user clicks the Foreground Color button on the toolbar.
Toolbar_ImageClick() Fired when the user clicks the Insert Image button on the toolbar.
Toolbar_InsertTableClick() Fired when the user clicks the Insert Table button on the toolbar.
Toolbar_LinkClick() Fired when the user clicks the Insert Link button on the toolbar.
Toolbar_VideoClick() Fired when the user clicks the Insert Video button on the toolbar.
UserDroppedImage(url as String) as Boolean This event triggers if a user drops an image onto HTML Edit. Useful to override the default insert behavior. The dropped file is passed as a URL, not a FolderItem. Return True to handle the event yourself, or false to allow the automatic insert.

Methods

Definition Description
ClearUndoHistory() Clears the Undo/Redo stack.
Copy() Copies the currently selected text to the clipboard.
Cut() Copies the currently selected text to the clipboard, then removes it from the editor.
Delete() Deletes the currently selected text from the editor. This has the same effect as
GraffitiHTMLEditor.SelText = ""
ForceUpdate() Forces the instance to update the Selection, Content, and Format properties from the display.
InsertAudio(SourceURL as String) Inserts an audio player element. Note that the element will not be usable in the editor.
InsertDeltas( theDelta as JSONItem ) (Advanced Use Only) Allows the insertion of QuillJS deltas directly in to the editor instance.
InsertFile(f as FolderItem, optional atPosition as Integer) If F points to an image file, the image is inserted via a call to InsertImage, otherwise a link is inserted in to the document using the local URL path type.
InsertHorizontalRule() Inserts a Horizontal Rule in to the document.
InsertHTML( htmlString as String ) Inserts the specified HTML at current selection.
InsertImage(url as String, optional atPosition as Integer) Insert an image into the content area. atPosition is optional, and if omitted the current cursor location will be used as an insertion point. Note that if you insert an image on the internet your application will attempt to connect to the internet.
InsertImage(f as FolderItem, optional atPosition as Integer)
InsertLink(url as String, title as String = “”, atPosition as Integer = 0) Inserts a link into the content area. atPosition is optional, and if omitted the current cursor location will be used as an insertion point.
InsertTable(Rows as Integer, Columns as Integer) Inserts a table in to the document.
InsertTableColumn() Adds a column to the current table.
InsertTableRow() Adds a row to the current table.
InsertTweet(TweetID as Int64) Inserts a Tweet using the Tweet's unique ID.
InsertTweet(URL as String) Inserts a Tweet using the Tweet's URL.
InsertVideo(URL as String) Inserts a video element in to the document.
Paste() Pastes the current clipboard text at the currently selected area of the editor. Note that if there is text selected, this will replace that selected text.
Redo() Steps forward in the change stack, if a change has previously been undone.
SelectAll() Select all contents.
ToolbarAddButton(ButtonID as String, ButtonCaption as String, ButtonTooltip as String = “”) Adds a custom button to the toolbar, in the Custom section.
ToolbarItemVisible(ParamArray theItem as ToolbarItems, assigns value as Boolean) Sets the visibility of one or more toolbar buttons.
ToolbarItemVisible_Custom(CustomID as String, Value as Boolean) Sets the visibility of a custom button in the toolbar.
ToolbarRemoveButton(ButtonID as String) Removes a custom button from the toolbar.
theItem as ToolbarItems, theTooltip as String, CustomButtonID as String = “” Sets the tooltip of a toolbar item.
Undo() Steps backward in the change stack to remove a previous change.

Properties

Name Type Default Value Description
CanRedo Read-Only Boolean False Whether Redo is currently available.
CanUndo Read-Only Boolean False Whether Undo is currently available.
DarkMode Boolean False When True, the control is restyled to more closely match the new OS dark modes.
EditorBackground Color &cFFFFFF Controls the background color of the entire editor (not toolbar).
Enabled Boolean True Whether or not the edit field is enabled. Due to current limitations one cannot disable the rich text toolbar, however formatting conditions may not be changed by the user while enabled is false.
HTML String “” Get and set the HTML contents.
Length Integer 0 The number of characters in the editor.
PlainText String “” The current content of the editor with all HTML removed.
SelAlign Integer AlignLeft Current alignment of text within the editor.
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 Integer HeaderNone Header style of 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.
SelListChecked Boolean False Determines if current selection is a checked list.
SelListOrdered Boolean False Determines if current selection is an ordered list.
SelListUnordered Boolean False Determines if current selection is an ordered list.
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.
SelSubscript Boolean False Subscript setting of current text.
SelSuperscript Boolean False Superscript setting of current text.
SelText String “” The currently highlighted text. Setting this inserts text into the content.
SelTextBackground Color &cFFFFFF Get and set the color property for currently selected text's background color. When getting this value the control will return the first color it encounters in the selected text. If no color is encountered, white is returned.
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 12 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 False Controls whether the OS/Browser spelling checker is enabled on the editor.
ToolbarBackgroundColor Color &cFFFFFF Controls the background color of the toolbar and buttons.
ToolbarVisible Boolean True Controls the visibility of the toolbar.
WordWrap Boolean True If False, content will not wrap lines.

Examples

Default PushButton

When using GraffitiHTMLEditor with a PushButton that has Default set to True, Xojo will fire the PushButton's action event when pressing Enter or Return in the GraffitiHTMLEditor. To workaround this, at the top of your PushButton's action code, add the following line:

If me.Window.Focus IsA GraffitiHTMLEditor Then Return

Notes

HTML Formatting

As HTMLEditor is a restricted editor for HTML, some tags will not carry over. As an example, <div> tags are converted to <p> and <span> tags with the styling applied to the <span> tag.

Changes to this Page

Date Edit Editor
8/1/2017 Updated for Release 24. Anthony G. Cyphers
4/14/2017 Updated list of methods. Anthony G. Cyphers
4/14/2017 Removed kLoopAttempts Constant.
  • Last modified: 6 weeks ago
  • by agcyphers