laravel-admin 配置富文本编辑器流程
laravel-admin默认去除富文本编辑器的,官方也给出了配置方法。
我配置的是wangEditor,本来配置完后就能愉快得使用了,可万万没想到还是有坑的。默认是用base64上传的,也就是数据库中保存的是base64!!!果然报错了,显示
Data too long for column 'content'
开始觉得base64也未尝不可,文章插图不会太多,百度了下要求修改mysql的max_allowed_packet。尝试后还是发现没作用。
还是回归富文本编辑器吧,在官网上看到图片上传到服务器和OSS的方法。然后就顺藤摸瓜解决问题,异步方式上传图片,再保存路径到数据库中。
代码如下
//wangEditor.php
public function render()
{
$name = $this->formatName($this->column);
$this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.zIndex = 0
editor.customConfig.uploadImgServer = '/admin/api/upload'
editor.customConfig.uploadFileName = 'img'
editor.customConfig.onchange = function (html) {
$('input[name=\'$name\']').val(html);
}
editor.create() EOT;
return parent::render();
}
//修改filesystems.php文件,为了方便root为public目录
'local' => [
'driver' => 'local',
'root' => public_path('app'),
],
//VerifyCsrfToken.php中间件 添加
protected $except = [
'/admin/api/*'
];
//api.php 接口方法
public function upload(Request $request){
$path = Storage::disk('local')->putFile('images', $request->file('img'));
$p = '/app/'.$path;
return response()->json(['errno'=>0,'data'=>[$p]]);
}
最后记得把接口加到路由中,完成。
laravel-admin 配置富文本编辑器流程的更多相关文章
- Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
- Django-xadmin后台配置富文本编辑器(方法一)
1.https://github.com/twz915/DjangoUeditor3下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录 2.找到项目的setti ...
- day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器
目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...
- Django之富文本编辑器
1.在虚拟环境中安装包. pip install django-tinymce==2.6.0 2.在配置文件中INSTALLED_APPS注册 3.配置富文本编辑器的宽高 4.配置编辑器url.
- Django xadmin后台添加富文本编辑器UEditor的用法
效果图: 步骤: 1.利用命令:pip install DjangoUeditor,安装DjangoUeditor,但由于DjangoUeditor没有python3版本的,从的Github上把修改好 ...
- 给Django后台富文本编辑器添加上传文件的功能
使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...
- MVC5富文本编辑器CKEditor配置CKFinder
富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- django的admin或者应用中使用KindEditor富文本编辑器
由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...
- django 开发之给admin 模块添加富文本编辑器
第一步下载kindeditor http://kindeditor.net/demo.php 下载下来后放到静态文件static 下面的js下面 接着在admin 模块文章类下引入这富文本编辑器: ...
随机推荐
- Appnium安装-Mac平台
Appium的安装-MAC平台 其实Appium的安装方式主要有两种: 1)自己安装配置nodejs的环境,然后通过npm进行appium的安装 2)直接下载官网提供的dmg进行安装,dmg里面已 ...
- 常用的Css命名方式
常用的Css命名方式: CSS命名规范: 1.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:p ...
- SCAU 1138 代码等式 并查集
1138 代码等式[附加题] 该题有题解 时间限制:500MS 内存限制:65536K 提交次数:59 通过次数:21 题型: 编程题 语言: G++;GCC Description 一个代码等 ...
- 一个测试基础面试题——如何测试web银行开户
之前面试被问到过这样一个问题,自己答的都是一些UI界面上的case,看了一些大神的关于这类面试题的总结才知道自己差的不是一点半点,今天也总结下. 内管银行开户,有账号.用户名.用户证件类型.证件号三个 ...
- opengl in medical imaging
医学可视化 http://schorsch.efi.fh-nuernberg.de/roettger/index.php/Lectures/MedicalVisualization http://ww ...
- jquery之extend
jquery的extend方法的用法1. [代码][JavaScript]代码 01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01// ...
- github如何提交自己修改的代码
当在github上发现别人项目有BUG,或者想要完善其功能的时候,该如何把自己的修改提交到项目中呢? 以logback为例 步骤: 1, fork一份logback代码到自己的仓库 进入github要 ...
- MySQL丨5.6版本插入中文显示问号解决方法
解决办法: 1.找到安装目录下的my-default.ini 这个配置文件 2.copy一份粘贴到同目录下 另命名为my.ini 3.在my.ini 配置下加上下面几句代码 并保存 [mysql]de ...
- BZOJ_1671_[Usaco2005 Dec]Knights of Ni 骑士_BFS
Description Bessie is in Camelot and has encountered a sticky situation: she needs to pass through t ...
- [PA 2011] Journeys
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3073 [算法] 考虑线段树优化建图 建立两棵线段树 , 一棵为入树 , 一棵为出树 ...