diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..3976db2
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1 @@
+gem 'edouard-htmldiff'
diff --git a/README.md b/README.md
index f6d148b..f39d4d5 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,13 @@
-# Redmine Diff Popup
+# Redmine Diff Popup (Nice)
 
 This plugin provide on pop-up show feature of diff.
 
 * http://www.redmine.org/plugins/redmine_diff_popup
 
+This plugin will show you nice diff
+![avatar](https://raw.githubusercontent.com/Guiqifeitian/redmine_diff_popup/master/example.PNG)
+![avatar](https://raw.githubusercontent.com/Guiqifeitian/redmine_diff_popup/master/example2.PNG)
+
 ## Features
 
 * Add pop-up show feature on issue's history diff.
diff --git a/app/controllers/diff_popup_controller.rb b/app/controllers/diff_popup_controller.rb
index 89a8e59..4e98de7 100644
--- a/app/controllers/diff_popup_controller.rb
+++ b/app/controllers/diff_popup_controller.rb
@@ -1,3 +1,4 @@
+require 'htmldiff'
 class DiffPopupController < ApplicationController
   unloadable
   before_action :find_journal, :only => [:journal_diff]
@@ -23,6 +24,14 @@ def journal_diff
       end
     end
     @diff = Redmine::Helpers::Diff.new(@detail.value, @detail.old_value)
+
+    # change start,tplink,guishaoli
+    # 使用edouard-htmldiff对issue的修改前后的内容进行diff
+    @diff_result = HTMLDiff.diff(@detail.old_value,@detail.value,true)
+    # 将原生的diffmod（修改）diffdel（删除） diffins（增加）替换成redmine的class
+    @left = @diff_result[0].gsub("diffmod","diff_out").gsub("difftype","class").gsub("diffdel","diff_out")
+    @right = @diff_result[1].gsub("diffmod","diff_in").gsub("difftype","class").gsub("diffins","diff_in")
+    # change end
   end
 
 private
diff --git a/app/controllers/wiki_popup_controller.rb b/app/controllers/wiki_popup_controller.rb
index a81246a..eda93d0 100644
--- a/app/controllers/wiki_popup_controller.rb
+++ b/app/controllers/wiki_popup_controller.rb
@@ -1,13 +1,35 @@
+require 'htmldiff'
+
 class WikiPopupController < ApplicationController
   unloadable
   before_action :find_wiki, :authorize
   before_action :find_existing_page, :only => [:wiki_diff]
-  
+
   layout false
 
   def wiki_diff
     @diff = @page.diff(params[:version], params[:version_from])
+
     render_404 unless @diff
+
+    # change start,tplink,guishaoli
+    # 获取需要对比的俩个版本号
+    version_to = params[:version]
+    version_from = params[:version_from]
+    version_to = version_to ? version_to.to_i : @page.content.version
+    content_to = @page.content.versions.find_by_version(version_to)
+    content_from = version_from ? @page.content.versions.find_by_version(version_from.to_i) : content_to.try(:previous)
+
+    # 保证是大版本对比小版本
+    if content_from.version > content_to.version
+      content_to, content_from = content_from, content_to
+    end
+
+    # 使用edouard-htmldiff进行比较
+    @diff_result = HTMLDiff.diff(content_from.text,content_to.text,true)
+    @left = @diff_result[0].gsub("diffmod","diff_out").gsub("difftype","class").gsub("diffdel","diff_out")
+    @right = @diff_result[1].gsub("diffmod","diff_in").gsub("difftype","class").gsub("diffins","diff_in")
+    # change end
   end
 
 private
diff --git a/app/views/diff_popup/journal_diff.html.erb b/app/views/diff_popup/journal_diff.html.erb
index 4ee6136..ec1cf87 100644
--- a/app/views/diff_popup/journal_diff.html.erb
+++ b/app/views/diff_popup/journal_diff.html.erb
@@ -4,6 +4,57 @@
     <span class="diff_in"><%= l(:diff_popup_legend_add) %></span>&nbsp;<span class="diff_out"><%= l(:diff_popup_legend_remove) %></span>
   </div>
 </div>
-<div class="text-diff">
-<%= simple_format_without_paragraph @diff.to_html %>
+<div>
+  <!-- change start,tplink,guishaoli -->
+  <!--添加 “变更前” “变更后”描述栏 -->
+<span style="width: 50%;display: inline-block;;text-align: center;"> <%= l(:before_change) %>  </span>
+<span style="width: 50%;float: right;text-align: center;"> <%= l(:after_change)  %>  </span>
 </div>
+<div class="text-diff" style="position: relative;height: -webkit-fill-available;">
+  <!-- 注释原生的diff内容 -->
+<% simple_format_without_paragraph @diff.to_html %>
+
+    <div id="left"  style="width: 48%;
+            position: absolute;
+            top: 0px;
+            overflow: auto;">
+    <%=  @left %>
+    </div>
+    <div id="right" style="width: 48%;
+            position: absolute;
+            left: 52%;
+            top: 0px;
+            overflow: auto;">
+    <%= @right  %>
+    </div>
+
+</div>
+<script type="text/javascript">
+// 对特殊字符转义，让浏览器解析html标签
+function unescapeHTML(sqlstring){
+    sqlstring = "" + sqlstring;
+    return sqlstring.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
+}
+var rdata =$("#right").html()
+
+$("#right").html(unescapeHTML(rdata))
+
+var ldata = $("#left").html()
+
+$("#left").html(unescapeHTML(ldata))
+
+</script>
+<style type="text/css">
+/* 自定义变更内容样式 */
+.diff_in{
+ background: #cfc;
+    border: solid;
+    border-color: #cfc;
+}
+.diff_out{
+     background: #fcc;
+    border: solid;
+    border-color: #fcc;
+}
+</style>
+<!-- change end -->
\ No newline at end of file
diff --git a/app/views/wiki_popup/wiki_diff.html.erb b/app/views/wiki_popup/wiki_diff.html.erb
index 9f88cc6..c3560af 100644
--- a/app/views/wiki_popup/wiki_diff.html.erb
+++ b/app/views/wiki_popup/wiki_diff.html.erb
@@ -16,6 +16,58 @@
     <span class="diff_in"><%= l(:diff_popup_legend_add) %></span>&nbsp;<span class="diff_out"><%= l(:diff_popup_legend_remove) %></span>
   </div>
 </div>
-<div class="text-diff">
-<%= simple_format_without_paragraph @diff.to_html %>
+<div>
+  <!-- change start,tplink,guishaoli -->
+  <!--添加 “变更前” “变更后”描述栏 -->
+<span style="width: 50%;display: inline-block;;text-align: center;"> <%= l(:before_change) %>  </span>
+<span style="width: 50%;float: right;text-align: center;"> <%= l(:after_change)  %>  </span>
 </div>
+<div class="text-diff" style="height: -webkit-fill-available;">
+  <!-- 注释原生的diff内容 -->
+<% simple_format_without_paragraph @diff.to_html %>
+    <div id="left"  style="width: 48%;
+            position: absolute;
+            overflow-x: scroll;
+            ">
+
+    <%=  @left %>
+    </div>
+    <div id="right" style="width: 48%;
+            position: absolute;
+            left: 52%;
+            overflow-x: scroll;
+            ">
+    <%= @right  %>
+    </div>
+
+</div>
+
+<script type="text/javascript">
+// 对特殊字符转义，让浏览器解析html标签
+function unescapeHTML(sqlstring){
+    sqlstring = "" + sqlstring;
+    return sqlstring.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
+}
+var rdata =$("#right").html()
+
+$("#right").html(unescapeHTML(rdata))
+
+var ldata = $("#left").html()
+
+$("#left").html(unescapeHTML(ldata))
+
+</script>
+<style type="text/css">
+/* 自定义变更内容样式 */
+.diff_in{
+ background: #cfc;
+    border: solid;
+    border-color: #cfc;
+}
+.diff_out{
+     background: #fcc;
+    border: solid;
+    border-color: #fcc;
+}
+</style>
+<!-- change end -->
diff --git a/assets/javascripts/diff_popup.js b/assets/javascripts/diff_popup.js
index 898c7c6..9473969 100644
--- a/assets/javascripts/diff_popup.js
+++ b/assets/javascripts/diff_popup.js
@@ -10,14 +10,14 @@ function replaceJournalDiff()
       var diffUrl = $(this).attr("href");
       var journalIndice = diffUrl.split("&indice=")[1];
       var dlgName = "#diffpopup" + journalIndice;
-      
+
       //on top dialog
       if ($(dlgName).size() == 1)
       {
         $(dlgName).dialog("moveToTop");
         return;
       }
-      
+
       //show dialog
       $.get(diffUrl, function (data) {
         var journalIndice = decodeURIComponent(this.url.split("?")[1].split("&indice=")[1]);
@@ -25,8 +25,13 @@ function replaceJournalDiff()
         $("#content").append("<div id='" + popupId + "'></div>");
         $("#" + popupId).html(data).dialog({
           title: "#" + journalIndice,
-          width: window.innerWidth / 2 - 40,
-          maxHeight: window.innerHeight - 160,
+          //change start,tplink,guishaoli
+          // 修改对话框初始大小
+          width: window.innerWidth  - 80,
+          maxHeight: window.innerHeight - 100,
+          // 改为模态覆盖页面，让背景置灰
+          modal: true,
+          //change end
           position: { my: "center center", at: "right center", of: window },
           create: function(event) {
             $(event.target).dialog("widget").css({ "position": "fixed" });
diff --git a/assets/javascripts/wiki_popup.js b/assets/javascripts/wiki_popup.js
index 8f99e37..62321bc 100644
--- a/assets/javascripts/wiki_popup.js
+++ b/assets/javascripts/wiki_popup.js
@@ -1,7 +1,6 @@
 function replaceWikiSubmitButton()
 {
-  $("#project_id, #id").insertBefore("#content > form > table");
-  $("button.wiki-popup").replaceAll($("#content > form input[type='submit']")).filter("button.wiki-popup").show().on("click", function(){
+  $("button.wiki-popup, #project_id, #id").replaceAll($("#content > form > input.small")).filter("button.wiki-popup").show().on("click", function(){  
     //on top dialog
     var dlgName = "#diffpopup" + $("input[name='version_from']:checked").val() + "_" + $("input[name='version']:checked").val();
     if ($(dlgName).size() == 1)
@@ -9,17 +8,22 @@ function replaceWikiSubmitButton()
       $(dlgName).dialog("moveToTop");
       return false;
     }
-    
+
     //show dialog
-    var diffUrl = $(this).attr("url") + $(this).parents("form").serialize();
+    var diffUrl = $(this).attr("url") + $(this).parent("form").serialize();
     $.get(diffUrl, function (data) {
       var params = q_to_hash(decodeURIComponent(this.url).split("?")[1].split("&"));
       var popupId = "diffpopup" + params["version_from"] + "_" + params["version"];
       $("#content").append("<div id='" + popupId + "'></div>");
       $("#" + popupId).html(data).dialog({
         title: $("#" + popupId).find("p.wiki-popup-title").text(),
-        width: window.innerWidth / 2 - 40,
-        maxHeight: window.innerHeight - 160,
+        //change start,tplink,guishaoli
+        // 修改对话框初始大小
+        width: window.innerWidth  - 80,
+        maxHeight: window.innerHeight - 100,
+        // 改为模态覆盖页面，让背景置灰
+        modal: true,
+        // change end
         position: { my: "center center", at: "right center", of: window },
         create: function(event) {
           $(event.target).dialog("widget").css({ "position": "fixed" });
diff --git a/config/locales/zh.yml b/config/locales/zh.yml
index 73719ea..35b5e11 100644
--- a/config/locales/zh.yml
+++ b/config/locales/zh.yml
@@ -4,3 +4,5 @@ zh:
   diff_popup_legend_remove: "移除"
   field_enable_popup_journal_diff: "启用浮动窗口显示问题处理历史记录"
   field_enable_popup_wiki_diff: "启用浮动浮动窗口显示WIKI历史记录"
+  before_change: "变更前"
+  after_change: "变更后"
diff --git a/example.PNG b/example.PNG
new file mode 100755
index 0000000..0bdf6e4
Binary files /dev/null and b/example.PNG differ
diff --git a/example2.PNG b/example2.PNG
new file mode 100755
index 0000000..a151b52
Binary files /dev/null and b/example2.PNG differ
diff --git a/init.rb b/init.rb
index b28c7fb..da0d24f 100644
--- a/init.rb
+++ b/init.rb
@@ -3,8 +3,7 @@
 require_dependency 'redmine_diff_popup/patches/user_preference_patch'
 
 
-reloader = defined?(ActiveSupport::Reloader) ? ActiveSupport::Reloader : ActionDispatch::Reloader
-reloader.to_prepare do
+ActionDispatch::Callbacks.to_prepare do
   unless UserPreference.included_modules.include?(RedmineDiffPopup::Patches::UserPreferencePatch)
     UserPreference.send :prepend, RedmineDiffPopup::Patches::UserPreferencePatch
   end
@@ -19,7 +18,7 @@
   name 'Redmine Diff Popup plugin'
   author 'Ryuta Tobita'
   description 'This plugin provide on pop-up show feature of diff.'
-  version '2.2.0'
+  version '2.1.0'
   url 'https://github.com/GEROMAX/redmine_diff_popup'
   author_url 'https://github.com/GEROMAX'
   permission :wiki_popup, {:wiki_popup => [:wiki_diff]}, :public => true