<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>
  <p><span style="background-color: #fbeeb8;">Try insert a quote here using the quote toolbar button</span></p>
  <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: 'autolink image link lists code template',
  toolbar: 'undo redo | bold italic strikethrough forecolor backcolor | image link bullist numlist sharequote code',
  menubar: false,
  height: 'calc(100vh - 2rem)',
  setup: (editor) => {
    
    // Register the insert a sharequote button and define 
    //   the template that is being inserted when pushing it.
    editor.ui.registry.addButton('sharequote', {
      icon: 'quote',
      tooltip: 'Insert Sharequote',
      onAction: function (api) {
        editor.execCommand('mceInsertTemplate', false, `
          <blockquote contenteditable='false'>
            <p contenteditable='true'>Write your sharequote here</p>
            <footer>
              <div data-shareplaceholder contenteditable='false' title="Share button placeholder"></div>
            <footer>
          </blockquote>
        `);
      }
    });
  },
  
  // 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: 0;
  padding: 1em 2rem;
  margin: 2em auto;
  text-align: left;
  max-width: 520px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 6px 4px 14px -2px rgba(0, 0, 0, .04), 0 0 20px 0 rgba(0, 0, 0, .04);
  background-color: #fff;
}

blockquote::before {
  content: '“';
  font-size: 10em;
  color: #fff;
  position: absolute;
  top: -.45em;
  left: -.05em;
  pointer-events: none;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, .03), 4px 4px 12px rgba(0, 0, 0, .06);
}

blockquote div[data-shareplaceholder] {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateX(-50%) translateY(50%);
  font-style: normal;
  border-radius: 50%;
  height: 42px;
  width: 42px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.928 9.24a4.02 4.02 0 0 1-.026 1.644l5.04 2.537a4 4 0 1 1-.867 1.803l-5.09-2.562a4 4 0 1 1 .083-5.228l5.036-2.522a4 4 0 1 1 .929 1.772L7.928 9.24z'/%3E%3C/svg%3E") center center no-repeat #fff200;

}

blockquote [data-mce-selected],
blockquote *:focus,
blockquote *:hover {
  outline: none !important;
  cursor: default !important;
}
  `
});