HTML5 formats example
This example shows you how to edit HTML5 content such as sections and articles.
-
TinyMCE
-
HTML
-
JS
-
Edit on CodePen
<textarea id="format-html5">
<section>Section
<p>Paragraph</p>
</section>
<article>Article
<p>Paragraph</p>
</article>
<blockquote>Blockquote
<p>Paragraph</p>
</blockquote>
<aside>Section
<p>Paragraph</p>
</aside>
<figure>Figure
<figcaption>Figcaption</figcaption>
</figure>
</textarea>
tinymce.init({
selector: 'textarea#format-html5',
height: 500,
plugins: 'visualblocks',
style_formats: [
{ title: 'Headers', items: [
{ title: 'h1', block: 'h1' },
{ title: 'h2', block: 'h2' },
{ title: 'h3', block: 'h3' },
{ title: 'h4', block: 'h4' },
{ title: 'h5', block: 'h5' },
{ title: 'h6', block: 'h6' }
] },
{ title: 'Blocks', items: [
{ title: 'p', block: 'p' },
{ title: 'div', block: 'div' },
{ title: 'pre', block: 'pre' }
] },
{ title: 'Containers', items: [
{ title: 'section', block: 'section', wrapper: true, merge_siblings: false },
{ title: 'article', block: 'article', wrapper: true, merge_siblings: false },
{ title: 'blockquote', block: 'blockquote', wrapper: true },
{ title: 'hgroup', block: 'hgroup', wrapper: true },
{ title: 'aside', block: 'aside', wrapper: true },
{ title: 'figure', block: 'figure', wrapper: true }
] }
],
visualblocks_default_state: true,
end_container_on_empty_block: true,
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});