当前的需求是在SuiteCRM系统中添加一个富文本编辑器,那就会涉及到上传本地图片的问题,富文本编辑器这是用的是Wangeditor,下面就开始我们的代码工作。

第一步,配置wangeditor,让它支持图片的本地上传

wangeditor配置本地上传图片很简单,官网上说的也很清楚,直接上代码。

custom/include/SugarFields/Fields/Editor/EditView.tpl

<div id='{{if empty($displayParams.idName)}}{{sugarvar key='name'}}{{else}}{{$displayParams.idName}}{{/if}}' style="width: 243%;"></div><textarea id="text1" name='{{if empty($displayParams.idName)}}{{sugarvar key='name'}}{{else}}{{$displayParams.idName}}{{/if}}' style="display: none;">{$value}</textarea><script>{literal}jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();$(document).ready(function(){var textareaDom = '#{/literal}{{if empty($displayParams.idName)}}{{sugarvar key='name'}}{{else}}{{$displayParams.idName}}{{/if}}{literal}';var E = window.wangEditorvar editor = new E(textareaDom)var $text1 = $('#text1')  // 文本域editor.customConfig.onchange = function (html) {// 监控变化,同步更新到 textarea$text1.val(html)}// 配置服务器端地址editor.customConfig.uploadImgServer = 'index.php?module=aaaa_A1&action=upload';editor.customConfig.uploadFileName = 'file';editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;editor.create()// 初始化 编辑器 的值editor.txt.html($text1.val());});{/literal}
</script>

这样的话,在我们的编辑器里就会多出一个“上传图片”tab,如下:

第二步,编写上传图片的后台接口

从上面的代码中,我们可以看到图片上传的接口地地为index.php?module=aaaa_A1&action=upload,这样的写法,是符合SuiteCRM的路由规则的。这里的aaaa_A1是控制器,upload是方法。
我们将控制器建在如下的目录中,SuiteCRM有自己的一套规则。

custom/modules/aaaa_A1/controller.php

<?php
if(!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');Class CustomAaaa_A1Controller extends SugarController
{// 编辑器内本地图片上传public function action_upload(){$file = $_FILES['file'];$name_arr = explode('.', $file['name']);$file_suffix = strtolower(end($name_arr));$file_name = self::createFileName($file_suffix);$file_size = $file['size'];$file_tmp = $file['tmp_name'];$extensions= array('jpeg', 'jpg', 'png', 'gif');// 规定可以上传的扩展名文件 if(in_array($file_suffix, $extensions) === false){echo json_encode(['errno' => 1]);die;}// 规定可以上传的文件大小if($file_size > 3 * 1024 * 1024) {echo json_encode(['errno' => 1]);die;}// 把图片从临时文件夹内的文件移动到指定目录 $fullPath = self::mkDir('Uploads', date('Y-m-d'));$fullName = $fullPath. '/'. $file_name;move_uploaded_file($file_tmp, $fullName);echo json_encode(['errno' => 0,'data' => ['http://'. $_SERVER['HTTP_HOST']. '/'. $fullName]]);die;}// 生成图片名public static function createFileName($file_suffix){$str = md5(uniqid(mt_rand(), true));$uuid  = substr($str, 0, 8). '-';$uuid .= substr($str, 8, 4). '-';$uuid .= substr($str, 12, 4);return $prefix. $uuid. '.'. $file_suffix;}// 创建目录public static function mkDir($path, $dir){$fullPath = $path. '/'. $dir;if(!is_dir($fullPath))mkdir($fullPath, 0755);return $fullPath;}
}

这样,编辑器就可以上传本地的图片了。

最后补充一点,SuiteCRM系统在使用控制器的时候,首先会查找 custom/module/<模块名>/controller.php这个文件。如果未找到此文件,则会继续查找module/<模块名>/controller.php这个文件。要是这两个文件都没有找到,则将使用默认控制器include/MVC/Controller/SugarController.php
因为custom/module下的模块目录是你在后台添加上去的,我们为了不用多次添加上传接口,所以,我们可以把上传接口写到module目录下,在原有的控制器文件中,添加上传接口,比如原有的Home模块(目录)。

SuiteCRM图片上传(自定义控制器)相关推荐

  1. ueditor编辑器php上传配置,Ueditor编辑器图片上传自定义配置

    U需朋者说上事是础一发一开程和开数的目前间editor图片上传自新直能分支调二浏页器朋代说,事刚定义配置 不使用自带后遇新是直朋能到分览台配置 1开进架触我法端位画近发行思发们识和移的近.加载Uedi ...

  2. java图片加水印上传工具类_基于Spring Boot实现图片上传/加水印一把梭操作

    文章共537字,阅读大约需要 2分钟 ! 概述 很多网站的图片为了版权考虑都加有水印,尤其是那些图片类网站.自己正好最近和图片打交道比较多,因此就探索了一番基于 Spring Boot这把利器来实现从 ...

  3. java spring上传图片_基于Spring Boot实现图片上传/加水印一把梭操作

    文章共 537字,阅读大约需要 2分钟 ! 概述 很多网站的图片为了版权考虑都加有水印,尤其是那些图片类网站.自己正好最近和图片打交道比较多,因此就探索了一番基于 Spring Boot这把利器来实现 ...

  4. SSM框架之酒店管理系统十一(房型管理,图片上传)

    SSM框架之酒店管理系统十一(房型管理,图片上传) 1.数据库完善 create table t_room_type (id int auto_increment comment '房间类型id'pr ...

  5. jeecg uedit 自定义图片上传路径

    jeecg uedit 图片上传配置自定义物理路径,简单描述:我们知道 jeecg 中使用的 uedit 默认图片上传路径为 "当前项目\plug-in\ueditor\jsp\upload ...

  6. Angular6自定义指令实现多图片上传预览

    在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...

  7. android 自定义图片上传,android自定义ImageView仿图片上传示例

    看下效果图 主要看下自定义view 代码 public class ProcessImageView extends ImageView{ private Context context; priva ...

  8. android 自定义图片上传,android自定义ImageView仿图片上传(示例代码)

    Activity代码 1 public classMainActivity extends AppCompatActivity {2     ProcessImageView processImage ...

  9. 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  10. 【富文本】wangeditor编辑器简单使用(自定义图片上传)

    一.wangeditor 官网 二.引入 // 安装 npm i wangeditor --save// 使用 import E from "wangeditor" const e ...

最新文章

  1. 数字图像处理2:传统插值
  2. 這個日本味超濃的建築竟然是台灣的小學
  3. 基本概念之dos和cmd的区别
  4. 成功解决If your current network has https://www.anaconda.com blocked, please filea support request with
  5. JNDI配置DataResource代替JDBC连接数据库
  6. 简单实现x的n次方pta_学会这四招,原来平均值计算也可以这么简单
  7. 【转】python类中super()和__init__()的区别
  8. Oracle数据库常用技术
  9. 读《深入浅出统计学》
  10. 计算机网络对等网实验报告,计算机网络实验报告_双机互联
  11. 用python实现监听微信撤回消息
  12. Conway生命游戏
  13. 在eclipes中实现支付宝的沙箱模拟付款
  14. 【01 dp】A005_LC_生成数组(暴搜 / 记忆化 / dp)
  15. mysql连接中文_MYSQL远程连接查询中文乱码
  16. 【车道线检测论文】 LaneNet
  17. 从头开始,彻底理解服务端渲染原理
  18. 2013再见,2014,在路上
  19. php微信开发查询分组,微信开发之用户组的介绍
  20. FbxFormatConverter - Fbx 格式的转换器(目前只有:Binary、Ascii 的互转)

热门文章

  1. java 基站定位_android基站定位 | 学步园
  2. 关于8.0出现Only fullscreen opaque activities can request orientation
  3. 使用百度图像识别时,提示错误“No address associated with hostname”
  4. python log日志常用用法总结
  5. 浅学一维傅里叶变换【下一章发布 : 快速二维傅里叶变换FFT、快速二维傅里叶逆变换IFFT】
  6. 10个妙招 在线视频下载方法大全
  7. Ribbon界面介绍(1)
  8. 安卓ExpandableListView的详细使用教程(附代码解析过程)
  9. java watir_试用watir——由喜忧参半到柳暗花明
  10. 姐们儿,你就忍了吧—咱们一起骂老板(4)