结合 Lavarel上传文件到OSS 实现富文本编辑器上传文件到OSS
一、引入自动加载函数如下图
二、修改上传文件类
/**
* 上传到OSS
* @param $file
*/
private function upOss($file)
{
$res = \Common\Service\UploadFileService::uedUploadFile($file, $this->getFileName());
if ($res['code'] == 0) {
$this->filePath = $res['data']['src'];
$this->fullName = $res['data']['url'];
$this->stateInfo = $this->stateMap[0];
} else {
$this->stateInfo = $this->getStateInfo("ERROR_FILE_MOVE");
}
}
三、上传查看效果
四、查看富文本编辑器源代码(已经变成OSS的路径)
最后来看看百度富文本编辑器的用法
1 、服务端全局函数
/**
* 百度富文本编辑器
* @param string $sData 富文本里的数据
* @param string $nName 富文本数据提交表单是对应的表单字段
* @return string
*/
function ueditor($sData = '', $nName = 'content')
{
$html = '';
//配置文件
$html .= '<script type="text/javascript" src="' . asset("UEditor/ueditor.config.js") . '"></script>';
//编辑器源码文件
$html .= '<script type="text/javascript" src="' . asset("UEditor/ueditor.all.js") . '"></script>';
//实例化编辑器'
$html .= '<script type="text/javascript">var ue = UE.getEditor("ue-container");</script>';
//加载编辑器的容器
$html .= '<script id="ue-container" name="' . $nName . '" style="width:100%;height:360px;" type="text/plain">' . $sData . '</script>';
return $html;
}
2、Web端调用
{!! ueditor($data['content'], 'content') !!}