yii2實(shí)現(xiàn)Ueditor百度編輯器的示例代碼

更新時(shí)間：2018年11月02日 09:56:03 作者：willeny

這篇文章主要介紹了yii2實(shí)現(xiàn)Ueditor百度編輯器的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

今天在網(wǎng)上看了下有關(guān)圖片上傳的教程，歷經(jīng)挫折才調(diào)試好，現(xiàn)在把相關(guān)代碼及其說(shuō)明貼出來(lái)，以供初次使用的朋友們參考。

資源下載

yii2.0-ueditor下載路徑：yii2-ueditor-jb51.rar

效果演示：

安裝方法：

1.下載yii2-ueditor
2.將下載的yii2-ueditor-master 修改 ueditor (注意：修改成其他文件名請(qǐng)修改插件內(nèi)對(duì)應(yīng)的命名空間)
3.將文件方在根目錄/common/widgets 下即可

調(diào)用方法：

在backend/controllers中新建一個(gè)控制器Demo加入以下代碼

public function actions(){
 return [
 'ueditor'=>[
  'class' => 'common\widgets\ueditor\UeditorAction',
  'config'=>[
  //上傳圖片配置
  'imageUrlPrefix' => "", /* 圖片訪問(wèn)路徑前綴 */
  'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  ]
 ]
 ];
}

第一種調(diào)用方式：

在對(duì)應(yīng)的渲染頁(yè)面，即views下的頁(yè)面中

<?=common\widgets\ueditor\Ueditor::widget(['options'=>['initialFrameWidth' => 850,]])?>

options 填寫配置編輯器的參數(shù)（參考ueditor官網(wǎng)）

第二種調(diào)用方式：

<?php $form = ActiveForm::begin(); ?>

<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
 'options'=>[
 'initialFrameWidth' => 850,
 ]
]) ?>

 ...

<?php ActiveForm::end(); ?>

yii2框架整合了百度編輯器，因?yàn)槲募蟼鞑捎玫氖莥ii2自帶的UploadedFile,這就難免umeditor上傳不成功問(wèn)題，解決問(wèn)題的只需要兩個(gè)操作步驟，我們來(lái)看看具體實(shí)現(xiàn)

創(chuàng)建一個(gè) common/models/Upload.php:代碼為：

<?PHP
namespace common\models;

use yii\base\Model;
use yii\web\UploadedFile;

/**
 * UploadForm is the model behind the upload form.
 */
class Upload extends Model
{
 /**
 * @var UploadedFile file attribute
 */
 public $file;

 /**
 * @return array the validation rules.
 */
 public function rules()
 {
 return [
  [['file'], 'file'],
 ];
 }
}

需要在剛剛創(chuàng)建的那個(gè)控制器Demo里添加actionUploadImage方法處理“富文本框的圖片上傳”內(nèi)容

use yii\web\UploadedFile;
use common\models\Upload;
/**
 * 富文本框的圖片上傳
 * @return array
 */
 public function actionUploadImage()
 {
 $model = new Upload();
 if (Yii::$app->request->isPost) {
  $model->file = UploadedFile::getInstance($model, "file");
  $dir = '/uploads/ueditor/';//文件保存目錄
  if (!is_dir($dir))
  mkdir($dir);
  if ($model->validate()) {
  $fileName = $model->file->baseName . "." . $model->file->extension;
  $dir = $dir."/". $fileName;
  $model->file->saveAs($dir);
  $info = [
   "originalName" => $model->file->baseName,
   "name" => $model->file->baseName,
   "url" => $dir,
   "size" => $model->file->size,
   "type" => $model->file->type,
   "state" => "SUCCESS",
  ];
  exit(json_encode($info));
  }
 }
 }

特別提醒：上述返回的$info信息中state狀態(tài)只能是SUCCESS,區(qū)分大小寫

視圖文件

<?php
use yii\widgets\ActiveForm;
?>

 <?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
 'options'=>[
  'initialFrameWidth' => 1050,//寬度
  'initialFrameHeight' => 550,//高度
 ]
 ]) ?>
<div class="form-group">
 <?= Html::submitButton('保存', ['class' => 'btn btn-success']) ?>
 </div>

<?php ActiveForm::end() ?>

其中content是字段名稱

關(guān)于圖片上傳的可以看下：http://www.dbjr.com.cn/article/150018.htm

在YII2框架中使用UEditor編輯器發(fā)布文章的地址：http://www.dbjr.com.cn/article/150022.htm

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: