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

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

介绍

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

• 微小 - 只需添加您需要的插件(30+ 官方插件)
• 客户端框架集成
• 可以向如 PHP, Node.JS, .NET, Java, 和 Python提供服务端开发工具包
• 代码注释精美
• 在线文档更新
• 简单可扩展- 良好的插件注释使你更容易使用和开发自己的插件
• 良好的维护 - 持续更新
• 很好的支持 - 帮助中心

WYSIWYG HTML Editor

​​

演示

• 基本演示: https://www.froala.com/wysiwyg-editor
• 在线演示: https://www.froala.com/wysiwyg-editor/inline
• 完整列表: https://www.froala.com/wysiwyg-editor/examples
  ​

开始使用

初始化编辑器

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

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

显示编辑内容

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

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

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

举个栗子

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

HTML

  
Click here to edit the content
  
![](/assets/editor/docs/photo14.jpg)
  
The image can be dragged only between blocks and not inside them.

JAVASCRIPT

效果图如下所示。

WYSIWYG HTML Editor

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

相关下载

• npm: npm install froala-editor
• bower: bower install froala-wysiwyg-editor
• CDN: https://cdnjs.com/libraries/froala-editor
• Angular JS: https://github.com/froala/angular-froala
• Angular 2: https://github.com/froala/angular2-froala-wysiwyg
• Aurelia: https://github.com/froala/aurelia-froala-editor
• CakePHP: https://github.com/froala/wysiwyg-cake
• Django: https://github.com/froala/django-froala-editor
• Ember: https://github.com/froala/ember-froala-editor
• Knockout: https://github.com/froala/knockout-froala
• Meteor: https://github.com/froala/meteor-froala
• Ruby on Rails: https://github.com/froala/wysiwyg-rails
• React JS: https://github.com/froala/react-froala-wysiwyg/
• Reactive: https://github.com/froala/froala-reactive
• Symfony: https://github.com/froala/KMSFroalaEditorBundle
• Vue JS: https://github.com/froala/vue-froala-wysiwyg/
• Yii2: https://github.com/froala/yii2-froala-editor
• Wordpress: https://github.com/froala/wordpress-froala-wysiwyg
  ​

浏览器支持

我们正在积极测试编辑器在所有主要浏览器兼容性。在下面列出的浏览器中，如有任何问题请当作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+

资源

• 演示： www.froala.com/wysiwyg-editor
• 下载页面：www.froala.com/wysiwyg-editor/download
• 文档： froala.com/wysiwyg-editor/docs
• 授权协议： www.froala.com/wysiwyg-editor/terms
• 帮助： wysiwyg-editor.froala.help
• 问题：Repo guidelines
  ​

问题报告

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

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

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

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

技术支持或问题

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

许可

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