HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

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

2013-6-26 17:02| 发布者: html5cn| 查看: 20107| 评论: 1|原作者: system|来自: html580

摘要: Mercury Editor是一个全功能的HTML5编辑器,建立在HTML5内容编辑功能的顶部,它本身就支持所有HTML5元素的语法和JavaScript API。它支持完整的HTML,简单,片段和图像区域。它支持预览编辑内容和插入链接,图像,视 ...

     在线演示

      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\n  Chrome 10+\n  Firefox 4+\n  Safari 5+\n  Opera 11.64+\n  Mobile Safari (iOS 5+)");
    } else {
      Mercury.trigger('toggle:interface');
    }
  }
</script>
更多
2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

相关阅读

发表评论

最新评论

引用 ����SB 2014-11-6 22:51
不错,赞一个。。。

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-3-30 20:45

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部