Table of Contents
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. |
| 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. |