详解在YII2框架中使用UEditor编辑器发布文章
网络编程 2021-07-04 23:24www.168986.cn编程入门
这篇文章主要介绍了在YII2框架中使用UEditor编辑器发布文章,长沙网络推广觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
本文介绍了详解在YII2框架中使用UEditor编辑器发布文章 ,分享给大家,具体如下:
创建文章数据表
文章数据表主要有4个字段
1.id 主键(int)
2.title 标题(varchar)
3.content 内容(text)
4.created_time 创建时间(int)
创建文章模型
创建文章模型,不要忘记设置验证规则和字段的名称
namespace backend\models; class Article extends \yii\db\ActiveRecord { public function rules() { return [ [['title', 'content'], 'required'], ]; } public function attributeLabels() { return [ 'id' => 'ID', 'title' => '名称', 'content' => '内容', ]; } }
创建控制器
创建文章控制器并编写发布文章功能
namespace backend\controllers; use backend\models\Article; class ArticleController extends \yii\web\Controller { /* * 发布文章 */ public function actionAdd() { $article = new Article(); if($article->load(\Yii::$app->request->post()) && $article->validate()){ $article->created_time = time(); $article->save(); \Yii::$app->session->setFlash('suess','文章添加成功'); return $this->refresh(); } return $this->render('add',['article'=>$article]); } }
安装UEditor小部件
使用poser命令安装
poser require kucha/ueditor "*"
在控制器中定义处理上传文件的动作
在控制器中定义动作,用于处理UEditor上传的文件。
可以配置域名,上传路径,上传文件命名格式等等
public function actions() { return [ 'upload' => [ 'class' => 'kucha\ueditor\UEditorAction', 'config' => [ "imageUrlPrefix" => "",//图片访问路径前缀 "imagePathFormat" => "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}" //上传保存路径 "imageRoot" => Yii::getAlias("@webroot"), ], ] ]; }
在视图中显示UEditor编辑器
在视图表单中使用如下代码显示UEditor编辑器
$form = \yii\bootstrap\ActiveForm::begin(); echo $form->field($article,'title'); echo $form->field($article,'content')->widget('kucha\ueditor\UEditor',[ 'clientOptions' => [ //编辑区域大小 'initialFrameHeight' => '200', //设置语言 'lang' =>'en', //中文为 zh- //定制菜单 'toolbars' => [ [ 'fullscreen', 'source', 'undo', 'redo', '|', 'fontsize', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', '|', 'lineheight', '|', 'indent', '|' ], ] ]); echo \yii\bootstrap\Html::submitButton('提交',['class'=>'btn btn-info']); \yii\bootstrap\ActiveForm::end();
最终页面效果
以下是发布文章功能编写完成后的效果,是不是很炫?希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:laravel中的一些简单实用功能
下一篇:yii2 上传图片的示例代码
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程