Limitations

Due to technical constraints, certain HTML tags and code styling are not supported. When you develop a project locally, it renders in the browser without restrictions. When you start editing its content in eWizard Editor, unsupported tags and styling are adjusted to a compatible format.

Edit the code before exporting your archive for a target system. The source format is more suitable for the code editing.

In addition, the eWizard.js framework and builder have their own limitations regarding file and directory names and option names reserved for components and other content elements.

Component selection

To preserve the original settings of your project components so that they always correspond to the initial design, you can add the custom attribute to the required component or block.

The nested attribute restricts the component and block selection and customization on the layout in eWizard Editor.

For example, add the nested attribute to the image component in the markup of your project.

<!-- ./App.vue -->

<wiz-image nested></wiz-image>

As a result, you can't select and customize the image component in eWizard Editor.

HTML tags

You can add the HTML tags to the i18n object of your project Vue instance. You can then use the eWizard Editor to edit these HTML elements as the text component properties.

<!-- ./App.vue -->

<i18n>
{
	"eng": {
		"title": "<div style='line-height: 34px;text-align: left;'><a href='http://viseven.com' target=\"_blank\"><span style='color:#0084c4;font-size: 29px;font-family:arial,helvetica neue,helvetica,sans-serif;'>Lorem ipsum dolor sit amet consectetur</span></a></div>",
		"main_text": "<ul><li style=\"line-height:20px;text-align:left;\"><span style=\"color:#4d4d4d;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:14px;\">Your text here.</span></li></ul>",
		"btn": "<strong><span style='color:#ffffff;font-size: 14px;font-family:arial,helvetica neue,helvetica,sans-serif;'>Call to action »</span></strong>"
	}
}
</i18n>

eWizard Editor supports the following HTML tags:

Tag	Description
<a>	Defines a hyperlink for linking from one page to another.
<b>	Defines a bold text.
<br>	Inserts a single line break.
<div>	Defines a division or a section in an HTML document for styling with CSS. Use this tag as a container for HTML elements, which is then styled with CSS or manipulated with JavaScript.
<i>	Defines a part of text in italic.
<p>	Defines a paragraph.
<span>	Defines a section in a document. Use this tag as an inline container to mark up a part of a text, or a part of a document.
<h1> to <h6>	Defines HTML headings.
<ul>	Defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists.
<ol>	Defines an ordered list. An ordered list can be numerical or alphabetical. Use the <li> tag to define each list item.
<li>	Defines a list item. Use the <li> tag inside ordered lists (<ol>) and unordered lists (<ul>). In <ul>, the list items are displayed with bullet points. In <ol>, the list items are displayed with numbers or letters.
<s>	Defines the text that's no longer correct, accurate or relevant. The text is displayed with a line through it (strikethrough).
<strong>	Defines the text with strong importance. The content inside is typically displayed in bold.
<sup>	Defines a superscript text. The superscript text appears half a character above the normal line.
<sub>	Defines a subscript text. The subscript text appears half a character below the normal line.

eWizard Editor doesn't support all other HTML tags. It means that if you add any of the unsupported HTML tags to the project markup, they're removed when you edit this project's text in eWizard Editor.

Nesting styles

eWizard Editor doesn't support nested styles. For example, eWizard Editor converts this code:

<p>
  <span style='color: rgb(0, 255, 0);'>My
    <span style='color: rgb(255, 0, 0);'>Text</span>
  </span>
</p>

to this code:

<p>
  <span style="color: rgb(0, 255, 0);">My Text</span>
</p>

Instead, you need to wrap every text element in its own <span> with styles:

<p>
  <span style="color:hsl(0,75%,60%);">My</span>
  <span style="color:hsl(150,75%,60%);">Text</span>
</p>

Paragraph instead of line break

Due to limitations of the technology behind eWizard Editor, it doesn't support the <br> line breaks in the block features such as lists, headings, and tables that don't wrap text in paragraphs. Instead, it separates lines of content by the <br> elements. Use the <p> paragraphs instead of <br> for a correct display in eWizard Editor.

Root element and line height

Root element must always have a block element:

• <p>

• <div>

• <h1> to <h6>

Apply the line height to the block element (entire paragraph), not to individual elements.

CSS colors

eWizard Editor supports the following types of the CSS color values:

• Hex

• RGBA

eWizard Editor doesn't support HSL color values.

File and directory names

Avoid using the following symbols in file and directory names:

• !

• ?

• ^

• &

• ,

Reserved option names

Certain option names are reserved by the system and cannot be used when defining component options (such as component/slide props, data, computed, or methods). The following names are reserved:

• slideId

• state

• template

• templatePath

• component

• editorStore