所见即所得html5编辑器,一个漂亮的所见即所得(WYSIWYG)富文本编辑器:Froala

本文翻译来自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元素中。

Here comes the HTML edited with the Froala rich text editor.

举个栗子

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

HTML

Click here to edit the content


The image can be dragged only between blocks and not inside them.

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编辑器，您必须根据需求购买以下许可证之一。 您可以在我们的网站上的定价计划页面找到更多信息。