国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Yii2系列教程六：集成編輯器

xiaochao / 2133人閱讀

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

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

首先，很慚愧的是，前幾天都出去外面玩了，沒有及時更新教程，實在是太愧疚了，所以回來之后還是好好寫完這個系列教程吧。

上一篇文章我們實現(xiàn)了簡單的用戶權(quán)限管理，至于更先進(jìn)的RBAC，我后面會多帶帶出一篇文章來說說。在這一篇文章當(dāng)中，我主要想寫的是在Yii2中集成一個編輯器，因為在我們的實際開發(fā)當(dāng)中，一個簡單的textarea一般都是不能滿足我們的需求的，因為我們需要多種多樣的文本樣式如標(biāo)題，表格啦，并且很多時候我們在這些文本當(dāng)中還需要插入圖片和視頻。而這些問題目前的最好解決方案就是集成一個編輯器，鑒于大家(這里不是指程序員)都是喜歡所見即所得，所以，這里我主要是演示怎么集成所見即所得的富文本編輯器。

Redactor

既然是集成富文本編輯器，我們首先得找一個喜歡并且功能還不錯的編輯器，而在我這里，我選擇了Redactor這個編輯器，這不僅是因為Redactor有官方的Yii2插件package，它還是一款在保存美觀的同時又能給你提供強大功能的編輯器，在我個人的使用體驗來說，這個編輯器給我的感受時最好的。

安裝 Redactor

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

可以看看這里：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。安裝完了之后，我們需要進(jìn)行一些簡單的配置，還是像前面的一樣，來到config/web.php：

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

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

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



    

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

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

然后我們訪問：http://localhost:8999/status/create ，就可以看到類似下面的可愛頁面了：

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

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

這個標(biāo)簽。

實現(xiàn)圖片上傳

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

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

我們這里指定了上傳圖片的類型，演示時只支持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，我這里配置了圖片管理和上傳，文件上傳，顯示語言，和一些小插件：字體顏色，字體背景色等。圖片和文件的上傳都是用的官方默認(rèn)的上傳配置，更多的配置和文檔，你可以看看這里：

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

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

然后我們再來訪問一下： http://localhost:8999/status/create ，試著上傳一張圖片試試：

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

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

How to Setup Secure Media Uploads

一路寫下來，真的是覺得Redactor非常順手，所以我還是很推薦大家在Yii2的項目中集成這個富文本編輯器，因為顏值和功能都很是awesome!

下一節(jié)

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

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

Happy Hacking

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/21059.html

相關(guān)文章

  • Yii2系列教程五：簡單的用戶權(quán)限管理

    摘要：原文來自上一篇文章講了用戶的注冊，驗證和登錄，這一篇文章按照約定來說說之中的用戶和權(quán)限控制。探尋上面的一些列設(shè)置和代碼更改，已經(jīng)實現(xiàn)了一小部分的用戶控制登錄的用戶才能發(fā)表。 原文來自： https://jellybool.com/post/programming-with-yii2-user-access-controls 上一篇文章講了用戶的注冊，驗證和登錄，這一篇文章按照...

    livem 評論0 收藏0

  • Yii2系列教程四：實現(xiàn)用戶注冊，驗證，登錄

    摘要：開始使用郵箱配置好了之后，我們就可以開始使用了，首先我們來修改一下我們的導(dǎo)航欄，因為我們想實現(xiàn)的就是我們常常看到的在導(dǎo)航欄的右側(cè)的注冊和登錄按鈕。 原文來自： https://jellybool.com/post/programming-with-yii2-integrating-user-regi... 本來打算昨晚寫的這篇教程，但是忙著約會去了，所以現(xiàn)在補上吧。 上一篇...

    boredream 評論0 收藏0

  • Yii2系列教程二：MVC Forms 和 Layouts

    摘要：而且很明顯地，我們可以看到，一旦輸入框在失去焦點的時候，如果里面沒有輸入任何內(nèi)容，每個輸入框就會有相應(yīng)的錯誤提示，用戶體驗很不錯。 原文來自： https://jellybool.com/post/programming-with-yii2-exploring-mvc-forms-a... 上一篇文章我們簡單地實現(xiàn)了Yii2框架安裝和Hello World，而在這一篇文章當(dāng)中...

    ThreeWords 評論0 收藏0

  • Yii2系列教程三：Database And Gii

    摘要：但是這還沒有完，因為我們還需要對我們的做一些些小改動，主要是在的改動在這里，我們添加下面這兩行來保障我們在插入數(shù)據(jù)的時候，和不為空。 原文來自：https://jellybool.com/post/programming-with-yii2-working-with-the-data... 上一篇文章我們理了一下Yii2的MVC，F(xiàn)orms和Layouts，這篇文章就直接按照...

    wemallshop 評論0 收藏0

發(fā)表評論

0條評論

xiaochao

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<