当前的需求是在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.wangEditor
var 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系统在使用控制器的时候,首先会查找�0�2custom/module/<模块名>/controller.php这个文件。如果未找到此文件,则会继续查找module/<模块名>/controller.php这个文件。要是这两个文件都没有找到,则将使用默认控制器include/MVC/Controller/SugarController.php。因为custom/module下的模块目录是你在后台添加上去的,我们为了不用多次添加上传接口,所以,我们可以把上传接口写到module目录下,在原有的控制器文件中,添加上传接口,比如原有的Home模块(目录)。
转载原文链接:https://blog.csdn.net/weixin_42457618/article/details/107809270