<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 class="pull-left"><p>But no temple made with hands can compare with Yosemite</p></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>
  <p>It is about&nbsp;seven miles long, half a mile to a mile wide, and nearly a mile deep in the&nbsp;solid granite flank&nbsp;of the range. The walls are made up of rocks, mountains in size, partly separated from each other by side ca&ntilde;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. But no temple made with hands can compare with Yosemite. Every rock in its walls seems to glow with life.</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)',
  
  // Register the custom pullquote formats. By making the first
  //   format an array, it will match multiple formats; it will
  //   make the blockquote toolbar button enabled if either of
  //   `pull-left` or `pull-right` or `center` classes exists 
  //   on the blockquote.
  // Note that the first element in the blockquote array is the
  //   format that gets applied when pressing the blockquote
  //   toolbar button.
  formats: {
    blockquote: [
       {block: 'blockquote', attributes: {'class': 'center'}, wrapper: true, remove: 'all'},
       {block: 'blockquote', attributes: {'class': 'pull-left'}},
       {block: 'blockquote', attributes: {'class': 'pull-right'}}
    ],
    pullquote_left: {selector: 'blockquote', attributes: {'class': 'pull-left'}, remove: 'all'},
    pullquote_right: {selector: 'blockquote', attributes: {'class': 'pull-right'}, remove: 'all'},
    pullquote_center: {selector: 'blockquote', attributes: {'class': 'center'}, remove: 'all'}
  },
  
  // 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: 520px;
  margin: .5rem auto;
  padding: .5rem;
  font-size: 18px;
  color: #3d3d3d;
  line-height: 1.4;
}

blockquote {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  position: relative;
  border: 0;
  padding: 0;
  margin: 2.5em 2rem 2.5em 2rem;
  max-width: 200px;
  text-align: left;
}

blockquote.pull-left::before,
blockquote.pull-right::before {
  content: '“';
  font-size: 6em;
  color: #fff200;
  position: absolute;
  top: -.65em;
  left: 0%;
  pointer-events: none;
}

blockquote.pull-left::after,
blockquote.pull-right::after {
  content: '”';
  font-size: 6em;
  color: #fff200;
  position: absolute;
  bottom: -1.05em;
  right: 30%;
  pointer-events: none;
}

blockquote.pull-left p,
blockquote.pull-right p {
  display: inline;
  background-color: #fff200;
  line-height: 1.5;
}

blockquote.pull-left {
  float: left;
}

blockquote.pull-right {
  float: right;
}

blockquote.center {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  position: relative;
  border: 0;
  padding: 0 0 0 1rem;
  margin: 2.5em 0 2.5em 2rem;
  text-align: left;
  max-width: 100%;
  border-left: 3px solid #fff200;
}

@media (min-width: 800px) {
  blockquote {
    font-size: 28px;
    max-width: 280px;
  }

  blockquote.pull-left {
    margin-left: -130px;
  }

  blockquote.pull-right {
    margin-right: -130px;
  }
}
  `,
  setup: (editor) => {
    
    // Set up the pull-to-left context toolbar button
    editor.ui.registry.addToggleButton('pulleft', {
      icon: 'align-left',
      onAction: function (api) {
        editor.execCommand('mceToggleFormat', false, 'pullquote_left');
        editor.formatter.remove('pull-right');
      },
      onSetup: (buttonApi) => {
        buttonApi.setActive(editor.formatter.match('pullquote_left'));
         let change = editor.formatter.formatChanged('pullquote_left', (state) => buttonApi.setActive(state));
         return () => {change.unbind();};
      },
    });
    
    // Set up the pull-to-right context toolbar button
    editor.ui.registry.addToggleButton('pullright', {
      icon: 'align-right',
      onAction: function (api) {
        editor.execCommand('mceToggleFormat', false, 'pullquote_right');
        editor.formatter.remove('pull-left');
      },
      onSetup: (buttonApi) => {
        buttonApi.setActive(editor.formatter.match('pullquote_right'));
         let change = editor.formatter.formatChanged('pullquote_right', (state) => buttonApi.setActive(state));
         return () => {change.unbind();};
      },
    });
    
    // Set up the center context toolbar button
    editor.ui.registry.addToggleButton('putcenter', {
      icon: 'align-center',
      onAction: function (api) {
        editor.execCommand('mceToggleFormat', false, 'pullquote_center');
        editor.formatter.remove('center');
      },
      onSetup: (buttonApi) => {
        buttonApi.setActive(editor.formatter.match('pullquote_center'));
         let change = editor.formatter.formatChanged('pullquote_center', (state) => buttonApi.setActive(state));
         return () => {change.unbind();};
      },
    });
    
    // Register the blockquote context toolbar
    editor.ui.registry.addContextToolbar('alignPullquotes', {
      predicate: function (node) {
        return node.nodeName.toLowerCase() === 'blockquote'
      },
      items: 'pulleft putcenter pullright', position: 'node',scope: 'node'
    });
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js