摘要：而這些問(wèn)題目前的最好解決方案就是集成一個(gè)編輯器，鑒于大家這里不是指程序員都是喜歡所見(jiàn)即所得，所以，這里我主要是演示怎么集成所見(jiàn)即所得的富文本編輯器。

  
原文來(lái)自： https://jellybool.com/post/programming-with-yii2-rich-text-input-with-redactor

首先，很慚愧的是，前幾天都出去外面玩了，沒(méi)有及時(shí)更新教程，實(shí)在是太愧疚了，所以回來(lái)之后還是好好寫(xiě)完這個(gè)系列教程吧。

上一篇文章我們實(shí)現(xiàn)了簡(jiǎn)單的用戶(hù)權(quán)限管理，至于更先進(jìn)的RBAC，我后面會(huì)多帶帶出一篇文章來(lái)說(shuō)說(shuō)。在這一篇文章當(dāng)中，我主要想寫(xiě)的是在Yii2中集成一個(gè)編輯器，因?yàn)樵谖覀兊膶?shí)際開(kāi)發(fā)當(dāng)中，一個(gè)簡(jiǎn)單的textarea一般都是不能滿(mǎn)足我們的需求的，因?yàn)槲覀冃枰喾N多樣的文本樣式如標(biāo)題，表格啦，并且很多時(shí)候我們?cè)谶@些文本當(dāng)中還需要插入圖片和視頻。而這些問(wèn)題目前的最好解決方案就是集成一個(gè)編輯器，鑒于大家(這里不是指程序員)都是喜歡所見(jiàn)即所得，所以，這里我主要是演示怎么集成所見(jiàn)即所得的富文本編輯器。

既然是集成富文本編輯器，我們首先得找一個(gè)喜歡并且功能還不錯(cuò)的編輯器，而在我這里，我選擇了Redactor這個(gè)編輯器，這不僅是因?yàn)镽edactor有官方的Yii2插件package，它還是一款在保存美觀的同時(shí)又能給你提供強(qiáng)大功能的編輯器，在我個(gè)人的使用體驗(yàn)來(lái)說(shuō)，這個(gè)編輯器給我的感受時(shí)最好的。

既然決定使用Redactor，我們首先要做就是來(lái)安裝Redactor了，上面說(shuō)過(guò)的，Yii2有官方的插件package，并且還提供了composer的安裝方式(我最喜歡這種了)，

可以看看這里：https://github.com/yiidoc/yii2-redactor

所以我們可以通過(guò)下面的命令來(lái)安裝Redactor：

composer require --prefer-dist yiidoc/yii2-redactor "*"

坐等一會(huì)之后，你即將看到下面的類(lèi)似信息：

  - Installing yiidoc/yii2-redactor (2.0.1)
    Downloading: 100%

Writing lock file
Generating autoload files

在這里可以看到Redactor給Yii2提供的插件目前的最新版是2.0.1。安裝完了之后，我們需要進(jìn)行一些簡(jiǎn)單的配置，還是像前面的一樣，來(lái)到config/web.php：

"modules" => [
        "redactor" => "yii
edactorRedactorModule",
        "user" => [
            // here is the config for user
        ],
    ],

我們直接在modules這里加上一行"redactor" => "yii edactorRedactorModule",，這樣就可以簡(jiǎn)單的實(shí)現(xiàn)Redactor提供的富文本編輯器功能了。

配置好之后，我們來(lái)將我們?cè)劝l(fā)表狀態(tài)的textarea替換成Redactor的富文本編輯框，來(lái)到我們的views/status/_form.php文件中：

    

    
    field($model, "message")->widget(yii
edactorwidgetsRedactor::className()) ?>

將原來(lái)的$form->field($model, "message")->textarea(["rows" => 6])注釋掉，然后替換成Redactor的文本框配置。

然后我們?cè)L問(wèn)：http://localhost:8999/status/create ，就可以看到類(lèi)似下面的可愛(ài)頁(yè)面了：

沒(méi)錯(cuò)，就是這么幾行代碼，我們就把富文本編輯器集成到我們的應(yīng)用當(dāng)中了。我們來(lái)試著創(chuàng)建一條狀態(tài)試試：

由于Redactor提交的是HTML格式的文本(一般富文本編輯器應(yīng)該也是這樣)。所以我們會(huì)看到有

上面的Redactor配置還不能正確地使用上傳圖片和管理圖片的功能，那么我們這里就來(lái)實(shí)現(xiàn)一下。首先我們需要在web/目錄下創(chuàng)建一個(gè)uploads/目錄，這是Redactor默認(rèn)的上傳圖片的存放目錄；然后我們還需要修改一下config/web.php這個(gè)文件中的Redactor的配置：

"modules" => [
        "redactor" => [
            "class" => "yii
edactorRedactorModule",
            "imageAllowExtensions"=>["jpg","png","gif"]
        ],

我們這里指定了上傳圖片的類(lèi)型，演示時(shí)只支持jpg，png 和gif這三種，最后在views/status/_form.php中進(jìn)行相應(yīng)的設(shè)置：

 field($model, "message")->widget(yii
edactorwidgetsRedactor::className(),
        [
            "clientOptions" => [
                "imageManagerJson" => ["/redactor/upload/image-json"],
                "imageUpload" => ["/redactor/upload/image"],
                "fileUpload" => ["/redactor/upload/file"],
                "lang" => "zh_cn",
                "plugins" => ["clips", "fontcolor","imagemanager"]
            ]
        ]
        ) ?>

我們這里加入了一些clientOptions，我這里配置了圖片管理和上傳，文件上傳，顯示語(yǔ)言，和一些小插件：字體顏色，字體背景色等。圖片和文件的上傳都是用的官方默認(rèn)的上傳配置，更多的配置和文檔，你可以看看這里：

https://github.com/yiidoc/yii2-redactor

  
tips: 時(shí)常關(guān)注Github上的文檔更新唄

然后我們?cè)賮?lái)訪問(wèn)一下： http://localhost:8999/status/create ，試著上傳一張圖片試試：

這張圖片是本人前幾天去鳳凰浪的時(shí)候拿手機(jī)拍的，然后我們點(diǎn)擊發(fā)表，又可以看到我們的status的內(nèi)容了，不過(guò)這里還是HTML格式的文本。

最后可以查看一下你的web/uploads/目錄，看看圖片是不是正確上傳了。關(guān)于更多的上傳圖片和文件的安全配置信息，你可以看看這篇文章：

How to Setup Secure Media Uploads

一路寫(xiě)下來(lái)，真的是覺(jué)得Redactor非常順手，所以我還是很推薦大家在Yii2的項(xiàng)目中集成這個(gè)富文本編輯器，因?yàn)轭佒岛凸δ芏己苁莂wesome!

我們的基本流程全部實(shí)現(xiàn)之后，下一節(jié)之后的教程，我會(huì)更注重講解Yii2的一些特性如：Behaviors Validations等。

最后，源碼會(huì)放在 Github：https://github.com/JellyBool/helloYii

Happy Hacking