wiz-text

The wiz-text component is a lightweight and flexible text rendering component designed to display rich text content in an email layout. to add text to your email template.

When dragged to the email layout in eWizard Editor, wiz-text appears as a placeholder (Double-click to add text by default) and features inline-editing capabilities.

Read more about editing text in eWizard Editor.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

To use the wiz-text component in your email project:

1. Add the wiz-text component to your email template. Configure it as required in the App.vue file.

   <!--./App.vue -->
   
   <template>
   <wiz-root align="center" style="background: #ffffff; width: 700px">
     <wiz-text :text="$t('wiz_text_1064')" id="wiz-text-4e75"></wiz-text>
   </wiz-root>
   </template>

   eWizard Editor sets the id attribute when you add the text component to the email layout. The id attribute is required for the correct display of the component styles in eWizard Editor.

2. Change the text in the localization <i18n></i18n> tag.

   <!--./App.vue -->
   
   <i18n>
   {
     "eng": {
       "wiz_text_1064": "This is my text"
     }
   }
   </i18n>

   For more information, see Localization.

Attributes

Add the :text attribute within the <wiz-text></wiz-text> tag:

<wiz-text :text="$t('wiz_text_1064')"></wiz-text>

Use this attribute to define the key for the key-value pair in the i18n tag.

For example, here the wiz_text_1064 is the key.

You can use the :text attribute value as a string without the localization key. For example:

<wiz-text :text="'This is my text'"></wiz-text>

When you archive and upload the email project to eWizard, you can edit the text. eWizard.js adds the localization key automatically in Editor. When you download the email project with the edited text, you can see the localization key added instead of the actual text.

<template>
  <wiz-root align="center" style="background: #ffffff; width: 700px;">
    <wiz-text :text="$t('wiz_text_a5d0')"></wiz-text>
  </wiz-root>
</template>

Find the original text within the i18n tag.

Properties

The following properties are available:

Property	Type	Default value	Description
text	string	<div style='text-align:center; line-height: 20px;'><span style= 'font-size:14px;color:rgb(77,77, 77);font-family:Arial, Helvetica, sans-serif;'>Double-click to add text</span></div>	The editable text displayed on the content item layout in eWizard Editor.