Table of Contents
Images #
About #
GraffitiEditor is an advanced HTML WYSIWYG editor. Supports many HTML standard elements including images, video, audio, tables and much more. Completely customizable toolbar, and beautiful Light/Dark mode auto-switching.
Enumerations #
| Name | Values |
|---|---|
| HorizontalRuleStyles | Solid |
| Dotted | |
| Dashed | |
| Views | WYSIWYG |
| Code | |
| Languages | EN |
| EN | |
| CKB | |
| DA | |
| DE | |
| ES | |
| FR | |
| HE | |
| IT | |
| JA | |
| KO | |
| LV | |
| NL | |
| PL | |
| PT | |
| RO | |
| RU | |
| SE | |
| UA | |
| ZH |
Constants #
This class exposes no constants.
Events #
| Definition | Parameters | Return Type | Description |
|---|---|---|---|
| Changed | None | None | Raised when the content has been changed by the user. |
| CustomButtonPressed | button as GraffitiEditorToolbarButton | None | Raised when a GraffitiEditorToolbarButton that has been added to the toolbar is pressed. |
| CustomMenuSelected | menu as GraffitiEditorToolbarMenu | None | Raised when the user selects an item from a GraffitiEditorToolbarMenu that has been added to the toolbar. |
| value as String | |||
| Ready | None | None | Raised when the component is fully displayed and ready. |
| SaveButtonPressed | None | None | Raised when the user clicks the Save button, if the Save button is currently on the toolbar. |
| ViewChanged | None | None | Raised when the user switches between the WYSIWYG and Code views. |
Methods #
| Definition | Parameters | Return Type | Description |
|---|---|---|---|
| AllowedTags | None | String() | Returns any custom HTML tags that have been aded to be supported in the editor. |
| AllowedTags | ParamArray tags() as String | None | Adds the specified HTML tags to be support in the editor. |
| Append | html as String | None | Appends the provided HTML to the content of the editor. |
| DisallowedTags | None | String() | Returns any HTML tags that have been forbidden to be used in the editor. |
| DisallowedTags | ParamArray tags() as String | None | Adds the specified HTML tags to the list of those which are forbidden in the editor. |
| FormattedHTML | None | String | Returns the HTML content of the editor in a formatted representation. |
| Insert | html as String | None | Inserts the provided HTML as the current selection point of the editor. |
| InsertAudio | url as String | None | Inserts an AUDIO element at the current selection point of the editor. |
| InsertHorizontalRule | style as HorizontalRuleStyles | None | Inserts an HR element at the current selection point of the editor. |
| InsertHTML | html as String selectContent as Boolean = False | None | Inserts and optionally selects a block of HTML. |
| InsertImage | f as FolderItem | None | Inserts the specified image at the current selection point of the editor. |
| InsertImage | url as String | None | Inserts the specified image at the current selection point of the editor. Provide -1 for width and/or height to automatically size. |
| altText as String = “” | |||
| width as Integer = -1 | |||
| height as Integer = -1 | |||
| InsertLink | url as String | None | Inserts a link at the current selection point of the editor. |
| text as String | |||
| newWindow as Boolean = True | |||
| relationship as String = “” | |||
| InsertTable | rows as Integer = 2 | None | Inserts a table at the current selection point of the editor. |
| columns as Integer = 2 | |||
| hasHeader as Boolean = False | |||
| InsertVideo | url as String | None | Inserts a VIDEO element at the current selection point of the editor. Attempts to automatically parse YouTube and Vimeo links. |
| ToPage | PageTitle as String | None | Creates a valid HTML page complete with headers using the current content of the editor. |
| includeStyleBlock as Boolean = False | |||
| additionalCSS as String = “” |
Properties #
| Name | Type | Default Value | Description |
|---|---|---|---|
| AcceptTabs | Boolean | True | When False, Tab and Shift+Tab will change the focused control within the application window. |
Alert ReadOnly | GraffitiEditorAlert | Generated | Access to Alert functionality. |
| AllowMediaUploads | Boolean | True | When False, pasting media will be disabled. |
| Enabled | Boolean | True | Determines whether the user can interact with the component’s toolbar or change its contents. |
Fonts ReadOnly | GraffitiEditorFonts | Generated | Access to font management functionality. |
History ReadOnly | GraffitiEditorHistory | Generated | Access to editor history functionality. |
| HTML | String | “” | Current value of the editor. |
| Locale | Languages | Languages.EN | Language used to display the toolbar tooltips. |
| Padding | Integer | 16 | Pixel size of the editor’s padding. |
| ReadOnly | Boolean | False | Determines whether the user can interact with the component’s toolbar or change its contents without significantly altering its appearance. |
| RTL | Boolean | False | Right-to-left display. |
Selection ReadOnly | GraffitiEditorSelection | Generated | Access to Selection functionality. |
| SpellCheck | Boolean | True | When True, spell checking will be enabled on the component. |
| SpellCheckLanguage | String | “en-US” | Locale to use for checking spelling. |
State ReadOnly | GraffitiEditorState | Generated | Access to state functionality. |
Styles ReadOnly | GraffitiEditorStyles | Generated | Access to custom Styles functionality. |
Templates ReadOnly | GraffitiEditorTemplates | Generated | Access to Templates functionality. |
Toolbar ReadOnly | GraffitiEditorToolbar | Generated | Access to Toolbar functionality. |
| View | Views | Views.WYSIWYG | Current editor view. |
Examples #
Setting Font Defaults #
Font settings are stored in the GraffitiEditorFonts class that is accessible in the Fonts property of the GraffitiEditor instance. Changes to these settings can be made at any time, but it is recommended that you do so in the Opening event.
me.Fonts.DefaultFace = "Verdana"
me.Fonts.DefaultSize = 23
me.Fonts.DefaultLineHeight = 1.25Notes #
Custom Toolbar Buttons #
For many plugins to function, they must have a corresponding Toolbar button. For example, if you wish to create your own implementation for inserting links but retain the edit dialog that is displayed when a user clicks a link, you will need to have the built-in link button on the toolbar, but hide it using CSS in the CustomCSS property:
button[data-command="link"] {
display: none;
}Data Command Values #
- blockquote
- image
- link
- video
- audio
- align
- font
- fontColor
- fontSize
- formatBlock
- hiliteColor
- horizontalRule
- lineHeight
- list
- paragraphStyle
- table
- template
- textStyle
Default Supported HTML Tags #
- br
- p
- div
- pre
- blockquote
- h1
- h2
- h3
- h4
- h5
- h6
- ol
- ul
- li
- hr
- figure
- figcaption
- img
- iframe
- audio
- video
- table
- thead
- tbody
- tr
- th
- td
- a
- b
- strong
- var
- i
- em
- u
- ins
- s
- span
- strike
- del
- sub
- sup
- code
- svg
- path
- details
- summary