<textarea>
<p>The most famous and accessible of these cañon valleys, and also the one that presents their most striking and sublime features on the grandest scale, is the Yosemite, situated in the basin of the Merced River.</p>
<blockquote>But no temple made with hands can compare with Yosemite</blockquote>
<p>The walls are made up of rocks, mountains in size, partly separated from each other by side cañons, and they are so sheer in front, and so compactly and harmoniously arranged on a level floor, that the Valley, comprehensively seen, looks like an immense hall or temple lighted from above.</p>
</textarea>
body {
max-width: 1024px;
margin: auto;
padding: .5rem;
}
tinymce.init({
selector: 'textarea',
plugins: 'image link lists',
toolbar: 'undo redo | bold italic strikethrough blockquote forecolor backcolor | image link bullist numlist',
menubar: false,
height: 'calc(100vh - 2rem)',
// Setting up the content styles. In this codepen we are using
// content_style, therefore we disable the default styling that
// comes with the default content_css
content_css: false,
content_style: `
@import url('https://fonts.googleapis.com/css?family=Oxygen:400,700&display=swap');
body {
color: #3d3d3d;
font-family: 'Oxygen', sans-serif;
font-size: 18px;
line-height: 1.4;
margin: .5rem auto;
max-width: 680px;
padding: .5rem;
}
blockquote {
border: 0;
font-size: 24px;
font-weight: 700;
letter-spacing: .1em;
margin: 2.5em auto;
max-width: 540px;
padding: 0 2rem;
position: relative;
text-align: center;
text-transform: uppercase;
}
blockquote::before {
color: #fff200;
content: '“';
font-family: 'georgia';
font-size: 4em;
left: 30%;
pointer-events: none;
position: absolute;
top: -.75em;
}
blockquote::after {
bottom: -1.2em;
color: #fff200;
content: '”';
font-family: 'georgia';
font-size: 4em;
pointer-events: none;
position: absolute;
right: 30%;
}
`
});
This Pen doesn't use any external CSS resources.