本文翻译来自wysiwyg-editor，大家想看原文可以点击此链接。

介绍

WYSIWYG HTML编辑器是一款有史以来最强大的JavaScript富文本编辑器之一。它采用了最新的技术，并利用jQuery和HTML5的巨大优势，创造了出色的编辑体验。拥有非常多的示例让你轻松集成，让你的用户爱上它清晰的设计。它能和Ruby On Rails，Django，Angular.js，Meteor，Symgony.CakePHP等集成，具有如下特点。

微小 - 只需添加您需要的插件(30+ 官方插件)

代码注释精美

简单可扩展- 良好的插件注释使你更容易使用和开发自己的插件

良好的维护 - 持续更新

很好的支持 - 帮助中心

WYSIWYG HTML Editor

​​

演示

开始使用

初始化编辑器

Froala WYSIWYG HTML编辑器是一个易于集成和易于使用的插件。它需要jQuery 1.11.0或更高版本，以及名为Font Awesome 4.4.0的图标字体。你也可以使用旧版本的Font Awesome，但是某些编辑器的图标将不会出现。

下面是如何在textarea上初始化编辑器的基本示例。

$(function() {

$('textarea').froalaEditor()

});

显示编辑内容

要在富文本编辑器之外保留编辑过的HTML的样式，你必须引入以下CSS文件。

此外，你应该确保将编辑的内容放在类名为fr-view元素中。

举个栗子

在此富文本编辑器中，你可以在块级元素之间随意拖动图片，具体代码如下。

HTML

JAVASCRIPT

$(function() {

$('div#froala-editor').froalaEditor({

dragInline: false,

toolbarButtons: ['bold', 'italic', 'underline', 'insertImage', 'insertLink', 'undo', 'redo'],

pluginsEnabled: ['image', 'link', 'draggable']

})

});

效果图如下所示。

WYSIWYG HTML Editor

有关自定义编辑器的详细信息，请查看编辑器文档。

​​​

相关下载

浏览器支持

我们正在积极测试编辑器在所有主要浏览器兼容性。在下面列出的浏览器中，如有任何问题请当作bug反馈到我们的GitHub库。

Internet Explorer 10+

Safari 6+

Firefox (Current - 1) and Current versions

Chrome (Current - 1) and Current versions

Opera (Current - 1) and Current versions

iOS 7.0+

Android 4.0+

资源

问题报告

我们使用GitHub中的问题作为Froala WYSIWYG HTML编辑器的官方错误跟踪器，以下是我们希望报告问题的用户的一些建议：

确保您使用的是最新版本的Froala WYSIWYG Editor。 您即将报告的问题可能已在最新的主分支版本中已经修复：https：//github.com/froala/froala-wysiwyg/tree/master/js。

为问题提供可复写的步骤将会缩短解决时间。JSFiddle总是受欢迎的。

某些问题可能是浏览器特定的，因此在您遇到问题中指定浏览器可能会有所帮助。

技术支持或问题

如果您有任何问题或需要帮助，请与我们联系。

许可

为了使用Froala编辑器，您必须根据需求购买以下许可证之一。 您可以在我们的网站上的定价计划页面找到更多信息。