<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>TinyMCE CRM Rich Text Editor</h1>
<form method="post">
<textarea id="editor"></textarea>
</form>
</body>
</html>h1 {
font-family: arial;
}
tinymce.init({
selector: "#editor",
plugins:
"autoresize lists link emoticons image editimage advcode linkchecker template mergetags 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,
//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.