哪一款 HTML5 编辑器最值得推荐?为什么

html-css048

哪一款 HTML5 编辑器最值得推荐?为什么,第1张

1. Mercury : HTML5 Powered WYSIWYG Editor

Mercury 是个全功能的编辑器,包含TinyMCE和CKEditor同样的功能,但又有不同的特性。与iFrames有所不同,它使用了HTML5内容可编辑功能等。Mercury 是由CoffeeScript代码编写,其支持所有的主流浏览器。

Website/Downoad

2 Aloha Editor – HTML5 WYSIWYG Editor

Aloha Editor 是个基于浏览器的富文本编辑器框架。不像其他大多数的HTML编辑器,Aloha可以被嵌入到CMS、Blog,及其他标准的web开发框架中。

Website

3. Rendra- Online HTML 5 Editor

Rendra 是个在线HTML5 编辑器,支持用户实时预览,用户可以使用哪个浏览器支持的HTML 5和CSS 3,以及HAML 和SASS。它是由CoffeeScript 和 Sinatra代码编写的。用户可以用Rendra测试JS代码,允许用户利用 jQuery UI,jQuery 工具和插件。

Website

4. BlueGriffon: Next Generation HTML5 WebEditor

BlueGriffon是一个新的WYSIWYG编辑器,跨平台, 支持Windows, Linux and Mac OSX。 该编辑器内置HTML5/CSS3编辑功能,可以轻松地用它来实现传输、文本和边框的阴影、斜体等效果。它使用Google Font Directory 和FontSquirrel addons,可以设置个性化网页字体。

Website

5. Maqetta : Open Source Project &HTML5 Editor

Maqetta,一个创建桌面和移动用户界面的HTML5设计编辑工具,并同时宣布将项目捐助给开源机构Dojo基金会。

Maqetta已经是开源项目,提供WYSIWYG可视化HTML5用户界面设计功能,仅需简单的拖曳操作,支持桌面和移动用户界面。

6. Apatana Studio 3

Aptana Studio 3 是开源web开发工具,它允许开发者测试web应用,支持最新的web开发技术如HTML5, CSS3, JavaScript, Ruby, Rails, PHP 和 Python。Apatanna包含很多的功能,比如GIF integration, HTML,CSS和JavaScript Code assists, integrated debugger, 部署向导,以及IDE定制化。

html5 在线富文本编辑器方法步骤:

<!DOCTYPE html>

<html>

<head>

<title>Images upload</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<link rel="stylesheet" type="text/css" href="../css/style.css" />

<script type="text/javascript" src="../lib/jquery-1.7.min.js"></script>

<link rel="stylesheet" href="../redactor/css/redactor.css" />

<script src="../redactor/redactor.js"></script>

<script type="text/javascript">

$(document).ready(

function()

{

$('#redactor_content').redactor({ imageUpload: '../demo/scripts/image_upload.php' })

}

)

</script>

</head>

<body>

<div id="page">

<textarea id="redactor_content" name="content" style="height: 460px">

<h2>Hello and Welcome</h2>

<p>I never did quite grasp him, though he endeavored to explain it to me upon numerous occasions. I suggested telepathy, but he said no, that it was not telepathy since they could only communicate when in each others' presence, nor could they talk with the Sagoths or the other inhabitants of Pellucidar by the same method they used to converse with one another.</p>

<p>"What they do," said Perry, "is to project their thoughts into the fourth dimension, when they become appreciable to the sixth sense of their listener. Do I make myself quite clear?"</p>

<p>"You do not, Perry," I replied. He shook his head in despair, and returned to his work. They had set us to carrying a great accumulation of Maharan literature from one apartment to another, and there arranging it upon shelves. I suggested to Perry that we were in the public library of Phutra, but later, as he commenced to discover the key to their written language, he assured me that we were handling the ancient archives of the race.</p>

<p>During this period my thoughts were continually upon Dian the Beautiful. I was, of course, glad that she had escaped the Mahars, and the fate that had been suggested by the Sagoth who had threatened to purchase her upon our arrival at Phutra. I often wondered if the little party of fugitives had been overtaken by the guards who had returned to search for them. Sometimes I was not so sure but that I should have been more contented to know that Dian was here in Phutra, than to think of her at the mercy of Hooja the Sly One. Ghak, Perry, and I often talked together of possible escape, but the Sarian was so steeped in his lifelong belief that no one could escape from the Mahars except by a miracle, that he was not much aid to us—his attitude was of one who waits for the miracle to come to him.</p>

</textarea>

</div>

</body>

</html>

HTML5被看做是Web开发者创建流行web应用的利器,增加了对视频和Canvas 2D的支持。用HTML5的优点主要在于,这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。今天,我将为大家推荐几个主流的HTML5开发工具。

1、Sublime Text

Sublime Text是一个跨平台的代码编辑器,同时支持Windows、Linux、Mac OS X等操作系统,也是HTML的文本编辑器。

Sublime Text具有漂亮的用户界面和强大的功能,主要功能包括:拼写检查、书签、完整的 Python API 、Goto 功能、即时项目切换、多选择、多窗口等等。

2、Dreamweaver cc

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,拥有可视化编辑界面,支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,初学HTML5的人可以无需编写任何代码就能快速创建Web页面。

3、Adobe Edge

Adobe Edge是一款新型网页互动工具,允许设计师通过HTML5、CSS和Java制作网页动画。Edge的一个重要功能是Web工具包界面,方便确保页面在不同浏览器中的架构一致性。

4、WebStorm

WebStorm是一款Java开发工具,WebStorm具有的优势是:智能的代码补全、代码格式化、html提示、联想查询、代码重构、代码检查和快速修复、代码调试、代码结构浏览、代码折叠、包裹或者去掉外围代码。

5、HBuilder

HBuilder,即Html Builder的缩写,Builder是建造者的意思。HBuilder是一个极客工具,追求无鼠标的极速操作,不管是敲代码的快捷设定,还是操作功能的快捷设定,都融入了效率第一的设计思想。

6、visual studio code

一个运行于Mac OS X、Windows和 Linux 之上的,针对于编写现代Web和云应用的跨平台源代码编辑器。该编辑器也集成了所有一款现代编辑器所应该具备的特性,包括语法高亮,可定制的热键绑定,括号匹配以及代码片段收集。

7. DevExtreme

DevExtreme Complete Subion是性能比较好的的HTML5、CSS和Java移动开发框架,可以直接在Visual Studio集成开发环境,构建iOS、Android、Tizen和Windows Phone 8应用程序。DevExtreme包含 PhoneJS 和 ChartJS 两个原生UI组件,并且提供源代码。目前,DevExtreme支持VS2010/2012/2013集成开发环境,兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移动平台,是Visual Studio开发人员开发跨平台移动产品的首选工具。

8. Sencha Architect

在开发移动和桌面应用的工具中,Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 Java应用,并实时预览。

开发工具的选择,可以说是开发者社区中一个经久不衰的话题,现今编辑器的数量数不胜数,vim、sublime Text,Emacs,Atom等等,那么对于一个开发者而言,挑选一个合适的编辑器是可以有效的提高编程效率那么以上是我为大家推荐的几款开发工具啦,大家可根据自己的喜好选择哦!