eWizard Editor limitations | Viseven Help Center

Due to the limitations of the technology behind eWizard Editor, certain tags and code styling aren't supported. When you develop your project locally, it appears in the browser without any limitations. When you upload this project to the eWizard platform, eWizard Editor removes unsupported tags and ignores unsupported styling. See the recommendations on supported HTML tags and styling later in this article.

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

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.

WARNING: 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 when you use the block features such as lists, headings, and tables that don't wrap text in paragraphs, but instead separate 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:

• :Hexcolorcode:Hex:

• :RGBA:RGBA:

eWizard Editor doesn't support HSL color values.