GraffitiEditor

Popular Searches gridgraffitigraffitistylegraffgra
View Categories
Table of Contents

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 #

Name Type Value

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
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.
ViewChanged None None Raised when the user switches between the WYSIWYG and Code views.

Methods #

Definition Parameters Return Type Description
Append html as String None Appends the provided HTML to the content of the editor.
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 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
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.
StateIsDirty None Boolean Returns the current changed state of the editor.
StateReset None None Resets the current change state of the editor.
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 = “”
ZoomReset None None Resets the Zoom level to 100%.
ZoomText percent as Integer None Zooms the editor portion of the component by a percentage value.
ZoomTextIn None None Zooms the editor portion of the component by 10%.
ZoomTextOut None None Zooms the editor portion of the component by -10%.

Properties #

Name Type Default Value Description
Alert ReadOnly GraffitiEditorAlert Generated Access to Alert functionality.
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.
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 #

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 )

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