YII2 Series Tutorial VI: Integration Editor

In the previous article we implemented a simple user rights management, as far as the more advanced RBAC, I will post a separate article to say. In this article, I mainly want to write the integration of an editor in Yii2, because in our actual development, a simple textarea generally do not meet our needs, because we need a variety of text styles such as title, form, And many times we need to insert images and videos into these texts. and the best solution for these problems is to integrate an editor, since everyone (not the programmer) likes what you see and what you get, so here I'm mostly demonstrating how to integrate the WYSIWYG Rich text editor.

Redactor

Since it is an integrated Rich text editor, we first have to find a favorite and functional editor, and in my case, I chose redactor this editor, not only because Redactor has the official YII2 plugin package, It is also a beautiful and can provide you with powerful features of the editor, in my personal experience, this editor gives me the best feeling.

Installing Redactor

Since the decision to use redactor, we first have to do is to install redactor, said above, YII2 has the official plug-in package, and also provides the composer installation method (I like this kind of),

Can look here: https://github.com/yiidoc/yii2-redactor

So we can install redactor by the following command:

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

After a while, you're about to see a similar message like this:

  - Installing yiidoc/yii2-redactor (2.0.1)    lock fileGenerating autoload files

Here you can see the plug-in provided by Redactor to Yii2 the current version is 2.0.1. After the installation, we need to do some simple configuration, or as before, come to config/web.php :

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

We add a modules line directly here ‘redactor‘ => ‘yii\redactor\RedactorModule‘, , so we can simply implement the rich text editor functionality provided by Redactor.

Once configured, let's replace our original post status with textarea Redactor's rich Text edit box and come to our views/status/_form.php file:

<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()) ?>

Remove the original $form->field($model, ‘message‘)->textarea([‘rows‘ => 6]) comment and replace it with the redactor text box configuration.

Then we visit: http://localhost:8999/status/create , you can see a lovely page similar to the following:

Yes, with just a few lines of code, we've integrated the rich text editor into our application. Let's try to create a state to try:

Since redactor is submitting HTML-formatted text (the general rich-text editor should do the same). So we'll see there's <p></p> this tag.

Implement image upload

The redactor configuration above does not correctly use the ability to upload images and manage images, so let's implement them here. First we need to web/ create a directory under the directory uploads/ , this is the redactor default upload image storage directory, and then we need to modify the config/web.php file redactor configuration:

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

We specify the type of upload image here, only support the demo jpg , png and gif these three kinds, and finally in the views/status/_form.php corresponding settings:

 <?=  $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 ', Span class= "hljs-string" > ' FontColor ',  ' Imagemanager ']]) ?>             

We have added some here clientOptions , I have configured the image management and upload, file upload, display language, and some small plug-ins: Font color, font background color and so on. Images and files are uploaded using the official default upload configuration, more configuration and documentation you can look at here:

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

Tips: Always keep an eye on GitHub documentation updates

And then we'll visit: Try http://localhost:8999/status/create uploading a picture to try it:

This picture is I a few days ago to the Phoenix wave when the phone shot, and then we click on the publication, we can see the content of our status, but here is also the HTML format text.

Finally, you can check your web/uploads/directory to see if the image is uploaded correctly. For more information on the security configuration of uploading pictures and files, you can look at this article:

How to Setup Secure Media uploads

Write down all the way, really feel redactor very handy, so I still recommend everyone in the YII2 project to integrate this rich text editor, because Yan value and function are very awesome!

YII2 Series Tutorial VI: Integration Editor