<main>
<section>
<h1>Template Plugin: Replace Values</h1>
<p>This is an example of the <a href="https://www.tiny.cloud/docs/plugins/template/" target="_blank">template</a> plugin
in TinyMCE 5 using placeholders to <a href="https://www.tiny.cloud/docs/plugins/template/#template_replace_values" target="_blank">replace values</a>.</p>
<textarea></textarea>
<p>For this example, the template source and the replacement values are all in the TinyMCE init configuration.
This will make it easier to play with the example. In a real-world use case, you may like to use <a href="https://www.tiny.cloud/docs/plugins/template/#templates" class="_blank">externally
hosted templates</a>, plus update your init configuration to pull in dynamic replace values.</p>
</section>
</main>
body {
margin: 2rem 1.5rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
sans-serif;
}
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);
}
tinymce.init({
selector: "textarea",
plugins: "template",
toolbar: "template",
menubar: false,
min_height: 380,
templates: [
{
title: "Replace Values template example",
description:
"This template has placeholder variables that will be replaced when this template is inserted in to TinyMCE.",
content:
"<p>Congratulations {$owner_name}!</p>" +
"<p>Our voting panel have agreed that {$cat_name} is definitely the {$category} cat out there.</p>" +
"<p>We loved seeing your photo, and will be sharing on our social media channels.</p>" +
"<p>Keep {$cat_name} being the {$category} cat - we know you will!</p>" +
'<p>Regards,<br>The 2020 Voting Panel<br><span class="created-date" style="font-size:0.7rem;">[created date]</span></p>'
}
],
template_replace_values: {
owner_name: "Marty",
cat_name: "Toby",
category: "Most Handsome"
},
template_cdate_classes: "created-date",
template_cdate_format: "%A %d %B %Y"
});
This Pen doesn't use any external CSS resources.