<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="htmldiffer.js"></script>
<style>
ins {
background-color: rgb(210, 253, 206);
}
ins img {
border-color: rgb(210, 253, 206);
}
del {
background-color: #ffdddd;
}
del img {
border-color: #ffdddd;
</style>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
文本對比/ <small>偽原創輔助</small>
</h1>
</div>
<ul class="breadcrumb">
<li>
<a href="#">首頁</a>
</li>
<li>
<a href="#">文本對比</a>
</li>
<li class="active">
Data
</li>
</ul>
<div class="row clearfix">
<div class="col-md-2 column">
</div>
<div class="col-md-10 column">
<div class="row clearfix">
<div class="col-md-6 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="badge">第一步</span>輸入原始文本</h3>
</div>
<div id='original' contenteditable="true" style='border:1px;min-height:200px;max-height:500px;overflow-y: auto ' class="panel-body">
</div>
</div>
</div>
<div class="col-md-6 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="badge">第二步</span>輸入最新文本</h3>
</div>
<div id='modified' contenteditable="true" style='border:1px;min-height:200px;max-height:500px;overflow-y: auto' class="panel-body">
</div>
</div>
</div>
<div class="col-md-12 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">文本對比</h3>
</div>
<div id='appid' style='border:1px;min-height:200px' class="panel-body">
</div>
</div>
</div>
</div>
<div class="row clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('#modified').keyup(function(){
var original = $('#original').html();
var modified = $('#modified').html();
var output = htmldiffer(original, modified);
$('#appid').html(output);
});
</script>
</body>
</html>
