在上篇文章给大家介绍了如何在yii2中集成百度编辑器umeditor以及如何解决umeditor上传图片问题。

今天我们来谈谈yii2集成另外一个强大好用的富文本编辑器Redactor,个人觉得Redactor比百度编辑器好用哦

Redactor有官方的Yii2插件package,实用性也是很强的。

首先我们不急不躁,先进行安装Redactor。

可以参考https://github.com/yiidoc/yii2-redactor进行安装。有很多新手看不惯英文哈,如果你点击了链接参考了github上的安装,希望你再回来看看在整个安装过程中都要哪些必要的注意点。

1、我们跟他们一样,利用composer安装即可。

2、添加配置项

'modules' => [

'redactor' => [

'class' => 'yii\redactor\RedactorModule',

'uploadDir' => '上传目录',

'uploadUrl' => '图片可访问地址',

'imageAllowExtensions'=>['jpg','png','gif']

],

],

第一个注意点,默认的上传文件保存在根目录下的uploads,如果你想更换文件的保存目录,修改配置项uploadDir即可,同时你需要修改uploadUrl保证图片可访问。3、如果你的view是ActiveField类型,下面的配置适用你

= $form->field($model, 'content')->widget(\yii\redactor\widgets\Redactor::className()) ?>

但是如果你的表单不是用yii自带的组建生成的,你应该像下面这样配置

= \yii\redactor\widgets\Redactor::widget([ 'model' => $model, 'attribute' => 'content' ]) ?>

4、其中上传类用的是redactor一套,但是你说你的上传类需要重写,也可以,只需要像下面这样加几个配置即可

= $form->field($model, 'content')->widget(\yii\redactor\widgets\Redactor::className(), [

'clientOptions' => [

'imageManagerJson' => ['/redactor/upload/image-json'],

'imageUpload' => ['/redactor/upload/image'],

'fileUpload' => ['/redactor/upload/file'],

'lang' => 'zh_cn',

'plugins' => ['clips', 'fontcolor','imagemanager']

]

]) ?>

5、配置语言或者插件,像第四步一样,在clientOptions项中添加lang和plugins配置项即可,如果你想问都有哪些plugins,打开目录\vendor\yii2-redactor\assets\plugins可以一睹风采。

6、图片上传注意了,因为redactor是以模块进行引入的,如果你的项目含有权限管理,记得添加权限哦。

7、忘记了一个大前提,保证你的php支持fileinfo扩展。打开php.ini文件去掉fileinfo前面的分号即可

以上所述是小编给大家介绍的Yii2集成富文本编辑器redactor实例教程,希望对大家有所帮助!

时间: 2016-04-22

yii2 html编辑器,浅析Yii2集成富文本编辑器redactor实例教程相关推荐

  1. kind富文本编辑器_在项目中集成富文本编辑器

    前   言 现在学程序的都离不开 Markdown 语法了吧,Markdown 已经成为典型的转换为HTML的非正式规范和参考实现,现在市场上也出现了许多Markdown实现,在基本语法之上额外增加了 ...

  2. django快速集成富文本编辑器wangeditor

    django快速集成富文本编辑器wangeditor django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的 ...

  3. java集成富文本编辑器UEditor

    JAVA集成富文本编辑器UEditor 集成前说明 集成UEditor 一.UEditor下载 二.UEditor迁入项目 三.引入ueditor中的js 四.初始化UEditor 五.实现图片上传 ...

  4. Flask博客实战 - 集成富文本编辑器Quill

    富文本编辑器Quill 为什么需要集成富文本编辑器? 一个博客最主要的功能是什么,那就是写作,如果不能对我们发布的内容进行排版美化,那么我们所发布的内容又有什么意义? 对于阅读者来说也是非常的不友好和 ...

  5. Django项目中集成富文本编辑器的通用方法,适合KindEditor,xhEditor,NicEditor,wymeditor等 .

    首先,请参考我以前写的一篇博客:如何把nicEditor集成到django中使用 http://blog.csdn.net/huyoo/article/details/4382317 这篇文章中的做法 ...

  6. vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)

    一.背景 集成百度ueditor,实现图文编辑 二.项目介绍 vue---nuxt项目 vue项目:ueditor(vue-ueditor-wrap) 三.集成步骤 3.1.下载富文本编辑器 GitH ...

  7. VUE 集成富文本编辑器及踩坑记录

    一.查看 vue版本和vue cli版本 首先要知道自己所使用的VUE 版本和 脚手架(VUE CLI)版本 这样自己无论是在百度的时候还是选择富文本编辑器对应版本的时候都方便很多 1.查看vue 版 ...

  8. html编辑器自定义脚本,CKeditor富文本编辑器使用技巧之添加自定义插件的方法

    本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法.分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice ...

  9. php 富文本编辑器,开发php接入富文本编辑器KindEditor笔记 | 小灰灰博客

    在做开发的时候,想使用富文本编辑器,小灰灰找了好几个富文本编辑器最终选择了kindeditor编辑器,轻量级的,文件不是很大解压之后也才1M多,而且小灰灰喜欢kind带的清除格式以及一键排版功能,个人 ...

最新文章

  1. python中处理日期和时间的标准模块是-Python time模块参考手册
  2. 将传统 WPF 程序迁移到 DotNetCore 3.0
  3. 计算机c盘哪些东西可以清理,细说电脑c盘哪些文件可以删除
  4. (十九)hashlib模块
  5. php正文重复度,百度如何判断网页文章的重复度?两个页面相似度确认方法介绍...
  6. Spring体系常用方法(一)
  7. 流畅的python 数据模型
  8. JavaScript并非“按值传递”
  9. 数据说大数据分析师吴女士观点:大数据是回暖的计算机行业中绩增速最高的子行业...
  10. hbase占用内存过高_Hbase探究——如何避免一行数据过大导致加载至内存出现out of memory的情况...
  11. Mimics医学建模学习笔记
  12. NVivo 12 Mac的大规模部署
  13. 测试方案包含哪些内容?
  14. 大数据开发都需要什么技术?
  15. mysql dcn_Tdsql DCN同步技术原理介绍
  16. 做程序界中的死神,锻造合适的斩魂刀
  17. 在Mac系统中将html网页转成PDF格式
  18. OpenCV-Python无法直接读取gif格式的图片,可用PIL读取
  19. 关于CTC模型的理解
  20. linux 网卡绑定team和删除team

热门文章

  1. 安徽蚌埠市国家计算机等级考试官网,2019年下半年安徽省蚌埠市全国计算机等级考试费用...
  2. 小学计算机教师集体备课计实,教师集体备课活动记录表.doc
  3. QObject: Cannot create children for a parent that is in a different thread错误
  4. Java+包裹类型_java中的包裹类型
  5. mysql 按小时统计
  6. 面向对象的三大特性之三:封装
  7. 指数体系与因素分析:概念、作用与种类
  8. 阿里云新征程:通往智能之路
  9. [摘]iOS 通讯录操作
  10. 不显示删除回复显示所有回复显示星级回复显示得分回复 由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本,请添加处理程序。...