Yii框架安装Redactor富文本编辑器

2016-09-22 · 🙈Ray · 0条 · 423次

博客后台需要使用富文本编辑器,我之前使用的是百度的UEditor,但总觉得UEditor的UI设计有点老,也不够简洁。UEditor有一点比较好的就是功能很全面。所以说,这个世界上并没有什么完美的东西,有利则有弊,取何利,留何弊,就要看个人取舍了。

为了挑选一款合适的编辑器,我也花了不少的功夫去比较,发现Redactor和WangEditor的界面比较符合我的审美。MarkDown也不错(添加于2016/10/28)。但是因为我用的Yii框架,WangEditor没有现成的扩展安装包,也就选择了Redactor。MarkDown使用起来稍微麻烦一些。

2018-05-07更新:有开发人员已经在Github上发布了WangEditor的Yii2的扩展安装包,yii2-wangEditor-widget项目地址

项目地址:https://github.com/yiidoc/yii2-redactor

Redactor官网:Redactor

这里介绍一下如何安装及配置Redactor:

1.安装

运行 composer require --prefer-dist yiidoc/yii2-redactor "*" 等待安装成功即可。这种安装方式是在composer配置成全局的情况下,如果没有,则使用php composer.phar require --prefer-dist yiidoc/yii2-redactor "*" .

2.配置

在Yii框架的配置文件夹config中的web.php中添加如下配置:

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

3.使用

如果使用Yii提供的ActiveField,则使用

<?= $form->field($article, 'content')->widget(\yii\redactor\widgets\Redactor::className()) ?>

否则使用

<?= \yii\redactor\widgets\Redactor::widget([ 'model' => $model, 'attribute' => 'content' ]) ?>

4.更多配置项

<?= $form->field($article, 'content')->widget(\yii\redactor\widgets\Redactor::className(),[
'clientOptions' => [
'minHeight' => '300px',
'lang' => 'zh_cn',
'plugins' => ['clips', 'counter', 'definedlinks', 'filemanager', 'fontcolor', 'fontfamily', 'fontsize', 'fullscreen', 'imagemanager', 'limiter', 'table', 'textdirection', 'textexpander', 'video']
]
]) ?>

minHeight是设置最小宽度,lang是配置语言,plugins是配置扩展功能,在安装好后的扩展中,找到文件夹yii2-redactor/assets,其中lang文件夹中包含支持的语言,plugins文件夹中包含支持的功能,选择想要的名字写入到上面的配置中即可。

5.上传路径

Redactor默认的上传路径是www目录下的uploads文件夹,我尝试了从其他教程找到的配置方法,并不好用,上传地址并没有发生改变,所以我就直接改了源码。

在vendor/yiidoc/yii2-redactor文件夹下有个RedactorModule.php文件,这个文件是主文件,指定了很多信息,其中就包括文件/图片上传地址。

public $uploadDir = '@webroot/images/article_imgs';
public $uploadUrl = '@web/images/article_imgs';

我把这两个参数改成这样,意思是上传文件夹是/www/images/article_imgs.第二行的 $uploadUrl 指定了文件访问地址。

public function getOwnerPath()
{
return date('Ymd');
// return Yii::$app->user->isGuest ? 'guest' : Yii::$app->user->id;
}

我把这个方法原来的内容给注释掉,改为return date('Ymd'); 这个方法是存储长传文件的具体文件夹名称,也就是在上面指定的路径下还有一个文件夹,图片/文件会存在这个指定的文件夹下。他原来的返回是判定用户是否登录,如果登录则返回用户ID,否则返回guest。按照原来的值,会在@webroot/images/article_imgs创建对应ID的文件夹来存放该用户上传的文件/图片。例如:15号用户上传的图片都会存在@webroot/images/article_imgs/15下面。

这样会有一个问题,如果一个用户存了很多东西,这个文件夹下内容会很多。而且用ID我总感觉不妙。(内容太多不利于检索)

于是,我就改为了return date('Ymd'); 这样,不同天发布的东西就会存在不同的文件夹下,文件夹的名字是文件/图片上传的日期。如我2016年10月28号上传了图片,那么这张图片会存在@webroot/images/article_imgs/20161028文件夹下。这也是根据UEditor来修改的,百度的这款编辑器就是按照日期来归类,而不是用户,我感觉这样反倒更好一点。

因为我觉得一天内可以上传的东西是有限制的,不会无穷大。但是用户就不一样了,我们可以假设这个用户会一直存在,且会经常性发布内容。

当然,你也可以根据自己的需要设置更详细的目录,如在日期下再添加用户。


  0