本文翻譯來自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編輯器，您必須根據需求購買以下許可證之一。 您可以在我們的網站上的定價計劃頁面找到更多信息。

總結

以上是生活随笔為你收集整理的所见即所得html5编辑器,一个漂亮的所见即所得(WYSIWYG)富文本编辑器:Froala的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。