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 #


Constants #

This class exposes no constants.

Events #

DefinitionParametersReturn TypeDescription
ChangedNoneNoneRaised when the content has been changed by the user.
CustomButtonPressedbutton as GraffitiEditorToolbarButtonNoneRaised when a GraffitiEditorToolbarButton that has been added to the toolbar is pressed.
CustomMenuSelectedmenu as GraffitiEditorToolbarMenuNoneRaised when the user selects an item from a GraffitiEditorToolbarMenu that has been added to the toolbar.
value as String
ReadyNoneNoneRaised when the component is fully displayed and ready.
SaveButtonPressedNoneNoneRaised when the user clicks the Save button, if the Save button is currently on the toolbar.
ViewChangedNoneNoneRaised when the user switches between the WYSIWYG and Code views.

Methods #

DefinitionParametersReturn TypeDescription
AllowedTagsNoneString()Returns any custom HTML tags that have been aded to be supported in the editor.
AllowedTagsParamArray tags() as StringNoneAdds the specified HTML tags to be support in the editor.
Appendhtml as StringNoneAppends the provided HTML to the content of the editor.
DisallowedTagsNoneString()Returns any HTML tags that have been forbidden to be used in the editor.
DisallowedTagsParamArray tags() as StringNoneAdds the specified HTML tags to the list of those which are forbidden in the editor.
FormattedHTMLNoneStringReturns the HTML content of the editor in a formatted representation.
HideHelpersNoneNoneHides any visible popup menus and element editors.
Inserthtml as StringNoneInserts the provided HTML as the current selection point of the editor.
InsertAudiourl as StringNoneInserts an AUDIO element at the current selection point of the editor.
InsertHorizontalRulestyle as HorizontalRuleStylesNoneInserts an HR element at the current selection point of the editor.
InsertHTMLhtml as String
selectContent as Boolean = False
NoneInserts and optionally selects a block of HTML.
InsertImagef as FolderItemNoneInserts the specified image at the current selection point of the editor.
InsertImageurl as StringNoneInserts 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
InsertLinkurl as StringNoneInserts a link at the current selection point of the editor.
text as String
newWindow as Boolean = True
relationship as String = “”
InsertTablerows as Integer = 2NoneInserts a table at the current selection point of the editor.
columns as Integer = 2
hasHeader as Boolean = False
InsertVideourl as StringNoneInserts a VIDEO element at the current selection point of the editor. Attempts to automatically parse YouTube and Vimeo links.
ToPagePageTitle as StringNoneCreates a valid HTML page complete with headers using the current content of the editor.
includeStyleBlock as Boolean = False
additionalCSS as String = “”

Properties #

NameTypeDefault ValueDescription
AcceptTabsBooleanTrueWhen False, Tab and Shift+Tab will change the focused control within the application window.
Alert ReadOnlyGraffitiEditorAlertGeneratedAccess to Alert functionality.
AllowMediaUploadsBooleanTrueWhen False, pasting media will be disabled.
EnabledBooleanTrueDetermines whether the user can interact with the component’s toolbar or change its contents.
Fonts ReadOnlyGraffitiEditorFontsGeneratedAccess to font management functionality.
History ReadOnlyGraffitiEditorHistoryGeneratedAccess to editor history functionality.
HTMLString“”Current value of the editor.
LocaleLanguagesLanguages.ENLanguage used to display the toolbar tooltips.
PaddingInteger16Pixel size of the editor’s padding.
ReadOnlyBooleanFalseDetermines whether the user can interact with the component’s toolbar or change its contents without significantly altering its appearance.
RTLBooleanFalseRight-to-left display.
Selection ReadOnlyGraffitiEditorSelectionGeneratedAccess to Selection functionality.
SpellCheckBooleanTrueWhen True, spell checking will be enabled on the component.
SpellCheckLanguageString“en-US”Locale to use for checking spelling.
State ReadOnlyGraffitiEditorStateGeneratedAccess to state functionality.
Styles ReadOnlyGraffitiEditorStylesGeneratedAccess to custom Styles functionality.
Templates ReadOnlyGraffitiEditorTemplatesGeneratedAccess to Templates functionality.
Toolbar ReadOnlyGraffitiEditorToolbarGeneratedAccess to Toolbar functionality.
ViewViewsViews.WYSIWYGCurrent 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.25

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 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