Skip to content

Instantly share code, notes, and snippets.

@ColonelBuendia
Created December 3, 2018 03:58
Show Gist options
  • Save ColonelBuendia/5c29466d39585ed1648739e4c40095e0 to your computer and use it in GitHub Desktop.
Save ColonelBuendia/5c29466d39585ed1648739e4c40095e0 to your computer and use it in GitHub Desktop.
TinyMCE Basic Example
<textarea>
<p style="text-align: center;">
<img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
</p>
<h1 style="text-align: center;">Welcome to the TinyMCE editor demo!</h1>
<p>
Please try out the features provided in this basic example.<br>
Note that any <strong>MoxieManager</strong> file and image management functionality in this example is part of our commercial offering – the demo is to show the integration.
</p>
<h2>Got questions or need help?</h2>
<ul>
<li>Our <a href="https://www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
<li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/" target="_blank">Community Forum</a>.</li>
<li>We also offer enterprise grade support as part of <a href="www.tinymce.com/pricing">TinyMCE Enterprise</a>.</li>
</ul>
<h2>A simple table to play with</h2>
<table style="text-align: center;">
<thead>
<tr>
<th>Product</th>
<th>Cost</th>
<th>Really?</th>
</tr>
</thead>
<tbody>
<tr>
<td>TinyMCE</td>
<td>Free</td>
<td>YES!</td>
</tr>
<tr>
<td>Plupload</td>
<td>Free</td>
<td>YES!</td>
</tr>
</tbody>
</table>
<h2>Found a bug?</h2>
<p>
If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
</p>
<h2>Finally ...</h2>
<p>
Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
</p>
<p>
Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
</p>
</textarea>
tinymce.init({
selector: 'textarea',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help wordcount'
],
toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css']
});
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"></script>
body {
padding:5px;
}
<link href="//www.tinymce.com/css/codepen.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment