Text Engines
Customer's Canvas provides two text engines for manipulating text elements in the Design Editor:
WYSIWYG Text Engine
The WYSIWYG (What You See Is What You Get) text engine is enabled by default. It allows your users to edit text elements directly on the canvas with real-time visual feedback.
Features
- In-place editing: Users can click on text and edit it directly on the canvas
- Rich text formatting: Full support for font styles, colors, sizes, and other formatting options
- Real-time preview: Changes are immediately visible as they are made
- Toolbar controls: The top toolbar displays buttons for changing layer properties
When to Use
Use the WYSIWYG text engine when you want to provide a modern, intuitive editing experience that allows users to see their changes in real-time.
Classic Text Engine
The Classic text engine uses pop-up boxes for editing text. It provides a more traditional text editing experience with separate input fields.
Features
- Popup editor: Text is edited in a separate dialog or overlay
- Plain text mode: Simple text input without rich formatting
- Rich text editor: Available for working with rich formatting when needed
- Character/line limits: Built-in support for limiting user input
- Copyfitting: Advanced text overflow handling with strategies like FitToWidth and FitToBox
When to Use
Use the Classic text engine when you need:
- Strict control over text input (character/line limits)
- Specific copyfitting behavior
- A more controlled editing environment
Choosing a Text Engine
The choice between text engines depends on your use case:
| Feature | WYSIWYG | Classic |
|---|---|---|
| In-place editing | Yes | No |
| Rich text support | Yes | Optional |
| Character limits | Limited | Full |
| Copyfitting | Basic | Advanced |
| User experience | Modern | Traditional |
Configuration
The text engine can be configured through the widgets.canvas.textEditor parameter in clientConfig.json. The default value will have the Design Editor to choose it automatically, the none will switch to the classic engine.
Example Configuration
{
"widgets": {
"canvas": {
"textEditor": "none"
}
}
}