• 售前

  • 售后

热门帖子
入门百科

详解在YII2框架中利用UEditor编辑器发布文章

[复制链接]
虎哥726 显示全部楼层 发表于 2021-10-26 13:06:07 |阅读模式 打印 上一主题 下一主题
本文先容了详解在YII2框架中利用UEditor编辑器发布文章 ,分享给各人,具体如下:
创建文章数据表
文章数据表重要有4个字段
1.id  主键(int)
2.title 标题(varchar)
3.content 内容(text)
4.created_time 创建时间(int)
创建文章模型
创建文章模型,不要忘记设置验证规则和字段的名称
  1. namespace backend\models;
  2. class Article extends \yii\db\ActiveRecord
  3. {
  4.   public function rules()
  5.   {
  6.     return [
  7.       [['title', 'content'], 'required'],
  8.     ];
  9.   }
  10. public function attributeLabels()
  11. {
  12.   return [
  13.     'id' => 'ID',
  14.     'title' => '名称',
  15.     'content' => '内容',
  16.   ];
  17. }
  18. }
复制代码
创建控制器
创建文章控制器并编写发布文章功能
  1. namespace backend\controllers;
  2. use backend\models\Article;
  3. class ArticleController extends \yii\web\Controller
  4. {
  5.   /*
  6.    * 发布文章
  7.    */
  8.   public function actionAdd()
  9.   {
  10.     $article = new Article();
  11.     if($article->load(\Yii::$app->request->post()) && $article->validate()){
  12.        $article->created_time = time();
  13.       $article->save();  
  14.       \Yii::$app->session->setFlash('success','文章添加成功');
  15.       return $this->refresh();
  16.     }
  17.     return $this->render('add',['article'=>$article]);
  18.   }
  19. }
复制代码
安装UEditor小部件
利用composer下令安装
  1. composer require kucha/ueditor "*"
复制代码
在控制器中定义处理上传文件的动作
在控制器中定义动作,用于处理UEditor上传的文件。
可以配置域名,上传路径,上传文件命名格式等等
  1. public function actions()
  2. {
  3.   return [
  4.     'upload' => [
  5.       'class' => 'kucha\ueditor\UEditorAction',
  6.       'config' => [
  7.         "imageUrlPrefix" => "",//图片访问路径前缀
  8.         "imagePathFormat" => "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}" //上传保存路径
  9.         "imageRoot" => Yii::getAlias("@webroot"),
  10.       ],
  11.     ]
  12.   ];
  13. }
复制代码
在视图中表现UEditor编辑器
在视图表单中利用如下代码表现UEditor编辑器
  1. $form = \yii\bootstrap\ActiveForm::begin();
  2. echo $form->field($article,'title');
  3. echo $form->field($article,'content')->widget('kucha\ueditor\UEditor',[
  4.   'clientOptions' => [
  5.     //编辑区域大小
  6.     'initialFrameHeight' => '200',
  7.     //设置语言
  8.     'lang' =>'en', //中文为 zh-cn
  9.     //定制菜单
  10.     'toolbars' => [
  11.       [
  12.         'fullscreen', 'source', 'undo', 'redo', '|',
  13.         'fontsize',
  14.         'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat',
  15.         'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',
  16.         'forecolor', 'backcolor', '|',
  17.         'lineheight', '|',
  18.         'indent', '|'
  19.       ],
  20.     ]
  21. ]);
  22. echo \yii\bootstrap\Html::submitButton('提交',['class'=>'btn btn-info']);
  23. \yii\bootstrap\ActiveForm::end();
复制代码
终极页面效果

以下是发布文章功能编写完成后的效果,是不是很炫?希望对各人的学习有所资助,也希望各人多多支持脚本之家。

本帖子中包含更多资源

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

x

帖子地址: 

回复

使用道具 举报

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

本版积分规则

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

  • 微信公众号

  • 商务合作