3-8 Yii2框架博客系统文章创建-富文本编辑器
2018-03-26 00:54
411 查看
步骤
1. Ueditor 组件加载 及 内容实现
和上传组件相似 组件的下载地址 http://www.yii-china.com/post/detail/3.html
资源下载:扩展下载(yii2.0-ueditor)框架下载(Yii 2.0.6 高级版)描述:最佳适用于yii2.0 高级版(advanced)应用框架,对于基础板(basic)及其他框架要修改对应的命名空间即可使用
效果演示:
版本相关:Yii:2.0.6Ueditor:1.4.3.1 (php版本)安装方法:1.下载yii2-ueditor2.将下载的yii2-ueditor-master 修改 ueditor (注意:修改成其他文件名请修改插件内对应的命名空间)3.将文件方在 根目录/common/widgets 下即可调用方法:在rootPath/backend/controllers中新建一个控制器加入以下代码public function actions(){
return [
'ueditor'=>[
'class' => 'common\widgets\ueditor\UeditorAction',
'config'=>[
//上传图片配置
'imageUrlPrefix' => "", /* 图片访问路径前缀 */
'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
]
]
];
}第一种调用方式:在对应的渲染页面,即views下的页面中
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
'options'=>[
'initialFrameWidth' => 850,
]
]) ?>
...
<?php ActiveForm::end(); ?>
补充:
因为百度编辑器的工具操作过于多,所以为了简化 将需要的加入进去 只需要在view中加入需要的即可
代码示范
<?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
'options'=>[
'initialFrameHeight' => 400,
// 'toolbars'=>['具体的部件可以百度添加'], #将需要的小工具加入,为空表示没有添加任何的工具
]
]) ?>
<?php ActiveForm::end(); ?>
完成!
1. Ueditor 组件加载 及 内容实现
和上传组件相似 组件的下载地址 http://www.yii-china.com/post/detail/3.html
资源下载:扩展下载(yii2.0-ueditor)框架下载(Yii 2.0.6 高级版)描述:最佳适用于yii2.0 高级版(advanced)应用框架,对于基础板(basic)及其他框架要修改对应的命名空间即可使用
效果演示:
版本相关:Yii:2.0.6Ueditor:1.4.3.1 (php版本)安装方法:1.下载yii2-ueditor2.将下载的yii2-ueditor-master 修改 ueditor (注意:修改成其他文件名请修改插件内对应的命名空间)3.将文件方在 根目录/common/widgets 下即可调用方法:在rootPath/backend/controllers中新建一个控制器加入以下代码public function actions(){
return [
'ueditor'=>[
'class' => 'common\widgets\ueditor\UeditorAction',
'config'=>[
//上传图片配置
'imageUrlPrefix' => "", /* 图片访问路径前缀 */
'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
]
]
];
}第一种调用方式:在对应的渲染页面,即views下的页面中
<?=common\widgets\ueditor\Ueditor::widget(['options'=>['initialFrameWidth' => 850,]])?>options 填写配置编辑器的参数(参考ueditor官网)第二种调用方式:<?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(); ?>
补充:
因为百度编辑器的工具操作过于多,所以为了简化 将需要的加入进去 只需要在view中加入需要的即可
代码示范
<?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
'options'=>[
'initialFrameHeight' => 400,
// 'toolbars'=>['具体的部件可以百度添加'], #将需要的小工具加入,为空表示没有添加任何的工具
]
]) ?>
<?php ActiveForm::end(); ?>
完成!
相关文章推荐
- 3-6 Yii2框架博客系统文章创建-分类表单
- 3-7 Yii2框架博客系统文章创建-标签图上传
- 3-9 Yii2框架博客系统文章创建-标签
- Yii2框架博客系统创建文章控制器与数据表
- Yii2框架博客系统创建文章model与form
- Yii2框架博客系统文章创建之表单生成
- 3-10 Yii2框架博客系统定义场景与文章创建逻辑
- 3-11 Yii2框架博客系统文章创建create方法实现 观察者模式,高内聚,低松耦合
- 从零开始,搭建博客系统MVC5+EF6搭建框架(3),添加Nlog日志、缓存机制(MemoryCache、RedisCache)、创建控制器父类BaseController
- Yii2框架博客系统前台界面布局
- 从零开始,搭建博客系统MVC5+EF6搭建框架(3),添加Nlog日志、缓存机制(MemoryCache、RedisCache)、创建控制器父类BaseController
- Yii2框架博客系统登录注册
- Django(博客系统):文章内容使用django-ckeditor、文章简介使用django-tinymce
- ssm框架创建简单的DVD管理系统(四)spring的配置与mybatis的配置
- 从零开始,搭建博客系统MVC5+EF6搭建框架(1),EF Code frist、实现泛型数据仓储以及业务逻辑
- 从零开始,搭建博客系统MVC5+EF6搭建框架(2),测试添加数据、集成Autofac依赖注入
- 详解在YII2框架中使用UEditor编辑器发布文章
- 使用.net core ABP和Angular模板构建博客管理系统(创建后端服务)
- 博客系统文章的数据库存储方式
- 最新基于ThinkPHP5.0+BootStrap框架开发的自适应WAP手机端响应式界面博客系统PHP源码