JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
<h1>TinyMCE Quick Start Guide</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque viverra justo nec ultrices dui sapien. Eget gravida cum sociis natoque penatibus et magnis dis parturient. Tortor at auctor urna nunc. Malesuada nunc vel risus commodo viverra maecenas. Elit ut aliquam purus sit amet luctus. Mi tempus imperdiet nulla malesuada pellentesque elit eget. Tellus at urna condimentum mattis pellentesque id nibh. Quis commodo odio aenean sed adipiscing diam donec. Aliquet bibendum enim facilisis gravida neque convallis a cras. Tortor pretium viverra suspendisse potenti nullam ac. Magna sit amet purus gravida quis blandit. Facilisis gravida neque convallis a cras. Tortor at risus viverra adipiscing.</p>

<p>Convallis tellus id interdum velit laoreet id donec ultrices. Neque viverra justo nec ultrices dui sapien eget mi proin. Ornare arcu odio ut sem nulla pharetra diam sit amet. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Pharetra sit amet aliquam id diam maecenas ultricies. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Egestas erat imperdiet sed euismod nisi porta lorem mollis. Quis viverra nibh cras pulvinar mattis nunc sed blandit libero. Integer vitae justo eget magna fermentum iaculis eu. Semper auctor neque vitae tempus quam pellentesque. Ipsum consequat nisl vel pretium lectus quam id. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Nisi lacus sed viverra tellus in hac habitasse platea dictumst.</p>

<p>Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Arcu ac tortor dignissim convallis. Ut tellus elementum sagittis vitae et leo duis. A diam sollicitudin tempor id eu. Pulvinar mattis nunc sed...

JavaScript

var scrollTop = 0;

tinymce.init({
  selector: '#mytextarea',
  mobile: {
    menubar: false,
    theme: 'mobile'
  },
  setup(editor) {
    editor.on('focus', function(e) {
      scrollTop = $(window).scrollTop();
    });

    editor.on('blur', function(e) {
      setTimeout(function () {
        // Wait for the next render cycle
        $(window).scrollTop(scrollTop);
      }, 20);
    });    
  }
});