<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 template powerpaste tinymcespellchecker autoresize",
menubar: false,
toolbar:
"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;"
},
//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.