Documentation

Blocks

Overview #

Article Editor has a number of predefined blocks of content. In real life, this is all that may be needed to create any content.

Below is a list of all existing blocks in the editor by default.

Paragraph #

Type: paragraph

Editable: true

Tags: p

Any p tag becomes an editable paragraph block in the editor, if no noneditable class is specified for it.

<p></p>

Heading #

Type: heading

Editable: true

Tags: h1..h6

Any header tag h1..h6 becomes an editable block heading in the editor, if no noneditable class is specified for it.

<h2></h2>

Text #

Type: text

Editable: true

Tags: div

If a text class is specified for the div tag, then it will become an editable block. The text block class is specified in the plaintext.classname setting and by default it is the class arx-text.

<div class="arx-text"></div>

List #

Type: list

Editable: true

Tags: ul, ol

Any list tag ul, ol becomes an editable list block in the editor, if no noneditable class is specified for it.

<ul>
    <li></li>
</ul>

Noneditable #

Type: noneditable

Editable: false

Tags: any

A noneditable block is any tag and all tags inside it for which a class is specified in the noneditable.classname setting. By default, this is the noneditable value.

<div class="noneditable"></div>

In the example below, all tags inside noneditable will be non-editable.

<div class="noneditable">
    <p></p>
</div>

Image #

Type: image

Editable: false

Tags: figure, div, p

If the figure, div, or p tags contain an image with the img tag and nothing else, so that tag will become a image block.

<p><img ...></p>
<div><img ...></div>
<figure>
    <img ...>
    <figcaption></figcaption>
</figure>

If the image is surrounded by a link, it will also work.

<p><a href=""><img ...></a></p>

Figcaption #

Type: figcaption

Editable: true

Tags: figcaption

Any figcaption tag is inside a figure will become an editable figcaption block .

<figcaption></figcaption>

Embed #

Type: embed

Editable: false

Tags: figure

Any code placed in a figure (except the image) will become an embed block. This can be tweet, instagram, video, google map, etc.

<figure>
    <iframe src="https://www.youtube.com/embed/....">
</figure>

Line #

Type: line

Editable: false

Tags: hr

Any hr tag will become a line block.

<hr>

Code #

Type: code

Editable: false

Tags: pre , pre/code, figure/pre

The pre tag will become a code block. The template for the code block is specified in the code.template setting and by default it is <pre> </ pre>. You can change this to your template, but the template should always have a pre tag.

<pre></pre>
<pre><code></code></pre>
<figure><pre></pre></figure>

Quote #

Type: quote

Editable: false

Tags: blockquote

The blockquote tag will become a quote block. The template for the quote block is specified in the quote.template setting. You can change it to your own template, but make sure that the template always have a blockquote tag.

<blockquote><p>Quote...</p></blockquote>

Quoteitem #

Type: quoteitem

Editable: true

Tags: p

Any p tag inside the blockquote will become editable quoteitem.

<blockquote>
    <p>Quote...</p>
    <p><cite>Author Attribution</cite></p>
</blockquote>

Snippet #

Type: snippet

Editable: false

Tags: any

Any tag for which the specified snippet class will become a snippet block. Snippets classes are specified in the snippets setting.

<div class="mysnippet"></div>

Grid #

Type: grid

Editable: false

Tags: div

The div tag with a special class will become a grid block. The grid class is specified in the grid.classname setting and by default it is grid.

<div class="grid">
    <div class="column column-6"></div>
    <div class="column column-6"></div>
</div>

Column #

Type: column

Editable: false

Tags: div

The div tag with a special class will become a column block. The column class is specified in the grid.columns.classname setting and the default is column.

<div class="grid">
    <div class="column column-6"></div>
    <div class="column column-6"></div>
</div>

Table #

Type: table

Editable: false

Tags: table

Any table tag will become a table block.

<table></table>

Row #

Type: tr

Editable: false

Tags: tr

Any tr tag will become a block row of the table.

<table>
    <tr></tr>
</table>

Cell #

Type: cell

Editable: true

Tags: th, td

Any th, d tag will become an editable block cell of the table.

<table>
    <tr>
        <td></td>
    </tr>
</table>

Layer #

Type: layer

Editable: false

Tags: div, article, main, section, aside, header, footer

Any tag div, article, etc, if it does not have a noneditable, snippet, grid, or column class will become a block layer.

<div></div>
<article></article>