<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>
    <p>But no temple made with hands can compare with Yosemite</p>
    <cite>&mdash;John Muir</cite>    
  </blockquote>
  <p>The most famous and accessible of these ca&ntilde;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 at an elevation of 4000 feet above the level of the sea.</p>
</textarea>

body {
  max-width: 1024px;
  margin: 1rem auto;
}

tinymce.init({
  selector: 'textarea',
  plugins: 'image link lists code',
  toolbar: 'undo redo | styleselect | bold italic strikethrough forecolor backcolor | image link bullist numlist code',
  menubar: false,
  height: 'calc(100vh - 2rem)',
  
  // Register the cite format
  formats: {
    cite: {block: 'cite'}
  },
  
  // Populate the styleselect menu
  style_formats: [
    { title: 'Paragraph', format: 'p'},
    { title: 'Title', format: 'h1'},
    { title: 'Heading', format: 'h2'},
    { title: 'Subheading', format: 'h3'},
    { title: 'Blockquote', format: 'blockquote'},
    { title: 'Cite', format: 'cite' },
    { title: 'Code', format: 'code'}  
  ],
  
  // This removes the WYSIWYG formatting within the styleselect menu
  preview_styles: false,  
    
  // 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 {
  font-family: 'Oxygen', sans-serif;
  max-width: 640px;
  margin: .5rem auto;
  padding: .5rem;
  font-size: 18px;
  color: #3d3d3d;
  line-height: 1.4;
}

blockquote {
  font-family: 'Andale Mono', 'Courier New', monospace;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  position: relative;
  border: 3px solid #3d3d3d;
  padding: 3em 2.5rem;
  margin: calc(2.5em - 16px) auto 2.5em;
  text-align: left;
  max-width: 320px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 13px 13px 0 0 #fff inset, 16px 16px 0 0 #fff200;
  background-color: #fff200;
}

blockquote::before {
  content: '“';
  font-size: 5em;
  color: #222;
  position: absolute;
  top: -.05em;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'georgia';
  pointer-events: none;
}

blockquote::after {
  content: '“';
  font-size: 5em;
  color: #222;
  position: absolute;
  bottom: -.55em;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'georgia';
  pointer-events: none;
}

blockquote > * {
  margin: .75em 0;
}

blockquote cite {
  display: block;
  font-style: normal;
  font-size: 12px;
}

  `
});