yii2集成富文本编辑器redactor
作者:白狼 出处:http://www.manks.top/article/yii2_redactor本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
前面我们说过如何在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的更多相关文章
- AngularJS集成富文本编辑器
最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: ...
- nodejs后台集成富文本编辑器(ueditor)
1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 uedi ...
- Xadmin集成富文本编辑器ueditor
在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...
- django—xadmin中集成富文本编辑器ueditor
一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...
- django后台集成富文本编辑器Tinymce的使用
富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...
- Django使用xadmin集成富文本编辑器Ueditor(方法二)
一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...
- 集成富文本编辑器XSS预防过滤措施
# https://github.com/phith0n/python-xss-filter import re import copy from html.parser import HTMLPar ...
- 关于EasyUI与富文本编辑器结合使用的问题(kindueditor与uueditor)
最近使用easyui玩玩项目,在结合富文本编辑器时遇到了一些问题,很多人(在网上看到)集成富文本编辑器时常常不能显示, 第一次打开编辑的时候没有问题,但是第二次打开就出错了.为此我进行了一些调试研究. ...
- 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例
大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...
随机推荐
- iOS阶段学习第31天笔记(UINavigationBar介绍)
iOS学习(UI)知识点整理 一.UINavigationBar 的介绍 1)概念:UINavigationBar 是用于定义导航栏按钮的一个类对象 2)在使用UINavigationBar之前必须先 ...
- 【C#进阶系列】20 异常和状态管理
异常就是指成员没有完成它的名称所宣示的行动. public class Girl { public string Name { get; set; } } public class Troy{ Gir ...
- LeetCode124:Binary Tree Maximum Path Sum
题目: Given a binary tree, find the maximum path sum. The path may start and end at any node in the tr ...
- JQuery的调用
在head标签中引用一个JQuery的文件用以制作鼠标点击动画,(JQuery包可从网上下载) JS包,脚本语言 <script language="javascript" ...
- Scalaz(23)- 泛函数据结构: Zipper-游标定位
外面沙尘滚滚一直向北去了,意识到年关到了,码农们都回乡过年去了,而我却留在这里玩弄“拉链”.不要想歪了,我说的不是裤裆拉链而是scalaz Zipper,一种泛函数据结构游标(cursor).在函数式 ...
- Java --ClassLoader创建、加载class、卸载class
一.java提供了三种ClassLoader对Class进行加载: 1.BootStrap ClassLoader:称为启动类加载器,是Java类加载层次中最顶层的类加载器,负责加载JDK中的核心类库 ...
- Java集合源码分析(四)Vector<E>
Vector<E>简介 Vector也是基于数组实现的,是一个动态数组,其容量能自动增长. Vector是JDK1.0引入了,它的很多实现方法都加入了同步语句,因此是线程安全的(其实也只是 ...
- oracle/MySQL 中的decode的使用
MySQL decode()的等同实现 在Oracle中使用decode方法可以轻松实现代码和值之间的转换,但是在MySQL中该如何实现类似功能呢? MySQL中没有直接的方法可以使用 ...
- mybatis 3的TypeHandler解析(null值的处理)
最近,在测试迁移公司的交易客户端连接到自主研发的中间件时,调用DAO层时,发现有些参数并没有传递,而在mapper里面是通过parameterMap传递的,因为有些参数为null,这就导致了参数传递到 ...
- react实例之todo,做一个实时响应的列表操作
react实例之todo, 做一个实时响应的列表操作 在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...