HTML部分:
<textarea id="textarea" class="layui-textarea" name="contents"></textarea>
JS部分:
layui.use(['form','layedit'], function(){
var $ = layui.jquery,form = layui.form,layedit = layui.layedit;
layedit.set({
height:800,
uploadImage: {
url: "{:url('Publics/uploadImg')}" //图片上传接口
,type: "post" //默认post
}
});
var tex = layedit.build('textarea'); //建立编辑器
var contents = layedit.getContent(tex); //获取编辑器内容
console.log(contents);
})
获取完编辑器的内容就可以执行下一步的表单上传操作了。
PHP图片上传部分:
public function uploadImg(){
#上传验证项
$config = [
'size' => 5242880,
'ext' => 'jpg,gif,png,jpeg'
];
#获取上传的图片
$file = $this->request->file('file');
#拼接上传后的路径
$upload_path = str_replace('\\', '/','uploads/');
#验证并移动临时路径
$info = $file->validate($config)->move($upload_path);
$resourcespicurl = str_replace('\\', '/',ltrim("/".$upload_path . $info->getSaveName(),"."));
$url = $resourcespicurl;
return $url ? json(['msg'=>'上传成功','code'=>'0','data'=>['src'=>$url,'title'=>'']]): json(['msg'=>'上传失败','code'=>500]);
}
图片上传成功返回的接口需要符合layui读取要求,data中包含src和title属性
注:
如果你使用的是thinkhp框架,在添加到数据库的时候编辑器里的标签会被转义,只要在取出的时候使用htmlspecialchars_decode进行转义即可:
$getThisNews = NewsService::getThisNews($id); //读取数据
$getThisNews['contents'] = htmlspecialchars_decode($getThisNews['contents']); //转义编辑器中文章
oCaiWen
发布了1 篇原创文章 · 获赞 0 · 访问量 14
私信
关注