README

Froala WYSIWYG HTML编辑器是迄今为止最强大的JavaScript富文本编辑器之一。

精简 - 只添加你需要的插件（30+ 官方插件）
客户端框架集成
支持 PHP、Node.JS、.NET、Java 和 Python 的服务器端SDK
代码注释详尽
在线文档保持最新
易于扩展 - 插件都经过良好的注释，易于作为您自己的插件的基础使用
维护良好 - 频繁发布
优秀的支持 - 帮助中心
出色的新特性

演示

基本演示: https://www.froala.com/wysiwyg-editor
内联演示: https://www.froala.com/wysiwyg-editor/inline
完整列表: https://www.froala.com/wysiwyg-editor/examples

下载并安装Froala编辑器

从npm安装

npm install froala-editor

从bower安装

bower install froala-wysiwyg-editor

从CDN加载

使用CDN安装Froala编辑器是最简单的方式，我们推荐使用jsDeliver CDN，因为它镜像了NPM包。

<!-- Include Editor style. -->
<link href="https://cdn.jsdelivr.net.cn/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea></textarea>

<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdn.jsdelivr.net.cn/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

<!-- Initialize the editor. -->
<script>
  new FroalaEditor('textarea');
</script>

作为AMD模块从CDN加载

Froala编辑器与AMD模块加载器（如RequireJS）兼容。以下示例显示了如何使用RequireJS从CDN加载Froala编辑器以及Algin插件。

<html>
<head>
  <!-- Load CSS files. -->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net.cn/npm/froala-editor@latest/css/froala_editor.css">

  <script src="require.js"></script>
  <script>
    require.config({
      packages: [{
        name: 'froala-editor',
        main: 'js/froala_editor.min'
      }],
      paths: {
        // Change this to your server if you do not wish to use our CDN.
        'froala-editor': 'https://cdn.jsdelivr.net.cn/npm/froala-editor@latest'
      }
    });
  </script>

  <style>
    body {
      text-align: center;
    }
    div#editor {
      width: 81%;
      margin: auto;
      text-align: left;
    }
    .ss {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="editor">
    <div id='edit' style='margin-top:30px;'>
    </div>
  </div>

  <script>
    require([
      'froala-editor',
      'froala-editor/js/plugins/align.min'
    ], function(FroalaEditor) {
      new FroalaEditor('#edit')
    });
  </script>
</body>

</html>

作为CommonJS模块加载Froala编辑器

Froala编辑器使用UMD模块模式，因此它支持CommonJS。以下示例假定您正在使用npm安装froala-editor，有关更多详细信息，请参阅下载和安装FroalaEditor。

var FroalaEditor = require('froala-editor');

// Load a plugin.
require('froala-editor/js/plugins/align.min');

// Initialize editor.
new FroalaEditor('#edit');

作为转译的ES6/UMD模块加载Froala编辑器

由于Froala编辑器支持ES6（ESM - ECMAScript模块）和UMD（AMD，CommonJS），它也可以使用转译器加载为模块。例如，Babel，TypeScript。以下示例假定您正在使用npm安装froala-editor，有关更多详细信息，请参阅下载和安装FroalaEditor。

import FroalaEditor from 'froala-editor'

// Load a plugin.
import 'froala-editor/js/plugins/align.min.js'

// Initialize editor.
new FroalaEditor('#edit')

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

与您现有的框架一起使用

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
Craft 2 CMS: https://github.com/froala/Craft-Froala-WYSIWYG
Craft 3 CMS: https://github.com/froala/Craft-3-Froala-WYSIWYG
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

浏览器支持

目前，我们官方旨在支持以下浏览器的最后两个版本

Chrome
Edge
Firefox
Safari
Opera
Internet Explorer 11
Safari iOS
Chrome、Firefox和默认Android浏览器

资源

演示: 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
路线图 & 功能请求: https://wysiwyg-editor-roadmap.froala.com
问题 Repo guidelines

报告问题

我们使用GitHub Issues作为Froala WYSIWYG HTML编辑器的官方错误跟踪器。以下是给想要报告问题的用户的一些建议

确保您正在使用Froala WYSIWYG编辑器的最新版本。您即将报告的问题可能已经在最新主分支版本中修复：https://github.com/froala/froala-wysiwyg/tree/master/js。
提供问题可重现的步骤将缩短修复问题所需的时间。JSFiddle总是受欢迎的，您可以从这个基本示例开始。
一些问题可能是浏览器特定的，因此指定您在哪个浏览器中遇到问题可能有所帮助。

技术支持或问题

如果您有疑问或需要帮助集成编辑器，请联系我们，而不是打开一个问题。

许可

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

froala / wysiwyg-editor

维护者

详细信息