• 售前

  • 售后

热门帖子
入门百科

yii2实现Ueditor百度编辑器的示例代码

[复制链接]
特朗普大爷 显示全部楼层 发表于 2021-10-26 13:21:44 |阅读模式 打印 上一主题 下一主题
本日在网上看了下有关图片上传的教程,历经妨害才调试好,如今把相干代码及其阐明贴出来,以供初次使用的朋侪们参考。
资源下载
yii2.0-ueditor下载路径:yii2-ueditor-jb51.rar
结果演示:

安装方法:
1.下载yii2-ueditor
2.将下载的yii2-ueditor-master 修改 ueditor (留意:修改成其他文件名请修改插件内对应的命名空间)
3.将文件方在 根目次/common/widgets 下即可
调用方法:
在backend/controllers中新建一个控制器Demo加入以下代码
  1. public function actions(){
  2. return [
  3. 'ueditor'=>[
  4.   'class' => 'common\widgets\ueditor\UeditorAction',
  5.   'config'=>[
  6.   //上传图片配置
  7.   'imageUrlPrefix' => "", /* 图片访问路径前缀 */
  8.   'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  9.   ]
  10. ]
  11. ];
  12. }
复制代码
第一种调用方式:
在对应的渲染页面,即views下的页面中
  1. <?=common\widgets\ueditor\Ueditor::widget(['options'=>['initialFrameWidth' => 850,]])?>
复制代码
options 填写设置编辑器的参数(参考ueditor官网)
第二种调用方式:
  1. <?php $form = ActiveForm::begin(); ?>
  2. <?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
  3. <?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
  4. 'options'=>[
  5. 'initialFrameWidth' => 850,
  6. ]
  7. ]) ?>
  8. ...
  9. <?php ActiveForm::end(); ?>
复制代码
yii2框架整合了百度编辑器,因为文件上传接纳的是yii2自带的UploadedFile,这就难免umeditor上传不成功问题,解决问题的只必要两个操纵步调,我们来看看具体实现
创建一个 common/models/Upload.php:代码为:
  1. <?PHP
  2. namespace common\models;
  3. use yii\base\Model;
  4. use yii\web\UploadedFile;
  5. /**
  6. * UploadForm is the model behind the upload form.
  7. */
  8. class Upload extends Model
  9. {
  10. /**
  11. * @var UploadedFile file attribute
  12. */
  13. public $file;
  14. /**
  15. * @return array the validation rules.
  16. */
  17. public function rules()
  18. {
  19. return [
  20.   [['file'], 'file'],
  21. ];
  22. }
  23. }
复制代码
必要在刚刚创建的那个控制器Demo里添加actionUploadImage方法处理处罚“富文本框的图片上传”内容
  1. use yii\web\UploadedFile;
  2. use common\models\Upload;
  3. /**
  4. * 富文本框的图片上传
  5. * @return array
  6. */
  7. public function actionUploadImage()
  8. {
  9. $model = new Upload();
  10. if (Yii::$app->request->isPost) {
  11.   $model->file = UploadedFile::getInstance($model, "file");
  12.   $dir = '/uploads/ueditor/';//文件保存目录
  13.   if (!is_dir($dir))
  14.   mkdir($dir);
  15.   if ($model->validate()) {
  16.   $fileName = $model->file->baseName . "." . $model->file->extension;
  17.   $dir = $dir."/". $fileName;
  18.   $model->file->saveAs($dir);
  19.   $info = [
  20.    "originalName" => $model->file->baseName,
  21.    "name" => $model->file->baseName,
  22.    "url" => $dir,
  23.    "size" => $model->file->size,
  24.    "type" => $model->file->type,
  25.    "state" => "SUCCESS",
  26.   ];
  27.   exit(json_encode($info));
  28.   }
  29. }
  30. }
复制代码
特别提醒:上述返回的$info信息中state状态只能是SUCCESS,区分大小写
视图文件
  1. <?php
  2. use yii\widgets\ActiveForm;
  3. ?>
  4. <?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
  5. 'options'=>[
  6.   'initialFrameWidth' => 1050,//宽度
  7.   'initialFrameHeight' => 550,//高度
  8. ]
  9. ]) ?>
  10. <div class="form-group">
  11. <?= Html::submitButton('保存', ['class' => 'btn btn-success']) ?>
  12. </div>
  13. <?php ActiveForm::end() ?>
复制代码
此中content是字段名称
关于图片上传的可以看下:https://www.jb51.net/article/150018.htm
在YII2框架中使用UEditor编辑器发布文章的地址:https://www.jb51.net/article/150022.htm
以上就是本文的全部内容,盼望对大家的学习有所帮助,也盼望大家多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作