txt文档编辑html不显示图片,Layui富文本编辑器内容不显示,图片上传等问题
发布日期:2022-02-21 12:50:40 浏览次数:32 分类:技术文章

本文共 1797 字,大约阅读时间需要 5 分钟。

前提

开发环境

后台:PHP (ThinkPHP5.0)

前台:jQuery (Layui.js)

解决问题

富文本编辑器内容不显示

layui图片上传接口编写

layui富文本编辑器图片不显示

代码示例

前台 HTML

一定要记得包裹在form标签,具体提交方式根据业务来,可以是ajax,可以是method,此处选择ajax。

此处一定要记的严格按照layui表单内容写法!防止加载失败! lay-verify=“content”

添加

前台 Layui.js

此处js包含图片接口,后面会具体写图片上传api

layui.use(['layer','layedit', 'form','jquery'],function() {

var form = layui.form, layer = layui.layer;

var $ = layui.$;

var layedit = layui.layedit;

layedit.set({

uploadImage: {

url: '{:url(\'api/upload/edit_img\')}' //图片上传接口url

,type: 'post' //默认post

}

});

var index = layedit.build('demo', {

height: 480 //设置编辑器高度

}); //建立编辑器

form.verify({

content: function (value) {

return layedit.sync(index);

}

})

})

=当你做到上述步骤时,已经可以正常显示富文本编辑器文本html内容

=以下是图片上传接口,PHP编写

图片上传接口

记住此接口要严格按照layui图片上传接口返回格式书写

返回码必须0

msg内容自定义

data必须为数组,返回两个参数src 和 title,其中src必须严格书写,用于富文本加载图片,建议前期先测试好该地址,看看是否能加载,否则加载失败,并且控制台和layui.msg不会做任何提示!很大部分图片上传失败都是由于src接口错误导致!我图片上传接口符合ThinkPHP5.0格式,并且测试可以网络可以正常加载。

/**

* json(['code' => 0, 'msg' => '', 'data' => $data]);

* {

* "code": 0 //0表示成功,其它失败

* ,"msg": "" //提示信息 //一般上传失败后返回

* ,"data": {

* "src": "图片路径",

* "title": "图片名称" //可选

* }

* }

*/

public function edit_img()

{

$isLogin = lib\Tools::isLogin();

if(!$isLogin) {

return show('500','请登录后操作');

}

$file = request()->file('file');

$dir = ROOT_PATH . 'public' . DS . 'about/';

$info = $file->move($dir);

if($info && $info->getPathname()) {

$data = [

'src' => '__STATIC__/../about/'.$info->getSaveName(),

'title' => 'link_image'

];

return json(['code' => 0, 'msg' => 'ok', 'data' => $data]);

}else {

return json(['code' => 500, 'msg' => 'error', 'data' => '']);

}

return json(['code' => 500, 'msg' => 'error', 'data' => '']);

}

=当你做到上述步骤时,已经可以正常显示富文本编辑器图片上传内容

总结

在书写时,请严格按照Layui返回参数书写

目前Layui富文本编辑器还在升级阶段,存在多处Bug,例如图片会直接上传,造成服务器空间浪费,并且工具栏还不丰富,当然我还是选择支持Layui

如果还存在问题,请留言,我会及时解决

转载地址:https://blog.csdn.net/weixin_33958381/article/details/117822694 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:html下拉列表初始状态,HTML选择:如何设置不会在下拉列表中显示的默认文本?...
下一篇:html四张图片拼图,js实现html滑动图片拼图验证

发表评论

最新留言

关注你微信了!
[***.104.42.241]2023年06月07日 08时15分32秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章