閱讀(7.9k) 書簽贊(0) 我要糾錯

六：集成編輯器

2018-02-24 15:58 更新

原文出處：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\redactor\RedactorModule',
        'user' => [
            // here is the config for user
        ],
    ],

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

配置好之后，我們來將我們原先發(fā)表狀態(tài)的textarea替換成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?，就可以看到類似下面的可愛頁面了：

替代文字

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

替代文字

由于Redactor提交的是HTML格式的文本(一般富文本編輯器應(yīng)該也是這樣)。所以我們會看到有<p></p>這個標(biāo)簽。

實現(xiàn)圖片上傳

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

'modules' => [
        'redactor' => [
            'class' => 'yii\redactor\RedactorModule',
            'imageAllowExtensions'=>['jpg','png','gif']
        ],

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

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

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