GRAFFITIEDITOR - GRAFFITISUITE DOCS

# GraffitiEditor Class Inherits GraffitiWebUIControl ## 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. ## Preview ![](https://graffitisuite.com/wp-content/uploads/2023/05/desktop_editor1-1-150x150.png) Previous Next ## Warnings ### HTML Content Support HTML supplied to GraffitiEditor may not render entirely as expected if it did not originate from GraffitiEditor. Conversion of this HTML to match the expected formatting is attempted, but may produce unexpected results. Support for these incongruities is not provided. ### Linux Support Support varies by Linux distribution and installed libwebkit library and version. ### Windows Support Requires the presence of an HTMLViewer on a window or container within the project. ## Compatibility ### Framework API Version | 1.0 | 2.0 | | :---: | :---: | | True | True | ### Desktop | 32-Bit | 64-Bit | | :---: | :---: | | True | True | ## Attributes | Name | Value | | --- | --- | | DefaultEvent | "Changed" | ## Enumerations | Name | Value | Description | | --- | :---: | --- | | HorizontalRuleStyles | Solid Dotted Dashed | Possible drawing styles for Horizontal Rules. | | Languages | EN CKB DA DE ES FR HE IT JA KO LV NL PL PT RO RU SE UA ZH | Supported languages. | | Views | WYSIWYG Code | Supported view types. | ## Event Definitions | Name | Parameters | Return Type | Description | | --- | :---: | :---: | --- | | Changed | (None) | (None) | Raised when the content has been changed by the user. | | Closing | (None) | (None) | (None) | | CustomButtonPressed | button as GraffitiEditorToolbarButton | (None) | Raised when a GraffitiEditorToolbarButton that has been added to the toolbar is pressed. | | CustomMenuSelected | menu as GraffitiEditorToolbarMenu value as String | (None) | Raised when the user selects an item from a GraffitiEditorToolbarMenu that has been added to the toolbar. | | FocusLost | (None) | (None) | (None) | | FocusReceived | (None) | (None) | (None) | | Opening | (None) | (None) | (None) | | 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. | | SelectionChanged | (None) | (None) | Raised when the user has changed the selected text/elements. | | ShortcutPressed | shortcut as GraffitiEditorShortcut | (None) | Raised when the user presses a registered keyboard shortcut. | | ViewChanged | (None) | (None) | Raised when the user switches between the WYSIWYG and Code views. | ## Methods | Name | 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) | Returns any custom HTML tags that have been aded to be supported in the editor. | | Append | html as String | (None) | Appends the provided HTML to the content of the editor. | | Constructor | (None) | (None) | Creates a new instance of the class. | | DisallowedTags | (None) | String | Returns any HTML tags that have been forbidden to be used in the editor. | | DisallowedTags | ParamArray tags() as String | (None) | Returns any HTML tags that have been forbidden to be used in the editor. | | Focus | (None) | (None) | Forces focus to the editor area. | | FormattedHTML | (None) | String | Returns the HTML content of the editor in a formatted representation. | | HideHelpers | (None) | (None) | Hides any visible popup menus and element editors. | | HTMLInline | (None) | String | Returns the HTML content with styles inlined. | | Insert | html as String selectContent as Boolean = False | (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. | | InsertImage | f as FolderItem dataAttribute as Pair = Nil | (None) | Inserts the specified image at the current selection point of the editor. | | InsertImage | url as String altText as String = "" width as Integer = -1 height as Integer = -1 dataAttribute as Pair = nil | (None) | Inserts the specified image at the current selection point of the editor. | | InsertLink | url as String text as String newWindow as Boolean = True relationship as String = "" | (None) | Inserts a link at the current selection point of the editor. | | InsertTable | rows as Integer = 2 columns as Integer = 2 hasHeader as Boolean = False | (None) | Inserts a table at the current selection point of the editor. | | 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. | | Print | showPrintDialog As Boolean = True | (None) | Launches a print preview, allowing users to print the content. | | RegisterShortcut | shortcut as GraffitiEditorShortcut | (None) | Registers a shortcut key combination to raise the ShortcutPressed event when the editor has focus. | | SetFocus | (None) | (None) | Sets focus to the editor area. | | ShowAudioModal | (None) | (None) | Shows the in-editor audio modal. | | ShowImageModal | (None) | (None) | Shows the in-editor image modal. | | ShowLinkModal | (None) | (None) | Shows the in-editor link modal. | | ShowVideoModal | (None) | (None) | Shows the in-editor video modal. | | Stylesheet | (None) | String | Returns the base stylesheet to be used for display outside the control. | | ToPage | PageTitle as String includeStyleBlock as Boolean = False additionalCSS as String = "" | String | Creates a valid HTML page complete with headers using the current content of the editor. | ## Properties | Name | Type | Default Value | Description | | --- | :---: | :---: | --- | | Alert | GraffitiEditorAlert | (None) | Access to Alert functionality. | | AllowMediaUploads | Boolean | (None) | When False, pasting media will be disabled. | | AllowStyleChangesOnly | Boolean | (None) | Denies attempts to editor text content by using the keyboard or mouse. | | Autocorrect | Boolean | (None) | (None) | | CustomCSS | String | (None) | Custom CSS string to apply to the view. | | Enabled | Boolean | (None) | Determines whether the user can interact with the component's toolbar or change its contents. | | Fonts | GraffitiEditorFonts | (None) | Access to font management functionality. | | History | GraffitiEditorHistory | (None) | Access to editor history functionality. | | HTML | String | (None) | Current value of the editor. | | Locale | Languages | (None) | Language used to display the toolbar tooltips. | | Padding | Integer | (None) | Pixel size of the editor's padding. | | ReadOnly | Boolean | (None) | Determines whether the user can interact with the component's toolbar or change its contents without significantly altering its appearance. | | RTL | Boolean | (None) | Right-to-left display. | | Selection | GraffitiEditorSelection | (None) | Access to Selection functionality. | | SpellCheck | Boolean | (None) | When True, spell checking will be enabled on the component. | | SpellCheckLanguage | String | (None) | Locale to use for checking spelling. | | State | GraffitiEditorState | (None) | Access to state functionality. | | Styles | GraffitiEditorStyles | (None) | Access to custom Styles functionality. | | Templates | GraffitiEditorTemplates | (None) | Access to Templates functionality. | | Toolbar | GraffitiEditorToolbar | (None) | Access to Toolbar functionality. | | View | Views | (None) | Current editor view. |