JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<!-- include libraries(jQuery, bootstrap) -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


    <!-- jQuery Modal -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />


    <!-- include summernote css/js -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>



<script src="https://no2js.azurewebsites.net/snlite/js/dmutil-snlite.js"></script>


<style>


 .modal {
   max-width: 50%;

 }

.modal a.close-modal {
   top: 5px;
   right: 5px;
 }


</style>

<!-- 實體 HTML 本文區 -->

<div id="divImage">
    <img src="https://i.imgur.com/cRMHSIw.jpg" style="width:500px" class="de de-img" />
</div>


<div id="divLink" style="margin-top:50px">
    <a href="http://blog.no2don.com" class="de de-link">測試超連結</a>
</div>


<div id="divHTML" style="margin-top:50px">
    <div class="de de-element">
        <a href="http://www.google.com.tw">Link1</a>
        <h2>An ordered HTML list</h2>

        <ol>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
    </div>
</div>


<!-- END--實體 HTML 本文區 -->


<div id="deImage" class="modal" style="max-width:50%">
    <div>

        <label>圖片網址</label>

        <input id="txtImgUrl" class="form-control" />
    </div>

    <div style="margin-top:20px">

        <label>上傳圖片</label>

        <div>
            <div class="col-lg-12">
                <input id="file_Imf" class="form-control" type=file />
            </div>
           
        </div>
   ...

JavaScript

//Base
    var _CoverBorderColor = "red";
    var _CoverBorderWidth = "5px";


    $(document).ready(function () {

        $('#de-summernote').summernote({
            // $('#de-summernote').summernote({
            tabsize: 2,
            height: 500,
            dialogsInBody: true
        });


        $(".de").hover(
            function () {
                $(this).css({ "border": " " + _CoverBorderWidth + " solid " + _CoverBorderColor, "cursor": "pointer" });
            },
            function () {
                $(this).css({ "border": "" });
            }
        );

        document.getElementById("file_Imf").addEventListener("change", ReadImageFile);
        
        //Fix Close Button
        $('.modal').css('max-width','50%');
        $('.modal a.close-modal').css('top','5px');
 				$('.modal a.close-modal').css('right','5px');
    });

    //Image Handler
    var currentImg = null;

    function ReadImageFile() {

        if (this.files && this.files[0]) {

            var FR = new FileReader();

            FR.addEventListener("load", function (e) {
                $(currentImg).attr('src', e.target.result);
            });

            FR.readAsDataURL(this.files[0]);
            $('.blocker').click();
        }

    }


    $(".de-img").click(function () {
        $('#txtImgUrl').val($(this).attr('src'));
        currentImg = this;
        $("#deImage").modal();
    });

    $('.closeImagePopup').click(function () {
        $('.blocker').click();
    });

    $('#saveImagePopup').click(function () {
        $(currentImg).attr('src', $('#txtImgUrl').val());
        $('.blocker').click();
    });

    $('#btnUploadImage').click(function () {

 

    });
   



    //Link Handler
    var currentLink = null;


    $(".de-link").click(function () {

        $('#txtLinkTo').val($(this).attr('href'));
        $('#txtLinkText').val($(this).html());
        currentLink = this;
        $("#deLink").modal();
        return false;
    });

   ...