Yii2 Redactor集成编辑器

转载 2015年11月20日 09:38:16

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。安装完了之后,我们需要进行一些简单的配置,还是像前面的一样,来到config/web.php

'modules' => [
        'redactor' => 'yii\redactor\RedactorModule',
        'user' => [
            // here is the config for user
        ],
    ],

我们直接在modules这里加上一行'redactor' => 'yii\redactor\RedactorModule',,这样就可以简单的实现Redactor提供的富文本编辑器功能了。

配置好之后,我们来将我们原先发表状态的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 ,就可以看到类似下面的可爱页面了:

没错,就是这么几行代码,我们就把富文本编辑器集成到我们的应用当中了。我们来试着创建一条状态试试:

由于Redactor提交的是HTML格式的文本(一般富文本编辑器应该也是这样)。所以我们会看到有<p></p>这个标签。

实现图片上传

上面的Redactor配置还不能正确地使用上传图片和管理图片的功能,那么我们这里就来实现一下。首先我们需要在web/目录下创建一个uploads/目录,这是Redactor默认的上传图片的存放目录;然后我们还需要修改一下config/web.php这个文件中的Redactor的配置:

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

我们这里指定了上传图片的类型,演示时只支持jpgpng 和gif这三种,最后在views/status/_form.php中进行相应的设置:

 <?= $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,我这里配置了图片管理和上传,文件上传,显示语言,和一些小插件:字体颜色,字体背景色等。图片和文件的上传都是用的官方默认的上传配置,更多的配置和文档,你可以看看这里:

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

tips: 时常关注Github上的文档更新呗

然后我们再来访问一下: http://localhost:8999/status/create ,试着上传一张图片试试:

这张图片是本人前几天去凤凰浪的时候拿手机拍的,然后我们点击发表,又可以看到我们的status的内容了,不过这里还是HTML格式的文本。

最后可以查看一下你的web/uploads/目录,看看图片是不是正确上传了。关于更多的上传图片和文件的安全配置信息,你可以看看这篇文章:

How to Setup Secure Media Uploads

一路写下来,真的是觉得Redactor非常顺手,所以我还是很推荐大家在Yii2的项目中集成这个富文本编辑器,因为颜值和功能都很是awesome!

yii2集成富文本编辑器redactor

yii2集成富文本编辑器redactor
  • m_422744746
  • m_422744746
  • 2016年04月24日 14:03
  • 1014

yii2集成富文本编辑器redactor

yii2集成富文本编辑器redactor
  • m_422744746
  • m_422744746
  • 2016年04月24日 14:03
  • 1014

Yii2中集成Markdown编辑器

身为一个程序员,我们都知道Markdown编辑器在IT网站应用得非常广泛,比如GitHub、SegmentFault、CSDN博客、YiiChina上都可以见到它的身影,因此,下面介绍下怎么在Yii2...
  • ljfrocky
  • ljfrocky
  • 2015年06月06日 21:35
  • 1190

Yii2自定义Widget,百度编辑器

本文抄自yii Framework中文社区,记录在此,方便日后查用 1.把下载好的Ueditor放在 应用/web 目录下 2.在项目应用下创建component目录,分别创建Ueditor....
  • abwxwx
  • abwxwx
  • 2015年11月20日 15:42
  • 1058

yii2搭建完美后台并实现rbac权限控制案例 - 之菜单menu详细教程

前面我们在博文 yii2搭建完美后台并实现rbac权限控制实例教程中完美实现了yii2的后台搭建和rbac权限控制,如果你还没有实现,请先看上文再回来参考本文,因为本文是在上文的基础上进行完善和补...
  • xmlife
  • xmlife
  • 2016年05月20日 23:11
  • 4571

PHP框架Yii系列教程(四):使用Memcache保存会话

1环境准备 安装Memcached服务端: yum -y installmemcached.x86_64   安装PHP-Memcache扩展: yum -y installphp-pecl...
  • dc_726
  • dc_726
  • 2013年04月28日 21:23
  • 11807

yii2项目实战-博客管理平台的搭建

作者:白狼 出处:http://www.manks.top/document/yii2-blog-manage.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置...
  • m_422744746
  • m_422744746
  • 2016年08月13日 12:30
  • 1180

yii2扩展yii2-imagine遇到的问题

最近在使用yii2移植网站时,在缩略图那里卡了两天,几乎搞得想崩溃,但经过我不屈不挠的努力,终于成功搞定!   刚开始一直按照网上的教程,在cmd使用命令行安装,    php composer.ph...
  • panjican
  • panjican
  • 2016年03月09日 19:00
  • 2070

开启YII2折腾之路:玩弄

一、下载下载地址:http://www.yiichina.com/download 我选择“从归档文件安装”,选择“Yii2的基本应用程序模板”。解压下载完成之后得到一个压缩包,解压完成得到一个ba...
  • github_26672553
  • github_26672553
  • 2017年01月15日 09:20
  • 1127

Yii2的异步多线程服务之swoole

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • xiaog351
  • xiaog351
  • 2016年04月16日 15:30
  • 10624
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Yii2 Redactor集成编辑器
举报原因:
原因补充:

(最多只允许输入30个字)