<h1>Template Plugin: Basic Configuration</h1>
      <p>This is the base configuration needed to use the <a href="https://www.tiny.cloud/docs/plugins/template/" target="_blank">template</a> plugin in TinyMCE 5.</p>
      <p>Note that the external file URL is using a proxy to overcome CORS restrictions. When using external templates, be that a file or a JSON feed, don't forget to configure your setup to allow for external templates to be loaded.</p>
body {
  margin: 2rem 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,

main {
  max-width: 720px;
  margin: auto;

section {
  margin-bottom: 3rem;

h1 {
  font-size: 1.75rem;
  font-weight: bold;

a {
  color: rgb(25, 118, 210);
  font-weight: bold;
  text-decoration: none;

a:hover {
  color: rgb(145, 180, 225);
  selector: "textarea",
  plugins: "template",
  toolbar: "template",
  menubar: false,

  min_height: 380,
  templates: [
      title: "Template in JS",
        "This template is embedded within the TinyMCE init configuration.",
      content: "<p>Template source within the TinyMCE configuration.</p>"
      title: "Template in external file",
      description: "The source for this template is in an external HTML file",
      url: "https://cors-anywhere.herokuapp.com/https://assets.codepen.io/413052/external-source.html"

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js