TP6结合layedit富文本编辑器实现上传图片

2019-12-06    标签:TP6    阅读:221    评论:0


国内外有许多优秀、强大的HTML编辑器,但普遍都有一个共性:异常地臃肿(少则几千行,多则上万行代码)、UI陈旧,并且基本都好几年没更新了。而现在,随着Layui的发布,我们有必要重新为富文本做一些新的定义。LayEdit仍旧遵循极简的设计风格,无论是UI上,还是接口使用上,都尽可能地避免一些繁杂的功能和配置。如果你正苦苦寻找一款轻量的Web富文本编辑器,那么LayEdit会是你不错的选择。

最近在做项目的时候,采用的是layui后台模板,遇到很多坑,记下自己的解决方法,以下是编辑器的使用案例。

效果图:

image.png

前端代码:

        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label for="title" class="layui-form-label">
                            <span class="x-red">*</span>标题</label>
                        <div class="layui-input-inline">
                            <input type="text" id="title" name="title"  required="" lay-verify="required"  autocomplete="off" class="layui-input"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="title" class="layui-form-label">
                            <span class="x-red">*</span>内容</label>
                        <div class="layui-input-block" style="background:#fff;">
                             <textarea name="" class="layui-textarea content" id="content"  style="display:none"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
                    </div>
                </form>
            </div>
        </div>

js代码:

       <script>
        layui.use(['layedit','form', 'layer','jquery'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;

                 layui.layedit.set({
                      uploadImage: {
                        url: '{:url("admin/User/layedit")}' //接口url
                        ,type: 'post' //默认post
                      }
                    });
                var editIndex = layui.layedit.build('content');
                //监听提交
                form.on('submit(add)',
                function(data) {
                    data.field.content = layui.layedit.getContent(editIndex);
                    console.log(data);
                    //发异步,把数据提交给php
                    $.ajax({
                        url:'{:url("admin/User/message_add")}',
                        type:'post',
                        timeout: '0',
                        datatype:'json',
                        data:data.field,
                        success:function(msg){
                            if(msg.code==200){
                                layer.alert(msg.msg, {
                                    icon: 6
                                },
                                function() {
                                    //关闭当前frame
                                    xadmin.close();

                                    // 可以对父窗口进行刷新 
                                    xadmin.father_reload();
                                });
                            }else{
                              layer.alert(msg.msg, {icon: 5});
                            }
                        },
                        error:function(){
                            layer.alert('网络错误', {icon: 5});
                        }
                    })
                    
                    return false;
                });

            });
        </script>

后端代码:

<?php
declare (strict_types = 1);

namespace app\admin\controller;

use think\facade\View;
use think\facade\Db;

use app\admin\validate\Message;
use think\exception\ValidateException;
class User extends Base
{
添加
    public function message_add(){
        $data=[
            'title'=>input('title'),
            'content'=>input('content'),
            'addtime'=>time(),
        ];
        if(request()->isPost()){
            // return json(['code'=>500,'msg'=>$data]);
            try {
                validate(Message::class)->check($data);
                $res=Db::name('message')->insert($data);
                if($res){
                    return json(['code'=>200,'msg'=>'添加成功']);
                }else{
                    return json(['code'=>500,'msg'=>'添加失败']);
                }
            } catch (ValidateException $e) {
                // 验证失败 输出错误信息
                return json(['code'=>500,'msg'=>$e->getError()]);
            }
        }
        return View::fetch();
    }
//后端代码:图片上传接口
    public function layedit(){
       if(request()->isPost()){
         // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('file');
        try {
            // 使用验证器验证上传的文件
            validate(['file' => [
                // 限制文件大小(单位b),这里限制为4M
                'fileSize' => 4 * 1024 * 1024,
                // 限制文件后缀,多个后缀以英文逗号分割
                'fileExt'  => 'gif,jpg,png'
            ]])->check(['file' => $file]);
            // 上传到本地服务器
             $savename = \think\facade\Filesystem::disk('public')->putFile('img', $file);
             if($savename){
                // 拼接路径
                $path=\think\Facade\Filesystem::getDiskConfig('public', 'url').str_replace('\\', '/', $savename);
             }
             // echo $savename;
             return json(['code'=>0,'msg'=>'上传成功','data'=>['src'=>$path]]);
        } catch (think\exception\ValidateException $e) {
            // echo $e->getMessage();
            return json(['code'=>500,'msg'=>$e->getMessage()]);
        }
       }
       return View::fetch();
    }
 }


修改的时候可以采用赋值的形式:$(".content").html('{$message.content|htmlspecialchars_decode}'); //先赋值

【腾讯云】云产品采购季,助力行业复工。1核2G云服务器,首年99元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/268.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录

博主信息

头像

今天努力一点,知识一点点积累,谢谢那个曾经努力的自己!

职业:Web工程师

Email:2938039696@qq.com

学习交流群:简忆blogs技术群

项目合作:2938039696

置顶推荐

站点信息

1028运行天数

318文章数量

主题框架:Foundation5
网站地图:XML网站地图
微信公众号:扫码关注公众号
公众号

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×
×
×