阿哥论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 270|回复: 0

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

[复制链接]

2011

主题

1

好友

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

优秀会员 助人为乐 辛勤工作 技术精英 多才多艺 优秀班竹 灌水天才 星球管理 宣传大使 灌水之王 财富勋章 版主勋章 动漫勋章 勤奋会员 论坛精英 PS高手 心 8 闪游皮肤 双鱼座 8★8➹ 志愿者 乖

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

  4. <script src="/mercury/assets/JavaScripts/jQuery.min.js" type="text/javascript"></script>
  5. <script src="/mercury/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>

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

  8. <script type="text/javascript">
  9.   jQuery(function() {
  10.     $('.browser').tooltip({});
  11.   });
  12.   jQuery(window).on('mercury:ready', function() {
  13.     // do whatever additional loading that should happen here
  14.     // you can also make simple changes to default functionality here
  15.     Mercury.PageEditor.prototype.save = function() {
  16.       var data = this.serialize();
  17.       var lightview = Mercury.lightview(null, {title: 'Saving', closeButton: true});
  18.       setTimeout(function() {
  19.         var textarea = '<textarea style="width:100%;height:300px" wrap="off">' + top.JSON.stringify(data, null, '  ') + '</textarea>';
  20.         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>');
  21.       }, 500);
  22.     }
  23.   });

  24.   function toggleMercury() {
  25.     if (typeof(Mercury) == 'undefined') {
  26.       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+)");
  27.     } else {
  28.       Mercury.trigger('toggle:interface');
  29.     }
  30.   }
  31. </script>
复制代码
http://www.html580.com/9362
一个全功能的HTML5编辑器Mercury Editor

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博账号登陆

该会员没有填写今日想说内容.
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

回顶部