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. ## Compatibility ### Framework API Version | 1.0 | 2.0 | | :---: | :---: | | True | True | ### Web | 32-Bit | 64-Bit | | :---: | :---: | | True | True | ## Enumerations | Name | Value | Description | | --- | :---: | --- | | HorizontalRuleStyles | Solid Dotted Dashed | Supported horizontal rule styles. | | Languages | EN CKB DA DE ES FR HE IT JA KO LV NL PL PT RO RU SE UA ZH | Supported UI languages. | | Views | WYSIWYG Code | Supported editing views. | ## Event Definitions | Name | 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 value as String | (None) | Raised when the user selects an item from a GraffitiEditorToolbarMenu that has been added to the toolbar. | | GotFocus | (None) | (None) | (None) | | Open | (None) | (None) | (None) | | 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 user selects a portion of the editor's content. | | Shown | (None) | (None) | (None) | | ViewChanged | (None) | (None) | Raised when the user switches between the WYSIWYG and Code views. | ## Methods | Name | Parameters | Return Type | Description | | --- | :---: | :---: | --- | | 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. | | 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. | | InsertImage | url as String altText as String = "" width as Integer = -1 height as Integer = -1 | (None) | Inserts the specified image at the current selection point of the editor. | | InsertLink | url as String text as String newWindow as Boolean = True | (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. | | SetFocus | (None) | (None) | (None) | | Stylesheet | (None) | String | Returns the stylesheet used for formatting content. | | 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. | | AllowStyleChangesOnly | Boolean | (None) | Denies attempts to editor text content by using the keyboard or mouse. | | 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) | Selection object. Auto-generated. | | State | GraffitiEditorState | (None) | State object. Auto-generated. | | 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. | ## Notes ### 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 Support 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 ## Examples ### Customizing the Toolbar The toolbar’s contents are entirely editable via the GraffitiEditor instance’s Toolbar property. ``` '// Delete all current items me.Toolbar.RemoveAll '// Create a new section to contain buttons var toolbarSection as new GraffitiEditorToolbarSection( "basic" ) '// Add the Bold button to the section toolbarSection.Add( new GraffitiEditorToolbarItem( GraffitiEditorToolbarItem.Types.Bold ) ). '// Add the Italic button to the section toolbarSection.Add( new GraffitiEditorToolbarItem( GraffitiEditorToolbarItem.Types.Italic ) ) '// Add the section to the toolbar me.Toolbar.Add( toolbarSection ) ```