How to Program With Yii2: Rich Text Input With Redactor

Final product image
What You'll Be Creating

If you're asking, "What's Yii?" check out my earlier tutorial: Introduction to the Yii Framework, which reviews the benefits of Yii and includes an overview of what's new in Yii 2.0, released in October 2014.

In this Programming With Yii2 series, I'm guiding readers in use of the newly upgraded Yii2 Framework for PHP. In this tutorial, I'm going to introduce you to using the rich text editor Redactor within the Yii Framework.

For these examples, we'll continue to imagine we're building a framework for posting simple status updates, e.g. our own mini-Twitter.

Just a reminder, I do participate in the comment threads below. I'm especially interested if you have different approaches or additional ideas, or if you want to suggest topics for future tutorials.

What Is Redactor?

Redactor is a powerful rich text editor created by Imperavi. It has an extremely clean and fast user interface, while also providing a platform for powerful extensions. It offers a JQuery API and has a wide set of plugins such as for image management, table formatting, and fullscreen editing.

Fortunately, the Yii community purchased an unlimited license to Redactor for any application built on the framework. With Yii2, you can install Redactor and integrate rich text editing into your forms in just a few minutes.

You might also take a look at the tutorial I've written on Squire, an alternative, more lightweight rich text editor, which can also be integrated with Yii. 

Installing Redactor

We'll begin by installing a Yii2 extension for Redactor (yii2-redactor) using composer:

In our web/config.php file, we'll add the module definition for Redactor:

Using Redactor on Our Forms

Let's replace the standard text input field with Redactor. Here's the plain text form:

Standard Textarea Input form

When we change the standard textarea to use the Yii2 Redactor widget in views/status/_form.php:

It's transformed into this:

Status Form With Redactor

Redactor submits HTML. So, when you submit the form, you'll see the HTML generated by what we typed and formatted:

The HTML for the message generated and submitted by Redactor

Adding Image Support to Redactor

To add support for uploading images, we need to create a /web/uploads directory in our tree. Then, we need to modify the module definition for Redactor in /config/web.php:

Then we add an imageUpload option to the Redactor widget:

I also found that the plugin did not properly set the uploadUrl at this time. So I manually edited /vendor/yiidoc/yii2-redactor/models/RedactorModule.php to set the uploadUrl here:

I've reported this to the plugin developer. 

Note: It's best to fork the plugin from GitHub and place it in your own code tree before you make changes. 

With this change, you'll see an image icon in the Redactor toolbar:

Image icon in the Redactor toolbar

Clicking it brings up this file upload dialog:

Insert image file upload dialog box

Here's what it looks like with an uploaded image:

Redactor with the image in place at the top

The photo is from a sunrise I was fortunate to witness in Chenai, India, in early 2014.

When you submit the status with the image, it appears as HTML in the record:

Resulting HTML with img tag to uploaded image

The plugin developer wisely recommends that you secure your image uploads directory before you host a project with this capability: How to Setup Secure Media Uploads.

I've found that Redactor is an incredibly robust and polished rich text option for my web applications. I hope you enjoy using it.

What's Next?

Watch for upcoming tutorials in our Programming With Yii2 series as we continue diving into different aspects of the framework. You may also want to check out our Building Your Startup With PHP series, which is using Yii2's advanced template as we build a real world application.

I welcome feature and topic requests. You can post them in the comments below or email me at my Lookahead Consulting website.

If you'd like to know when the next Yii2 tutorial arrives, follow me @reifman on Twitter or check my instructor page. My instructor page will include all the articles from this series as soon as they are published. 

Related Links

Tags:

Comments

Related Articles