This example shows how create custom textEditors for the TextEditingTool.

Above is a Diagram with two nodes, each holding several TextBlocks. The TextEditingTool on the diagram has a custom editor that consists of an HTML select box with several preset values. This editor will change the text as soon as the user presses Enter, Tab, or clicks away from the select box.

TextBlocks can also have their own custom editors that override the TextEditingTool's editor, by setting TextBlock.textEditor. The last TextBlock in each node has its own custom editor that consists of an HTML div with several radio buttons. This editor will change the text as soon as an option is selected.

TextBlocks in this sample make use of TextBlock.choices to inform the custom text editing tools.

The code for these text editors is in TextEditorSelectBox.js and TextEditorRadioButtons.js.

You can see a re-implementation of the default text editors in the Text Editor extension.

GoJS Features in this sample

HTML Interaction

GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.

More information can be found in the GoJS Intro.

Related samples