Mercury 採用HTML5 不對 IE 做支援

Mercury 是採用 HTML5 開發的 WYSIWYG(所見及所得) 線上編輯器類似於 TinyMCE 或 CKEditor。但是擁有不同的使用者體驗，他不是放置在一個指定的元素當中，而是呈現在整個頁面當中，所以可以用於編輯整個頁面或任意的指定區域。支援預覽編輯內容並插入連結、圖片、影片或表格。文件上傳可以用拖曳的方式開始上傳步驟。此外，還能夠支援協作編輯器能夠讓其他人編輯同一個頁面並查看實際變化。

使用方法：
第一步 載入程式必須用到的 JavaScript 檔案
<!-- 後面帶了兩個參數 第一個參數表示把以下檔案全部一起載入
  javascripts: 'jquery-1.7.js,mercury.min.js,mercury_dialogs.js',
  stylesheets: 'mercury.bundle.css'
  第二個參數 是初始化後並不馬上顯示編輯器-->
<script src="/mercury/javascripts/mercury_loader.js?pack=all&visible=false"></script>

第二步 編輯你的 HTML內容
<div data-mercury="full">
這裡打一些內容
最好包含HTML語法
 <!--在特定標籤   data-mercury="full" 表示為可編輯區域-->
</div>
<div>
  這裡也打一些內容來判別不同
</div>
<!--使用一個連結來啟動編輯器-->
<a href="javascript:toggleMercury()">Demo</a>

第三步 為程式啟動添加一些 JavaScript 程式碼
    jQuery(window).on('mercury:ready', function() {
      Mercury.PageEditor.prototype.save = function() {
        var data = this.serialize();
        var lightview = Mercury.lightview(null, {title: 'Saving', closeButton: true});
        setTimeout(function() {
          var textarea = '<textarea style="width:100%;height:300px" wrap="off">' + top.JSON.stringify(data, null, '  ') + '</textarea>';
          lightview.loadContent('<div style="width:500px">Saving in the demo is disabled, but you can see what would be sent to the server below.' + textarea + '</div>');
        }, 500);
      }
    });

    function toggleMercury() {
      if (typeof(Mercury) == 'undefined') {
        alert("Sorry, but Mercury Editor isn't supported by your current browser.\n\nBrowsers that support the required HTML5 spec:\n\n  Chrome 10+\n  Firefox 4+\n  Safari 5+\n  Opera 11.64+\n  Mobile Safari (iOS 5+)");
      } else {
        Mercury.trigger('toggle:interface');
      }
    }
jQuery(parent).trigger('initialize:frame');

作者網站：http://jejacks0n.github.com/mercury/
檔案大小：260 KB
檔案下載：https://github.com/downloads/jejacks0n/mercury/mercury-v0.8.0.zip
檔案備份：下載