本文翻譯來自wysiwyg-editor，大家想看原文可以點(diǎn)擊此鏈接。
介紹
WYSIWYG HTML編輯器是一款有史以來最強(qiáng)大的JavaScript富文本編輯器之一。它采用了最新的技術(shù)，并利用jQuery和HTML5的巨大優(yōu)勢(shì)，創(chuàng)造了出色的編輯體驗(yàn)。擁有非常多的示例讓你輕松集成，讓你的用戶愛上它清晰的設(shè)計(jì)。它能和Ruby On Rails，Django，Angular.js，Meteor，Symgony.CakePHP等集成，具有如下特點(diǎn)。
- 微小 - 只需添加您需要的插件(30+ 官方插件)
- 客戶端框架集成
- 可以向如 PHP, Node.JS, .NET, Java, 和 Python提供服務(wù)端開發(fā)工具包
- 代碼注釋精美
- 在線文檔更新
- 簡(jiǎn)單可擴(kuò)展- 良好的插件注釋使你更容易使用和開發(fā)自己的插件
- 良好的維護(hù) - 持續(xù)更新
- 很好的支持 - 幫助中心
??
演示
- 基本演示: https://www.froala.com/wysiwyg-editor
- 在線演示: https://www.froala.com/wysiwyg-editor/inline
-
完整列表: https://www.froala.com/wysiwyg-editor/examples
?
開始使用
初始化編輯器
Froala WYSIWYG HTML編輯器是一個(gè)易于集成和易于使用的插件。它需要jQuery 1.11.0或更高版本，以及名為Font Awesome 4.4.0的圖標(biāo)字體。你也可以使用舊版本的Font Awesome，但是某些編輯器的圖標(biāo)將不會(huì)出現(xiàn)。
下面是如何在textarea上初始化編輯器的基本示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Include external CSS. -->
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" >
<!-- Include Editor style. -->
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea></textarea>
<!-- Include external JS libs. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.0/js/froala_editor.pkgd.min.js"></script>
<!-- Initialize the editor. -->
<script>
$(function() {
$('textarea').froalaEditor()
});
</script>
</body>
</html>
顯示編輯內(nèi)容
要在富文本編輯器之外保留編輯過的HTML的樣式，你必須引入以下CSS文件。
<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />
此外，你應(yīng)該確保將編輯的內(nèi)容放在類名為fr-view元素中。
<div class="fr-view">
Here comes the HTML edited with the Froala rich text editor.
</div>
舉個(gè)栗子
在此富文本編輯器中，你可以在塊級(jí)元素之間隨意拖動(dòng)圖片，具體代碼如下。
HTML
<div id="froala-editor">
<h3>Click here to edit the content</h3>
<p></p>
<p>The image can be dragged only between blocks and not inside them.</p>
</div>
JAVASCRIPT
<script>
$(function() {
$('div#froala-editor').froalaEditor({
dragInline: false,
toolbarButtons: ['bold', 'italic', 'underline', 'insertImage', 'insertLink', 'undo', 'redo'],
pluginsEnabled: ['image', 'link', 'draggable']
})
});
</script>
效果圖如下所示。
有關(guān)自定義編輯器的詳細(xì)信息，請(qǐng)查看編輯器文檔。
???
相關(guān)下載
- 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
?
瀏覽器支持
我們正在積極測(cè)試編輯器在所有主要瀏覽器兼容性。在下面列出的瀏覽器中，如有任何問題請(qǐng)當(dāng)作bug反饋到我們的GitHub庫(kù)。
- 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
- 下載頁(yè)面：www.froala.com/wysiwyg-editor/download
- 文檔： froala.com/wysiwyg-editor/docs
- 授權(quán)協(xié)議： www.froala.com/wysiwyg-editor/terms
- 幫助： wysiwyg-editor.froala.help
- 問題：Repo guidelines
?
問題報(bào)告
我們使用GitHub中的問題作為Froala WYSIWYG HTML編輯器的官方錯(cuò)誤跟蹤器，以下是我們希望報(bào)告問題的用戶的一些建議：
確保您使用的是最新版本的Froala WYSIWYG Editor。 您即將報(bào)告的問題可能已在最新的主分支版本中已經(jīng)修復(fù)：https：//github.com/froala/froala-wysiwyg/tree/master/js。
為問題提供可復(fù)寫的步驟將會(huì)縮短解決時(shí)間。JSFiddle總是受歡迎的。
某些問題可能是瀏覽器特定的，因此在您遇到問題中指定瀏覽器可能會(huì)有所幫助。
技術(shù)支持或問題
如果您有任何問題或需要幫助，請(qǐng)與我們聯(lián)系。
許可
為了使用Froala編輯器，您必須根據(jù)需求購(gòu)買以下許可證之一。 您可以在我們的網(wǎng)站上的定價(jià)計(jì)劃頁(yè)面找到更多信息。
