<body>
<h1>TinyMCE CRM Rich Text Editor</h1>
<form method="post">
<textarea id="editor"></textarea>
</form>
</body>h1 {
font-family: arial;
}tinymce.init({
selector: "#editor",
plugins:
"autoresize lists link emoticons image editimage advcode linkchecker powerpaste tinymcespellchecker autoresize template mergetags autocorrect",
menubar: false,
toolbar:
"mergetags | undo redo spellchecker | formatgroup | link emoticons image template | code ",
statusbar: false,
toolbar_location: "bottom",
toolbar_groups: {
formatgroup: {
icon: "format",
tooltip: "Formatting",
items:
"blocks fontfamily fontsize | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote"
}
},
//CRM - streamlined
//Autoresize settings
autoresize_overflow_padding: 20,
max_height: 500,
autoresize_bottom_margin: 50,
//CRM - strict formatting
//Image
image_file_types: 'jpeg jpg png gif',
//Powerpaste setup
powerpaste_word_import: "clean",
powerpaste_googledocs_import: "clean",
powerpaste_html_import: "clean",
// Text Formatting Options
font_size_formats: "8px 10px 12px 14px 18px",
formats: {
h1: { block: "h1" },
h2: { block: "h2" },
p: [{ block: "p" }, { selector: "p" }],
small: { block: "small", styles: { fontSize: "12px", color: "#aaaaaa" } }
},
block_formats: "Normal=p; Heading=h1; Sub heading=h2; Small=small",
forced_root_block: "p",
forced_root_block_attrs: {
style: "font-size: 14px; font-family: helvetica, arial, sans-serif;"
},
//CRM - Templates
//CRM - Templates
templates: [
{
title: "Outbound email",
description: "Outbound cold email for prospects",
content:
'<p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Hi [[Contact.FirstName]],</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">My name is [[Sales.FirstName]] with [[Sales.Org]].</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">We help companies just like yours securely store data in the cloud. I wanted to learn how you handle data storage at [[Contact.Org]] and show you some of the exciting technology we\'re working on.</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Are you available for a quick call tomorrow afternoon?</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">[[Sales.FirstName]]</p>'
},
{
title: "Follow-up email",
description: "Follow-up to be sent immediately after discovery meetings",
content:
'<p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Hi [[Contact.FirstName]],</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Thank you for taking the time to explore a potential partnership today! It felt like our product could help you solve some of the issues that you’re having within [[Contact.Org]], especially in these areas:</p><ul><li style="font-size: 14px; font-family: helvetica, arial, sans-serif;">The offsite data warehouse will allow you to guarantee business continuity</li><li style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Metered usage will ensure you only pay for what you consume</li><li style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Level III security protocols will mean you will meet security requirements for your jurisdiction</li></ul><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">I understand that now you will discuss and agree internally on the next step. Please let me know if you have any questions or if there is anything I can do to help. If not, I’ll talk to you next week.</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Best,<br>[[Sales.FirstName]]</p>'
}
],
//MergeTags
mergetags_prefix: '[[',
mergetags_suffix: ']]',
mergetags_list: [
{
title: "Contact",
menu: [{
value: 'Contact.FirstName',
title: 'Contact First Name'
},
{
value: 'Contact.LastName',
title: 'Contact Last Name'
},
{
value: 'Contact.Email',
title: 'Contact Email'
},
{
value: 'Contact.Org',
title: 'Contact Organization'
},
]
},
{
title: "Business",
menu: [{
value: 'Sales.FirstName',
title: 'Sales First Name'
},
{
value: 'Sales.Org',
title: 'Sales Organization'
},
]
}
],
//CRM - Productivity
//Link content
link_title: false,
link_target_list: false,
link_list: [
{ title: "{productname} Product demo", value: "https://www.tiny.cloud/" },
{ title: "{pricingname} Pricing", value: "https://www.tiny.cloud/pricing/" },
{ title: "{signupname} Sign up", value: "https://www.tiny.cloud/signup/" },
{
title: "{casestudies} Case studies",
value: "https://www.tiny.cloud/solutions/content-authoring-tool/",
caseStudies: [
{
title: "{productname} Study1",
value: "https://www.tiny.cloud/solutions/crm-editor/"
},
{
title: "{productname} Study2",
value: "https://www.tiny.cloud/solutions/dms-editor/"
},
{
title: "{productname} Study3",
value: "https://www.tiny.cloud/solutions/wysiwyg-email-editor/"
}
]
}
],
//Spellchecker languages
spellchecker_language: "en_US",
//Content Style
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5rem;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 18px;
}
font_size_formats: "8px 10px 12px 14px 18px",
formats: {
h1: {block: 'h1'},
h2: {block: 'h2'},
p: [
{block: 'p'},
{selector: 'p'}
],
small: {block: 'small', styles: {fontSize: '12px', color: '#aaaaaa'}}
},
block_formats: 'Normal=p; Heading=h1; Sub heading=h2; Small=small',
`
});
External CSS
This Pen doesn't use any external CSS resources.