Inline Font Controls

This feature allows users to change the font family, font size, and text alignment directly within the text editor via inline controls. While these controls provide a quick way to format text, they are not recommended due to the availability of more robust font controls in the right panel, which offers better responsiveness across devices.

By default, inline font controls are disabled. You can enable or disable this feature using the unlayer.init() method within the textEditor configuration.

Enable Inline Font Controls

unlayer.init({
  features: {
    textEditor: {
      inlineFontControls: true  // Enable inline font controls in the text editor
    }
  }
});

Setting inlineFontControls: true will allow users to adjust font family, size, and alignment directly within the text editor, using inline options.

Disable Inline Font Controls (Recommended)

unlayer.init({
  features: {
    textEditor: {
      inlineFontControls: false  // Disable inline font controls (default behavior)
    }
  }
});

Setting inlineFontControls: false disables the inline font controls, encouraging users to manage font settings from the right panel, which provides more comprehensive and device-friendly options.

Best Practices

• Right Panel Usage: We recommend keeping inline font controls disabled. The right panel offers a more consistent and responsive way to manage text formatting, including font family, font size, and alignment. This approach ensures that text renders properly across different devices and screen sizes.
• Consistency Across Devices: By using the right panel for font controls, you ensure that font settings are applied more uniformly, especially when switching between mobile and desktop views. This makes your design more responsive and adaptable.
• Avoiding Clutter: Disabling inline font controls reduces potential clutter in the editor, keeping the design cleaner and encouraging users to focus on using the more powerful formatting options available in the right panel.

When to Enable

While it is generally recommended to use the right panel for font settings, you may consider enabling inline font controls if:

• Users need quick access to font adjustments directly within the editor.
• You’re working in specific cases where users prefer inline formatting over panel-based controls.

By managing this feature, you can decide how users interact with text formatting within the editor. Keeping this feature disabled ensures a more consistent design experience, with better responsiveness across devices, while enabling it can provide quicker access for users who need direct text formatting control.