GraffitiEditor

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.
HideHelpers	None	None	Hides any visible popup menus and element editors.
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.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

Modifying the Toolbar #

The Toolbar property is setup upon creation with a wide range of functionality. If you wish to remove a specific feature from the GraffitiEditorToolbar, refer to the GraffitiEditorToolbar.Constructor method to locate the specific GraffitiEditorToolbarButton or GraffitiEditorToolbarSection. You will then use this information to traverse the Toolbar and make the necessary changes. To remove, for example, the ViewSource button:

'// Get the "View" section of the GraffitiEditorToolbar.
var viewSection as GraffitiEditorToolbarSection = me.Toolbar.Item( "View" )
'// Sanity check.
if viewSection <> nil then
  '// Find the ViewSource button within the section,
  var sourceButtonIndex as Integer = viewSection.Item( GraffitiEditorToolbarItem.Types.ViewSource )
  '// Remove it if found.
  if sourceButtonIndex >= 0 then viewSection.Remove( sourceButtonIndex )
end if