Thứ Sáu, 19 tháng 2, 2016

Hướng dẫn sử dụng ckeditor trong yii2 có upload hình ảnh

Các Yii cộng đồng đã được khao khát khả năng để sử dụng đầy đủ ckeditor, một biên tập WYSIWYG với các tính năng tuyệt vời, nhưng chẳng có ai để phục vụ nhu cầu. Để nói là không có phần mở rộng là thô lỗ. Trên thực tế có rất nhiều người trong số họ, nhưng không ai là hoàn tất.Các dễ nhất tôi có thể nhớ lại trong Yii 1.x là EditME mà sử dụng tải lên tuyệt vời bên ngoài. Nó bật tắt nhiều do khó khăn để tương tác với cơ sở tải lên bên ngoài. Trời cho 2amigos, bây giờ chúng tôi có phiên bản làm việc gần như đầy đủ của nó!
Hướng dẫn sử dụng ckeditor trong yii2 có upload hình ảnh

Bạn có thể nói, tốt, có là RedactorJs cho Yii1 và Bây giờ chúng tôi đã cho Yii2. Tại sao không sử dụng? Câu trả lời rất đơn giản: sở thích! Một số thích X so với Y giống như những người khác thích Y hơn X. Vì vậy, có hỗ trợ Y mạnh không đủ lý lẽ để không có X! Để tránh chiến tranh trên này, chúng ta hãy giả vờ tôi đã không nói điều đó. Vâng, tôi biết điều đó, nhưng chỉ nháy mắt làm ngơ nhìn nó và cho tôi một số không gian để tiếp tục với bài này.
Antonio Ramirez, bây giờ là một thành viên Yii Developers Core và đồng sáng lập của 2amigos đã đến với giải pháp tuyệt vời cho điều này. Ông đã phát triển một phần mở rộng Yii2 cho ckeditor, tên là Widget WYSIWYG cho Yii2. Các phần mở rộng là rất lớn trong mọi khía cạnh, ngoại trừ các tập tin tải lên. Đó là một vấn đề lên ngày “amigos” lăn một giải pháp cho điều đó! Bây giờ, biên tập viên đó là gần như đầy đủ (mặc dù không hoàn hảo, không có gì nhưng là Thiên Chúa!) Tôi nghĩ tôi sẽ cuộn một “làm thế nào để” bài, và ở đây chúng tôi!
Nếu tôi chán bạn cho vài phút vừa qua, vui mừng … thời gian để đi sâu vào! Dưới đây là các bước thực hiện để sử dụng phần mở rộng tuyệt vời cho hình ảnh tải lên.
php composer.phar require "2amigos/yii2-ckeditor-widget" "*"
$form = ActiveForm::begin() ?>  
    <?= $form->field($model, 'content')->widget(CKEditor::className(), [
        'options' => ['rows' => 6],
        'preset' => 'basic'
    ]) ?>
<?php ActiveForm::end() ?>

<?php CKEditorInline::begin(['preset' => 'basic']);?>
    This is text that will be edited....!
<?php CKEditorInline::end();?>

Upload
$form = ActiveForm::begin() ?>  
    <?= $form->field($model, 'content')->widget(CKEditor::className(), [
        'options' => ['rows' => 6],
        'preset' => 'basic'
        'clientOptions' => [
            'filebrowserUploadUrl' => 'site/url'
        ]
    ]) ?>
<?php ActiveForm::end() ?>
Controller
<?php

class SiteController extends Controller
{ 
    public function actionUrl()
    {         
        $uploadedFile = UploadedFile::getInstanceByName('upload'); 
        $mime = \yii\helpers\FileHelper::getMimeType($uploadedFile->tempName);
        $file = time()."_".$uploadedFile->name;
        
        $url = Yii::$app->urlManager->createAbsoluteUrl('/uploads/ckeditor/'.$file);
        $uploadPath = Yii::getAlias('@webroot').'/uploads/ckeditor/'.$file;
        //extensive suitability check before doing anything with the file…
        if ($uploadedFile==null)
        {
           $message = "No file uploaded.";
        }
        else if ($uploadedFile->size == 0)
        {
           $message = "The file is of zero length.";
        }
        else if ($mime!="image/jpeg" && $mime!="image/png")
        {
           $message = "The image must be in either JPG or PNG format. Please upload a JPG or PNG instead.";
        }
        else if ($uploadedFile->tempName==null)
        {
           $message = "You may be attempting to hack our server. We're on to you; expect a knock on the door sometime soon.";
        }
        else {
          $message = "";
          $move = $uploadedFile->saveAs($uploadPath);
          if(!$move)
          {
             $message = "Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.";
          } 
        }
        $funcNum = $_GET['CKEditorFuncNum'] ;
        echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";        
    } 
}

Read More