html5富文本编辑器,javascript富文本编辑器

HTML富文本编辑器Quill的使用

两种主题

toolbar的自定义：

quill取消了getHtml()的API，getContents()返回的是Delta对象，一种JSON数组，getText()返回文本域里对应字符串。

因平台需将用户编辑的格式传回后台生成邮件的正文，而邮件的正文是Html格式，通过查issue找到获取Html的方法： quill.container.firstChild.innerHTML

相关问答

Q1: 谁能找到类似知乎的可以进行响应式编辑的html5富文本编辑器

可以用百度的文本编辑器，当然还有其他的，挺多的，

而且你也可以自己写的。

Q2: 哪一款 HTML5 编辑器最值得推荐？为什么

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定制化。

Q3: html5 在线富文本编辑器怎么用

方法/步骤

1

!DOCTYPE html

html

head

titleImages 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;"

h2Hello and Welcome/h2

pI 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

pDuring 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

Q4: 有哪些简单好用的 HTML 5 编辑器

一、Adobe Edge

目前还处于预览阶段的Adobe Edge是用HTML5、CSS、JavaScript开发动态互动内容的设计工具。内容可以同时兼容移动设备和桌面电脑。Edge的一个重要功能是Web工具包界面，方便确保页面在不同浏览器中的架构一致性，此外Edge还将整合TypeKit这样的字体服务。

动画和图形可以添加到HTML元素中，程序也能通过Edge自身的代码片段库或者JavaScript代码进行扩展。动画可以在独立的时间线上进行嵌套，还能实现互动功能。符合可以服用并通过API和代码片段控制。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器。

二、Adobe Dreamweaver CS6

Adobe Dreamweaver CS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面。其Fluid Grid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性。开发者可以完全实现Web设计的可视化操作，无需为代码所困。

用户不但还能在Live View中预览，还提供多屏幕预览功能。开发者可以通过MultiScreen预览面板查看HTML5内容的渲染效果。Live View通过WebKit渲染引擎支持HTML5。

三、Adobe ColdFusion 10

ColdFusion是用来开发企业Web程序的服务器端技术，通过Websockets、互动表单、视频和地理标签等HTML5技术创建富媒体用户体验。

四、Sencha Architect 2

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

五、Sencha Touch 2

Sencha Touch2是移动应用框架，也被看作是Sencha的HTML5平台。开发者可以用它开发面向iOS、Android和Blackberry、Kindle Fire等多种平台的移动应用。

六、Dojo Foundation Maqetta

来自于IBM的一个项目，Dojo Foundation Maqetta是为桌面和移动设备开发HTML5应用的开源工具，支持在浏览器中查看HTML5界面。用户体验设计师可以通过拖放组装UI样板

七、微软Visual Studio 2010 ServicePack 1

虽然一开始并不支持HTML5，但微软在2011年三月发布的Visual Studio 2010 SP1中提供了IntelliSense，追加了针对HTML5的一些元素。

八、JetBrains WebStorm 4.0

作为拥有HTML编辑器的JavaScript集成开发环境，WebStorm4.0提供了开发web应用的HTML5样板。开发者可以在创建HTML文档时可获得对HTML5文件的支持。例如砍伐者键入。开发者还可以在chrome浏览器中实时预览HTML文档。

九、Google Web Toolkit

该开发工具用于开发浏览器应用，但库中支持很多HTML5功能。包括对客户端或web存储的支持。其他HTML5功能还包括支持Canvas可视化，以及音频和视频widget。