> 原文出處：https://jellybool.com/post/programming-with-yii2-rich-text-input-with-redactor
首先，很慚愧的是，前幾天都出去外面玩了，沒有及時更新教程，實在是太愧疚了，所以回來之后還是好好寫完這個系列教程吧。
上一篇文章我們實現了簡單的用戶權限管理，至于更先進的RBAC，我后面會單獨出一篇文章來說說。在這一篇文章當中，我主要想寫的是在Yii2中集成一個編輯器，因為在我們的實際開發當中，一個簡單的textarea一般都是不能滿足我們的需求的，因為我們需要多種多樣的文本樣式如標題，表格啦，并且很多時候我們在這些文本當中還需要插入圖片和視頻。而這些問題目前的最好解決方案就是集成一個編輯器，鑒于大家(這里不是指程序員)都是喜歡所見即所得，所以，這里我主要是演示怎么集成所見即所得的富文本編輯器。
## Redactor
既然是集成富文本編輯器，我們首先得找一個喜歡并且功能還不錯的編輯器，而在我這里，我選擇了[Redactor](http://imperavi.com/redactor/)這個編輯器，這不僅是因為[Redactor](http://imperavi.com/redactor/)有官方的Yii2插件package，它還是一款在保存美觀的同時又能給你提供強大功能的編輯器，在我個人的使用體驗來說，這個編輯器給我的感受時最好的。
## 安裝 Redactor
既然決定使用[Redactor](http://imperavi.com/redactor/)，我們首先要做就是來安裝[Redactor](http://imperavi.com/redactor/)了，上面說過的，Yii2有官方的插件package，并且還提供了composer的安裝方式(我最喜歡這種了)，
可以看看這里：[https://github.com/yiidoc/yii2-redactor](https://github.com/yiidoc/yii2-redactor)
所以我們可以通過下面的命令來安裝Redactor：
~~~
composer require --prefer-dist yiidoc/yii2-redactor "*"
~~~
坐等一會之后，你即將看到下面的類似信息：
~~~
- Installing yiidoc/yii2-redactor (2.0.1)
Downloading: 100%
Writing lock file
Generating autoload files
~~~
在這里可以看到Redactor給Yii2提供的插件目前的最新版是2.0.1。安裝完了之后，我們需要進行一些簡單的配置，還是像前面的一樣，來到`config/web.php`：
~~~
'modules' => [
'redactor' => 'yii\redactor\RedactorModule',
'user' => [
// here is the config for user
],
],
~~~
我們直接在`modules`這里加上一行`'redactor' => 'yii\redactor\RedactorModule',`，這樣就可以簡單的實現[Redactor](http://imperavi.com/redactor/)提供的富文本編輯器功能了。
配置好之后，我們來將我們原先發表狀態的`textarea`替換成[Redactor](http://imperavi.com/redactor/)的富文本編輯框，來到我們的`views/status/_form.php`文件中：
~~~
<div class="status-form">
<?php $form = ActiveForm::begin(); ?>
<!--
<?//= $form->field($model, 'message')->textarea(['rows' => 6]) ?>
-->
<?= $form->field($model, 'message')->widget(\yii\redactor\widgets\Redactor::className()) ?>
~~~
將原來的`$form->field($model, 'message')->textarea(['rows' => 6])`注釋掉，然后替換成Redactor的文本框配置。
然后我們訪問：`http://localhost:8999/status/create`?，就可以看到類似下面的可愛頁面了：
沒錯，就是這么幾行代碼，我們就把富文本編輯器集成到我們的應用當中了。我們來試著創建一條狀態試試：
由于Redactor提交的是HTML格式的文本(一般富文本編輯器應該也是這樣)。所以我們會看到有`<p></p>`這個標簽。
## 實現圖片上傳
上面的Redactor配置還不能正確地使用上傳圖片和管理圖片的功能，那么我們這里就來實現一下。首先我們需要在`web/`目錄下創建一個`uploads/`目錄，這是Redactor默認的上傳圖片的存放目錄；然后我們還需要修改一下`config/web.php`這個文件中的Redactor的配置：
~~~
'modules' => [
'redactor' => [
'class' => 'yii\redactor\RedactorModule',
'imageAllowExtensions'=>['jpg','png','gif']
],
~~~
我們這里指定了上傳圖片的類型，演示時只支持`jpg`，`png`?和`gif`這三種，最后在`views/status/_form.php`中進行相應的設置：
~~~
<?= $form->field($model, 'message')->widget(\yii\redactor\widgets\Redactor::className(),
[
'clientOptions' => [
'imageManagerJson' => ['/redactor/upload/image-json'],
'imageUpload' => ['/redactor/upload/image'],
'fileUpload' => ['/redactor/upload/file'],
'lang' => 'zh_cn',
'plugins' => ['clips', 'fontcolor','imagemanager']
]
]
) ?>
~~~
我們這里加入了一些`clientOptions`，我這里配置了圖片管理和上傳，文件上傳，顯示語言，和一些小插件：字體顏色，字體背景色等。圖片和文件的上傳都是用的官方默認的上傳配置，更多的配置和文檔，你可以看看這里：
[https://github.com/yiidoc/yii2-redactor](https://github.com/yiidoc/yii2-redactor)
> tips: 時常關注Github上的文檔更新唄
然后我們再來訪問一下：?`http://localhost:8999/status/create`?，試著上傳一張圖片試試：
這張圖片是本人前幾天去鳳凰浪的時候拿手機拍的，然后我們點擊發表，又可以看到我們的status的內容了，不過這里還是HTML格式的文本。
最后可以查看一下你的web/uploads/目錄，看看圖片是不是正確上傳了。關于更多的上傳圖片和文件的安全配置信息，你可以看看這篇文章：
[How to Setup Secure Media Uploads](http://digwp.com/2012/09/secure-media-uploads/)
一路寫下來，真的是覺得[Redactor](http://imperavi.com/redactor/)非常順手，所以我還是很推薦大家在Yii2的項目中集成這個富文本編輯器，因為顏值和功能都很是awesome!
## 下一節
我們的基本流程全部實現之后，下一節之后的教程，我會更注重講解Yii2的一些特性如：Behaviors Validations等。
