当前位置: 首页 > 编程笔记 >

浅析Yii2集成富文本编辑器redactor实例教程

郑博
2023-03-14
本文向大家介绍浅析Yii2集成富文本编辑器redactor实例教程,包括了浅析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实例教程,希望对大家有所帮助!

 类似资料:
  • 本文向大家介绍nodejs后台集成ueditor富文本编辑器的实例,包括了nodejs后台集成ueditor富文本编辑器的实例的使用技巧和注意事项,需要的朋友参考一下 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.. 1 下载ueditor nodejs版本 2 复制public目录下面的文

  • 本文向大家介绍vue集成百度UEditor富文本编辑器使用教程,包括了vue集成百度UEditor富文本编辑器使用教程的使用技巧和注意事项,需要的朋友参考一下 在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器。那么,如果你有这个需求,希望可以帮助到你。 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简。于是我将百度富文本编辑器放到vue项目中使

  • Django集成UEditor (封装成应用) 百度富文本编辑器 http://ueditor.baidu.com/website/ 使用效果 测试环境 ubuntu 16.04 python3.5.2 django1.11.7 目前测试解决了出现的以下两个问题,都是python版本问题 error1 # name 'file' is not defined controller.py 68行

  • 本文向大家介绍Python的Flask框架中集成CKeditor富文本编辑器的教程,包括了Python的Flask框架中集成CKeditor富文本编辑器的教程的使用技巧和注意事项,需要的朋友参考一下 CKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内

  • 本文向大家介绍Django集成百度富文本编辑器uEditor攻略,包括了Django集成百度富文本编辑器uEditor攻略的使用技巧和注意事项,需要的朋友参考一下 首先从 ueEditor官网 下载最新版本的包,目前官网上提供了ASP、.NET、PHP、JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点。 这里不介绍uEditor的使用方法,也不过多解释uEdit

  • 本文向大家介绍vue-quill-editor+plupload富文本编辑器实例详解,包括了vue-quill-editor+plupload富文本编辑器实例详解的使用技巧和注意事项,需要的朋友参考一下 1,先给vue项目中下载vue-quill-editor依赖npm install vue-quill-editor --save 2,下载plupload依赖npm install pluplo