作者:白狼 出处: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的更多相关文章

  1. AngularJS集成富文本编辑器

    最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: ...

  2. nodejs后台集成富文本编辑器(ueditor)

    1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 uedi ...

  3. Xadmin集成富文本编辑器ueditor

    在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...

  4. django—xadmin中集成富文本编辑器ueditor

    一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...

  5. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  6. Django使用xadmin集成富文本编辑器Ueditor(方法二)

    一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...

  7. 集成富文本编辑器XSS预防过滤措施

    # https://github.com/phith0n/python-xss-filter import re import copy from html.parser import HTMLPar ...

  8. 关于EasyUI与富文本编辑器结合使用的问题(kindueditor与uueditor)

    最近使用easyui玩玩项目,在结合富文本编辑器时遇到了一些问题,很多人(在网上看到)集成富文本编辑器时常常不能显示, 第一次打开编辑的时候没有问题,但是第二次打开就出错了.为此我进行了一些调试研究. ...

  9. 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例

    大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...

随机推荐

  1. Ajax学习笔记1之第一个Ajax应用程序

    代码 <head> <title>An Ajax demo</title> <script src="../js/jquery-1.4.1.js&q ...

  2. SingalR--demo

    原文链接 : http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and ...

  3. Windows Server 2012中安装Active Directory域服务

    1.登陆Windows Server 2012,打开服务器管理器,选择"添加角色和功能" 2.在"开始之前"页面,直接点击"下一步" 3.选 ...

  4. 【C#进阶系列】19 可空值类型

    可空值类型,正如字面意义上的,是可以为NULL的值类型. 这个东西存在的意义可以解决比如数据库的的Int可以为NUll的情况,使得处理数据库数据更简单. 实际上可空值类型就是Nullable<T ...

  5. line-height 属性

    p.small {line-height:90%} p.big {line-height:200%}     该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最 ...

  6. 基于Erlang VM的函数式编程语言Elixir

    Elixir官网:http://elixir-lang.org/ Elixir是一种函数式动态语言,用于构建可伸缩.易维护的应用程序. Elixir是基于Erlang VM的,其广为人知的特点是运行低 ...

  7. 深入webx框架(li)

    目录 1.Webx简介 2.创建webx应用   一.Webx简介 Webx本质上就是一个Web框架,它建立在Java Servlet API基础之上.上图所示是webx的架构图.webx本身类似于s ...

  8. [Cordova] Plugin开发入门

    [Cordova] Plugin开发入门 Overview Cordova的设计概念,是在APP上透过Web控件来呈现Web页面,让Web开发人员可以操作熟悉的语言.工具来开发APP.使用Web页面来 ...

  9. 用div和css样式控制页面布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. JBox - 模态窗口,工具提示和消息 jQuery 插件

    jBox 是一个强大而灵活的 jQuery 插件,可以帮助实现模态窗口,工具提示,通知和更多的功能.你可以使用 jQuery 选择器轻松地添加工具提示效果到元素上,您可以以同样的方式设置模态窗口.该库 ...