Yii2博客实战教程——富文本编辑器redactor的使用

本篇我们继续博客后台功能的设计，既然是博客那必不可少的需要所见即所得wysiwyg编辑器。常用的有ckeditor、ueditor、kindeditor等等。最近发现了一个redactor非常好用，而且可以和yii2无缝整合，简直不能喜欢更多，所以接下来我们讲讲如何在项目中使用redactor。

官方git是https://github.com/yiidoc/yii2-redactor里面也有官方的英文版本的安装步骤可以供大家参考。

1.使用composer安装

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

2.在backend/config/main中修改添加redactor模块

'modules' => [
        'redactor' => 'yii\redactor\RedactorModule',
    ],

3.在post的view中修改输入框使用redactor小部件

<?= $form->field($model, 'content')->widget(\yii\redactor\widgets\Redactor::className(), [
        'clientOptions' => [ 
            'lang' => 'zh_cn',
            'plugins' => ['fontcolor','imagemanager']
        ]
    ])?>

其中plugins是插件，可以从官网插件库中查看更多好用的插件https://imperavi.com/redactor/plugins/

这样我们就可以使用redactor插件了，可是细心的同学可能会发现上传图片和文件的时候会有问题，我们继续配置使图片上传功能能够使用。

修改backend/config/main中redactor模块，添加上传文件路径，上传文件浏览的域名前缀。由于图片需要在前台后台都能访问，所以我们在blog项目的根目录下新建files文件夹用来访问上传的文件。同时在apache中给files配置一个虚拟目录和独立域名http://static.yii2blog.com这样我们就可以通过独立的域名访问静态资源。方便项目回头做cdn等等处理。

'redactor' => [
            'class' => 'yii\redactor\RedactorModule',
            'uploadDir' => __DIR__ .'/../../files',
            'uploadUrl' => 'http://static.yii2blog.com',
            'imageAllowExtensions'=>['jpg','png','gif'],
        ],

这样在回去上传下文件试试，图片就乖乖出现了~~~~