Srdjan Djenader edited this page Nov 29, 2017 · 1 revision

Provides a tool for adding text to a drawing.


Enabling the Plugin

plugins: [
    'Text',
    'Color',
    'TextLineHeight',
    'TextAlign',
    'TextFontFamily',
    'TextFontSize',
    'TextFontWeight',
    'TextFontStyle',
    'TextDecoration',
    'TextColor',
    'TextBackgroundColor'
]

Configuration

pluginsConfig: {
    'Text': {
        fonts: {
            'Georgia': 'Georgia, serif',
            'Palatino': "'Palatino Linotype', 'Book Antiqua', Palatino, serif",
            'Times New Roman': "'Times New Roman', Times, serif",
            'Arial': 'Arial, Helvetica, sans-serif',
            'Arial Black': "'Arial Black', Gadget, sans-serif",
            'Comic Sans MS': "'Comic Sans MS', cursive, sans-serif",
            'Impact': 'Impact, Charcoal, sans-serif',
            'Lucida Grande': "'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
            'Tahoma': 'Tahoma, Geneva, sans-serif',
            'Trebuchet MS': "'Trebuchet MS', Helvetica, sans-serif",
            'Verdana': 'Verdana, Geneva, sans-serif',
            'Courier New': "'Courier New', Courier, monospace",
            'Lucida Console': "'Lucida Console', Monaco, monospace"
        },
        defaultFont: 'Palatino',
        editIconMode : true,
        editIconSize : 'medium',
        defaultValues: {
            fontSize: 72,
            lineHeight: 2,
            textFontWeight: 'bold'
        },
        predefined: {
            fontSize: [8, 12, 14, 16, 32, 40, 72],
            lineHeight: [1, 2, 3, 4, 6]
       }
    }
}
  • fonts:
    • Type: Object.
    • The keys of the object are font names which are displayed as a list.
      The corresponding values hold the values for the CSS font-family property.
  • defaultFont:
    • The default font that is selected when an object is being edited.
  • editIconMode:
    • Type: Boolean.
    • If set to true an edit symbol is shown above each text box and the default behaviour to edit a text while clicking in text box is disabled.
    • This feature will be mostly used on touch devices due some problems recognizing a tap gesture on text box.
  • editIconSize:
    • Type: String.
    • If editIconMode is set to true you can set the size of the edit symbol:
      • small
      • medium
      • large
  • The Color or ColorHtml5 plugin allows the user to specify the text color.
  • predefined:
    • Optional setting. If not specified, the settings shown in the example will be used.
    • List of available values for control settings via dropdown in UI.
    • Type: Object.
      • fontSize is a array with available font size numbers.
      • lineHeight is a array with available line height numbers.
  • defaultValues:
    • Optional setting. If not specified, the settings shown in the example will be used.
    • List of default values of styles.
    • Type: Object.
      • fontSize is an integer for default font size.
      • lineHeight is an integer for default line height.
      • textFontWeight is a string for default font weight.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.