layui中富文本编辑器及图片上传的使用

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 私信 关注

标签：文本编辑,url,layui,器及,编辑器,file,上传,layedit
来源： https://blog.csdn.net/oCaiWen/article/details/104440793