1.html代码
<div class="form-group">
<label for="content" class="col-sm-2 control-label">内容</label>
<div class="col-sm-10">
textarea id="editor" name="content" rows="10" cols="80"></textarea>
</div>
</div>
<script src="/static/res/admin/ckeditor5/ckeditor.js"></script>
<script src="/static/res/admin/ckeditor5/translations/zh-cn.js"></script>
<script>
let newEditor;
ClassicEditor
.create( document.querySelector( '#editor' ), {
language: 'zh-cn', //设置中文
ckfinder: {
uploadUrl : ''
//后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
//$result = ['uploaded'=>false,'url'=>'','message'=>$msg];
}
} )
.then( editor => {
newEditor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
document.querySelector( '#saveartice' ).addEventListener( 'click', () => {
const editorData = newEditor.getData();
$('#editor').val(editorData);
} );
</script>
2.后台上传代码
// 单图上传- ckeditor
public function editorupload()
{
$file = request()->file('upload');
$folder = 'ckeditor';
// 配置文件
$alioss = config('alioss.');
$accessKeyId = $alioss['accessKeyId'];
$accessKeySecret = $alioss['accessKeySecret'];
$endpoint = $alioss['endpoint'];
$bucket = $alioss['bucket'];
// 文件名称生成
$file_name = sha1(date('YmdHis',time()).uniqid()).'.'.pathinfo($file->getInfo()['name'],PATHINFO_EXTENSION);
// 文件路径
$file_path = config('oss_save_path').'/'.$folder. '/' .date('Ymd');
$url = $file_path .'/'. $file_name;
try{
$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
$result =$ossClient->uploadFile($bucket,$url,$file->getInfo()['tmp_name']);
if ($result['info']['http_code']==200) {
$result = ['uploaded'=>true,'url'=>$result['info']['url'],'message'=>'上传成功'];
}else{
$result = ['uploaded'=>false,'url'=>'','message'=>'上传错误'];
}
} catch(OssException $e) {
$msg = $e->getMessage();
$result = ['uploaded'=>false,'url'=>'','message'=>$msg];
}
return json($result);
}