安哥网络 发表于 2015-4-26 16:15:31

一个全功能的HTML5编辑器Mercury Editor

一个全功能的HTML5编辑器Mercury Editor
Mercury Editor是一个全功能的HTML5编辑器，建立在HTML5内容编辑功能的顶部，它本身就支持所有HTML5元素的语法和JavaScript API。它支持完整的HTML，简单，片段和图像区域。它支持预览编辑内容和插入链接，图像，视频或表。文件上传可以拖放完成。
<link href="/mercury/assets/stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="/mercury/assets/stylesheets/bootstrap-responsive.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="/mercury/assets/stylesheets/application.css" media="all" rel="stylesheet" type="text/css"/>

<script src="/mercury/assets/javascripts/jquery.min.js" type="text/javascript"></script>
<script src="/mercury/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>

<script src="/mercury/assets/javascripts/mercury_loader.js?src=/mercury/assets&pack=bundled&visible=false" type="text/javascript"></script>
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(function() {
    $('.browser').tooltip({});
});
jQuery(window).on('mercury:ready', function() {
    // do whatever additional loading that should happen here
    // you can also make simple changes to default functionality here
    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\nChrome 10+\nFirefox 4+\nSafari 5+\nOpera 11.64+\nMobile Safari (iOS 5+)");
    } else {
      Mercury.trigger('toggle:interface');
    }
}
</script>http://www.html580.com/9362
一个全功能的HTML5编辑器Mercury Editor
页: [1]
查看完整版本: 一个全功能的HTML5编辑器Mercury Editor