JSFiddle - React, Tailwind, and code Playground

by chao

HTML

<script src="http://140.127.220.90/www0926/TouchMe/TouchMe/TouchMe/Newnew/jHtmlArea/scripts/jHtmlArea-0.7.0.min.js"></script>
<link rel="stylesheet" href="http://pietschsoft.com/demo/jHtmlArea/style/jHtmlArea.css">
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script src="http://pietschsoft.com/demo/jHtmlArea/style/jHtmlArea.png"></script>
<script src="http://pietschsoft.com/demo/jHtmlArea/style/jHtmlArea_Toolbar_Group_BG.png"></script>
<script src="http://pietschsoft.com/demo/jHtmlArea/style/jHtmlArea_Toolbar_Group__Btn_Select_BG.png"></script>
<script src="http://pietschsoft.com/demo/jHtmlArea/"></script>
<script src="http://pietschsoft.com/demo/jHtmlArea/images/disk.png"></script>
<div id="d1" class="dragitem">   
    <textarea id="txtCustomHtmlArea" cols="55" rows="10"><p><h3>請在這裡輸入文字</h3></p></textarea>
</div>

<div style="float:right;">    
    <div id="targetarea" class="targetarea" region="center" border="true" style="padding:10px;background:#fff;border:1px solid #ccc; width:100px">放置區</div>
</div>

CSS

div.jHtmlArea .ToolBar ul li a.custom_disk_button 
{
    background: url(images/disk.png) no-repeat;
    background-position: 0 0;
}

div.jHtmlArea { border: solid 1px #fff; }

.dragitem{
    border:1px solid #ccc;
    width:550px;
    height:220px;
    margin-bottom:10px;
    position:absolute;
}
.targetarea{
    border:1px solid red;
    height:550px;
    width:550px;
    position:relative;
}
.proxy{
    border:1px solid #ccc;
    width:80px;
    background:#fafafa;
}

JavaScript

$(function() {

    $("#txtCustomHtmlArea").htmlarea({

        toolbar: [
            ["html"],
            ["bold", "italic", "underline", "|", "forecolor"],
            ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
            ["link", "unlink", "|", "image"],
            ["cut", "copy", "paste"],
            [{
           
            css: "custom_disk_button",
            text: "Save",
            action: function(btn) {

                alert('SAVE!\n\n' + this.toHtmlString());
            }}]
            ],
        css: "style/jHtmlArea.Editor.css",

        loaded: function() {
        }
    });
});

//drag
$(function() {
    $('#d1').draggable({
        revert: true,
        deltaX: 10,
        deltaY: 10,
        proxy: function(source) {
            var n = $('<div class="proxy"></div>');
            n.html($(source).html()).appendTo('body');
            return n;
        }
    });
    $('#targetarea').droppable({

        onDrop: function(e, source) {
            $(this).html($(source).html());
        }
    });
});