TinyMCE Quick Start Guide

For more details, please check TinyMCE's offical example - https://www.tinymce.com/docs/demo/full-featured/

<h1 id="mcetoc_1bi25m9ie34"><strong>List of Default Styles</strong></h1>
<h1 id="mcetoc_1bi25nc7m35">&lt;h1&gt;Heading 1&lt;/h1&gt;</h1>
<h2 id="mcetoc_1bi25nm4n36">&lt;h2&gt;Heading 2&lt;/h2&gt;</h2>
<h3 id="mcetoc_1bi25nqgd37">&lt;h3&gt;Heading 3&lt;/h3&gt;</h3>
<h4>&lt;h4&gt;Heading 4&lt;/h4&gt;</h4>
<h5>&lt;h5&gt;Heading 5&lt;/h5&gt;</h5>
<h6>&lt;h6&gt;Heading 6&lt;/h6&gt;</h6>
<p>&lt;p&gt;paragraph&lt;/p&gt;.</p>
<blockquote>
<p>&lt;blockquote&gt;&lt;p&gt;blockquote&lt;/p&gt;&lt;blockquote&gt;</p>
</blockquote>
<div>&lt;div&gt;This is a div.&lt;/div&gt;</div>
<p>&nbsp;</p>
<pre>&lt;pre&gt;Text in a pre element<br />is displayed in a fixed-width<br />font, and it preserves<br />both&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; spaces and<br />line breaks&lt;/pre&gt;</pre>
<p>This is a link -&nbsp;<a title="link_title" href="#" target="_blank" rel="noopener">&lt;a title="link_title" href="#" target="_blank" rel="noopener"&gt;link&lt;/a&gt;</a>.</p>
<p style="font-size: 15px;">This is an image - &lt;img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /&gt;&nbsp;<img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /></p>
<p>This is <strong>&lt;strong&gt;bold&lt;/strong&gt;</strong>.</p>
<p>This is <em>&lt;em&gt;italic&lt;/em&gt;</em>.</p>
<p>This is <span style="text-decoration: underline;">&lt;span style="text-decoration: underline;"&gt;underline&lt;/span&gt;</span>.</p>
<p>This is <span style="text-decoration: line-through;">&lt;span style="text-decoration: line-through;"&gt;strickthrough&lt;/span&gt;</span>.</p>
<p>This is <sup>&lt;sup&gt;superscript&lt;/sup&gt;</sup>.</p>
<p>This is <sub>&lt;sub&gt;subscript&lt;/sub&gt;</sub>.</p>
<p>This is <code>&lt;code&gt;some code&lt;/code&gt;</code>.</p>
<p style="text-align: left;">&lt;p style="text-align: left;"&gt;Align left. Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;</p>
<p style="text-align: center;">&lt;p style="text-align: center;"&gt;Align center. Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;</p>
<p style="text-align: right;">&lt;p style="text-align: right;"&gt;Align right. Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;</p>
<p style="text-align: justify;">&lt;p style="text-align: justify;"&gt;Justify. Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;</p>
<p>Embed youtube</p>
<p>&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/8hNvH3R-haY" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</p>
<p><iframe src="https://www.youtube.com/embed/8hNvH3R-haY" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<p>Embed twitter</p>
<p>&lt;blockquote class="twitter-tweet" data-lang="en"&gt;&lt;p lang="en" dir="ltr"&gt;Keyboard shortcuts for &lt;a href="https://twitter.com/hashtag/TinyMCE?src=hash"&gt;#TinyMCE&lt;/a&gt;? That&amp;#39;s good info to know. Now, there&amp;#39;s a plugin for that in version 4.6 &lt;a href="https://t.co/EUacRfM6Eb"&gt;https://t.co/EUacRfM6Eb&lt;/a&gt; ⌨️ &lt;a href="https://t.co/L9xL2JC9pG"&gt;pic.twitter.com/L9xL2JC9pG&lt;/a&gt;&lt;/p&gt;&amp;mdash; TinyMCE (@tinymce) &lt;a href="https://twitter.com/tinymce/status/872505997184598023"&gt;June 7, 2017&lt;/a&gt;&lt;/blockquote&gt;<br />&lt;script async src="//platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt;</p>
<blockquote class="twitter-tweet" data-lang="en">
<p dir="ltr" lang="en">Keyboard shortcuts for <a href="https://twitter.com/hashtag/TinyMCE?src=hash">#TinyMCE</a>? That's good info to know. Now, there's a plugin for that in version 4.6 <a href="https://t.co/EUacRfM6Eb">https://t.co/EUacRfM6Eb</a> ⌨️ <a href="https://t.co/L9xL2JC9pG">pic.twitter.com/L9xL2JC9pG</a></p>
&mdash; TinyMCE (@tinymce) <a href="https://twitter.com/tinymce/status/872505997184598023">June 7, 2017</a></blockquote>
<h2 id="mcetoc_1bi28ajdt3k">Styles below are not regularly used</h2>
<h3 id="mcetoc_1bi2899m93j">Bullet list (default)</h3>
<p>&lt;ul&gt;</p>
<ul>
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ul>
<p>&lt;/ul&gt;</p>
<h3 id="mcetoc_1bi2893qq3i">Bullet list (circle)</h3>
<p>&lt;ul style="list-style-type: circle;"&gt;</p>
<ul style="list-style-type: circle;">
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ul>
<p>&lt;/ul&gt;</p>
<h3 id="mcetoc_1bi288tih3h">Bullet list (disc)</h3>
<p>&lt;ul style="list-style-type: disc;"&gt;</p>
<ul style="list-style-type: disc;">
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ul>
<p>&lt;/ul&gt;</p>
<h3 id="mcetoc_1bi288mcv3g">Bullet list (square)</h3>
<p>&lt;ul style="list-style-type: square;"&gt;</p>
<ul style="list-style-type: square;">
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ul>
<p>&lt;/ul&gt;</p>
<h3 id="mcetoc_1bi2885273f">Numbered list (default)</h3>
<p>&lt;ol&gt;</p>
<ol>
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ol>
<p>&lt;/ol&gt;</p>
<h3 id="mcetoc_1bi287rlt3e">Numbered list (lower alpha)</h3>
<p>&lt;ol style="list-style-type: lower-alpha;"&gt;</p>
<ol style="list-style-type: lower-alpha;">
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ol>
<p>&lt;/ol&gt;</p>
<h3 id="mcetoc_1bi287hud3d">Numbered list (lower greek)</h3>
<p>&lt;ol style="list-style-type: lower-greek;"&gt;</p>
<ol style="list-style-type: lower-greek;">
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ol>
<p>&lt;/ol&gt;</p>
<h3 id="mcetoc_1bi286gd83c">Numbered list (lower roman)</h3>
<p>&lt;ol style="list-style-type: lower-roman;"&gt;</p>
<ol style="list-style-type: lower-roman;">
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ol>
<p>&lt;/ol&gt;</p>
<h3 id="mcetoc_1bi2869n43b">Numbered list (upper alpha)</h3>
<p>&lt;ol style="list-style-type: upper-alpha;"&gt;</p>
<ol style="list-style-type: upper-alpha;">
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ol>
<p>&lt;/ol&gt;</p>
<h3 id="mcetoc_1bi2850qf3a">Numbered list (upper roman)</h3>
<p>&lt;ol style="list-style-type: upper-roman;"&gt;</p>
<ol style="list-style-type: upper-roman;">
<li>&lt;li&gt;item a&lt;/li&gt;</li>
<li>&lt;li&gt;item b&lt;/li&gt;</li>
<li>&lt;li&gt;item c&lt;/li&gt;</li>
</ol>
<p>&lt;/ol&gt;</p>
<h3 id="mcetoc_1bi284mtk39">Nested List</h3>
<p>&lt;ul&gt;</p>
<ul>
<li>&lt;li&gt;LEVEL 1 ITEM&lt;ul&gt;
<ul>
<li>&lt;li&gt;level 2 item&lt;/li&gt;</li>
<li>&lt;li&gt;level 2 item&lt;/li&gt;</li>
<li>&lt;li&gt;level 2 item&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;</li>
</ul>
</li>
<li>&lt;li&gt;LEVEL 1 ITEM&lt;/li&gt;</li>
<li>&lt;li&gt;LEVEL 1 ITEM&lt;/li&gt;</li>
</ul>
<p>&lt;/ul&gt;</p>
<h3 id="mcetoc_1bi284f1s38">Table</h3>
<pre>&lt;table&gt;<br />  &lt;tbody&gt;<br />    &lt;tr&gt;<br />      &lt;td&gt;cell 1.1&lt;/td&gt;<br />      &lt;td&gt;cell 1.2&lt;/td&gt;<br />      &lt;td&gt;cell 1.3&lt;/td&gt;<br />    &lt;/tr&gt;<br />    &lt;tr&gt;<br />      &lt;td&gt;cell 2.1&lt;/td&gt;<br />      &lt;td&gt;cell 2.2&lt;/td&gt;<br />      &lt;td&gt;&amp;nbsp;cell 2.3&lt;/td&gt;<br />    &lt;/tr&gt;<br />  &lt;/tbody&gt;<br />&lt;/table&gt;</pre>
<table>
<tbody>
<tr>
<td>cell 1.1</td>
<td>cell 1.2</td>
<td>cell 1.3</td>
</tr>
<tr>
<td>cell 2.1</td>
<td>cell 2.2</td>
<td>cell 2.3</td>
</tr>
</tbody>
</table>