Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
web:htmleditor [2019/06/06 20:53]
agcyphers [Methods]
web:htmleditor [2019/11/10 12:35] (current)
agcyphers [Examples]
Line 110: Line 110:
 | CanRedo ''​Read-Only''​ | Boolean | False | When True, calling the Redo method results in a change of contents. | | CanRedo ''​Read-Only''​ | Boolean | False | When True, calling the Redo method results in a change of contents. |
 | CanUndo ''​Read-Only''​ | Boolean | False | When True, calling the Undo method results in a change of contents. | | CanUndo ''​Read-Only''​ | Boolean | False | When True, calling the Undo method results in a change of contents. |
 +| DarkMode | Boolean | False | When True, will style the editor and toolbar to match Dark themes. |
 | EditorBackground | Color | &​cFFFFFF | Background color of the editor area. | | EditorBackground | Color | &​cFFFFFF | Background color of the editor area. |
 | EditorMarginBottom | Integer | 0 | Margins inside the editor area. | | EditorMarginBottom | Integer | 0 | Margins inside the editor area. |
Line 115: Line 116:
 | EditorMarginRight | ::: | ::: | ::: | | EditorMarginRight | ::: | ::: | ::: |
 | EditorMarginTop | ::: | ::: | ::: | | EditorMarginTop | ::: | ::: | ::: |
-| HTML | [[http://​developer.xojo.com/​string|String]] | ""​ | Get and set the HTML contents. | +| HTML | String | ""​ | Get and set the HTML contents. | 
-| Length ​| [[http://​developer.xojo.com/​integer|Integer]] | 0 | The number of characters in the editor. |+| Length | Integer | 0 | The number of characters in the editor. |
 | PlainText | String | ""​ | Retrieve the HTML property stripped of all HTML tags, or replace the contents with a plain-text string. | | PlainText | String | ""​ | Retrieve the HTML property stripped of all HTML tags, or replace the contents with a plain-text string. |
 | SelAlign | Alignments | Left | Update the text alignment of the current selection. | | SelAlign | Alignments | Left | Update the text alignment of the current selection. |
-| SelBold ​| [[http://​developer.xojo.com/​boolean|Boolean]] | False | Get and set the bold property for currently selected text. If any portion of the selected text is bold this will return true. |+| SelBold | Boolean | False | Get and set the bold property for currently selected text. If any portion of the selected text is bold this will return true. |
 | SelHeader | Headers | HeaderNone | Set the Header style of the currently selected text. | | SelHeader | Headers | HeaderNone | Set the Header style of the currently selected text. |
-| SelItalic ​| [[http://​developer.xojo.com/​boolean|Boolean]] | False | Get and set the italic property for currently selected text. If any portion of the selected text is italic this will return true. | +| SelItalic | Boolean | False | Get and set the italic property for currently selected text. If any portion of the selected text is italic this will return true. | 
-| SelLength ​| [[http://​developer.xojo.com/​integer|Integer]] | 0 | The number of highlighted characters. |+| SelLength | Integer | 0 | The number of highlighted characters. |
 | SelList | ListTypes | None | Set the list type of the currently selected text. | | SelList | ListTypes | None | Set the list type of the currently selected text. |
-| SelPlain ​| [[http://​developer.xojo.com/​boolean|Boolean]] | False | If true the selected text is all plain. When setting it will make all selected text plain (unformatted) | +| SelPlain | Boolean | False | If true the selected text is all plain. When setting it will make all selected text plain (unformatted) | 
-| SelStart ​| [[http://​developer.xojo.com/​integer|Integer]] | 0 | The position of the insertion point. A value of zero is before the first character. | +| SelStart | Integer | 0 | The position of the insertion point. A value of zero is before the first character. | 
-| SelStrike ​| [[http://​developer.xojo.com/​boolean|Boolean]] | False | Get and set the strikethrough property for currently selected text. If any portion of the selected text is struck this will return true. | +| SelStrike | Boolean | False | Get and set the strikethrough property for currently selected text. If any portion of the selected text is struck this will return true. | 
-| SelText ​| [[http://​developer.xojo.com/​string|String]] | ""​ | The currently highlighted text. Setting this inserts text into the content. |+| SelText | String | ""​ | The currently highlighted text. Setting this inserts text into the content. |
 | SelTextBackgroundColor | Color | &​cFFFFFF | Get and Set the current background color of the selected text. | | SelTextBackgroundColor | Color | &​cFFFFFF | Get and Set the current background color of the selected text. |
-| SelTextColor ​| [[http://​developer.xojo.com/​color|Color]] | &​c000000 | Get and set the color property for currently selected text. When getting this value the control will return the first color it encounters in the selected text. If no color is encountered,​ black is returned. | +| SelTextColor | Color | &​c000000 | Get and set the color property for currently selected text. When getting this value the control will return the first color it encounters in the selected text. If no color is encountered,​ black is returned. | 
-| SelTextSize ​| [[http://​developer.xojo.com/​integer|Integer]] | TextNormal | Get and set the text size in pixels for currently selected text. The pixels limitation is from Quill (I prefer setting things in point.) When getting this value, the control will return the first size change it encounters in the selected text. If no size change is encountered the default font size of 12px is returned. | +| SelTextSize | Integer | TextNormal | Get and set the text size in pixels for currently selected text. The pixels limitation is from Quill (I prefer setting things in point.) When getting this value, the control will return the first size change it encounters in the selected text. If no size change is encountered the default font size of 12px is returned. | 
-| SelUnderline ​| [[http://​developer.xojo.com/​boolean|Boolean]] | False | Get and set the underline property for currently selected text. If any portion of the selected text is underlined this will return true. |+| SelUnderline | Boolean | False | Get and set the underline property for currently selected text. If any portion of the selected text is underlined this will return true. |
 | SpellCheck | Boolean | True | Enable or Disable the browser'​s built-in spell checking for the editor. Functionality and availability vary by browser. | | SpellCheck | Boolean | True | Enable or Disable the browser'​s built-in spell checking for the editor. Functionality and availability vary by browser. |
 | ToolbarBackground | Color | &​cFFFFFF | Set the background color of the toolbar. | | ToolbarBackground | Color | &​cFFFFFF | Set the background color of the toolbar. |
Line 156: Line 157:
   me.AddFont( "​Pacifico"​ )   me.AddFont( "​Pacifico"​ )
 End Sub</​code>​ End Sub</​code>​
 +
 +=== Handling Toolbar Button Clicks ===
 +GraffitiHTMLEditor supplies events for insert buttons on the toolbar to allow you to apply a greater degree of customization to your project. When a user clicks on the Insert Link button, for example, the Toolbar_LinkClick event is fired. In this event you should ready and display a dialog to handle this functionality.
 +The events are:
 +  * Toolbar_ImageClick
 +  * Toolbar_InsertTableClick
 +  * Toolbar_LinkClick
 +  * Toolbar_VideoClick
 +
 +The dialogs used in the demo can be found in the demo project at Dialogs/​HTMLEditor:​
 +  * dlgHTMLInsertImage
 +  * dlgHTMLInsertLink
 +  * dlgHTMLInsertTable
 +  * dlgHTMLInsertVideo
 ==== Notes ==== ==== Notes ====
 === ControlReady Event === === ControlReady Event ===
 Prior to R28, GraffitiHTMLEditor has a ControlReady event in which actions were placed to setup the editor. As this is no longer necessary, it has been removed. These action should be moved to the Open, Shown, or even the EditorDefaults events. | Prior to R28, GraffitiHTMLEditor has a ControlReady event in which actions were placed to setup the editor. As this is no longer necessary, it has been removed. These action should be moved to the Open, Shown, or even the EditorDefaults events. |