JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<!-- 這是多個summer note的範例 http://jsfiddle.net/3nthzprq/ -->
  .note-toolbar.panel-heading {
    z-index: auto;
  }
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

  <div class="form-group">
    <label for="check_step" class="col-md-2 control-label">Check Step
        &nbsp;
    </label>
    <div class="col-md-10">
      
      <textarea class="form-control" id="check_step" name="check_step"></textarea>
      
			
    </div>
    
  </div>

JavaScript

$('#check_step').val('<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAESUlEQVR4nO3cSU/qYBiG4acDIAqiDA4YlsYhxrjw//8C3eBCF5KYEAWZkVIp0PYsCLVlLJ5jzmPyXqtKPvS1dyc1Ubm7u3MhaKj/ewARJEHISBAyEoSMBCEjQchIEDIShIwEISNByEgQMhKEjAQhI0HISBAyEoSMBCEjQchIEDIShIwEISNByEgQMhKEjAQhI0HISBAyEoSMBCEjQchIEDIShIwEISNByEgQMhKEjAQhI0HISBAyEoSMBCGjb/oG13XRbrfR6XRgmiZM00Q0GsXNzc3cWsMw8PLygl6vB13XkUgkkM/nkUqlvrXub/2G2TcOUiwW0ev1Aq9FIpG5df1+H8ViEY7jAABs24ZlWWi1Wri6uvIGDrvuX/gNs28cJBqNTt6o6xiPxwAARVHm1pXLZW/QVCqFWCyGWq0G13VRLpe9YcOu86vVaiiVSnAcB5lMBufn5wCAh4cHGIYBVVVxe3sLTdPoZl9n4yCnp6c4OzuDZVm4v79f+E05joN2uz35ArqOy8tLaJoG0zRhGAY6nQ4sy0IkEgm1LhaLBT5/JpNBqVSC67poNpsYjUawLAvdbhcAcHx8PBeDZfZ1Nr6p67oOVVW9IwMAVDX4aT4+PmDbNgAgHo97Oycej3trTNMMvW6Wpmk4PDwEMLkvtFotNBoNAJMdnM/naWdf59tPWa779V+dZo+y0Wjkbfuv0dNLBgAMh8PQ6xbx7/RGo+EFOTg4CLyfcfZV/kmQ2aPMP6yuf10V/YOPRqPQ6xbZ2tpCOp0GALTbbQwGAwDAyckJ/eyrfDuI/7SfPcqmN0wgOOzsjgi7bpnZnZ9Op7G9vf0rZl/mR84Q/8f+b96/Pb2eh1m3TCKRCOzQRY+wrLMv8yNniH8Q/5Hk39Y0LfS6Zd7f3wM7t16vh7pMMMy+zI+cIcuG/fz89LZjsVjodcu8vb0B+NqpjuOgWq3+itmX+ZGnrN3dXW97erO1bRuGYQCA9yuGsOsWabVa3nsKhYL3eqVSCczGOPsqG13kLMtCvV7HeDz2vjAAdLtdPD8/w7ZtZDIZZLNZ7OzsoN/vYzAY4PHxEbZte0fS/v4+gMkjYph1i0zPjmg0ikKhgGq1iuFwiOFwiEajgVwuRzv7KhsFqVarKJfLc69Pf1EHAMlkEsDkqH16egIANJtNb62qqoEjOuw6v36/j06nA2DyZKUoCnK5HF5fXwFMYs0GYZl9nY0uWWFuUtMfjLLZLC4uLpBMJr2b4N7eHq6vrwOPpmHX+VUqFaiqikgk4v3EfnR0BEVRoKoqTNP0LiNss6+jyD9S5iJ/oCIjQchIEDIShIwEISNByEgQMhKEjAQhI0HISBAyEoSMBCEjQchIEDIShIwEISNByEgQMhKEjAQhI0HISBAyEoSMBCEjQchIEDIShIwEISNByEgQMhKEjAQhI0HISBAyEoSMBCEjQchIEDIShIwEISNByPwBpaZErSDxgLcAAAAASUVORK5CYII=" data-filename="100.png" style="width: 100px;">hahaha</p><p>^^</p><b>ysuper test</b>');
$('#check_step').summernote();
//設定唯讀無法修改
/* $('#check_step').summernote('disable'); */