• 技术文章 >php框架 >ThinkPHP

    thinkphp富文本编辑器如何实现上传图片

    VV2019-09-11 17:51:19原创76

    thinkphp富文本编辑器实现上传图片的方法步骤为:

    1、首先,实现文章发布或编辑的form表单,初始化layui富文本编辑器,效果如下:文章发布表单对应的HTML代码如下:

    1568194555(1).jpg

    1568194616(1).jpg

    2其中是layedit的目标元素,建立编辑器以及表单提交的js代码如下:

    实现layedit插入图片接口需要在建立编辑器之前配置uploadImage,本例中配置代码如上图JS代码所示。

    thinkphp上传-2.jpg

    3、layedit不提供服务端的图片接受,需要我们在接口中实现,图片上传成功后返回指定格式的JSON信息,格式如下:

    {
        "code": 0, //0表示成功,其它失败
        "msg": "", //提示信息 //一般上传失败后返回
        "data": {
            "src": "图片路径",
            "title": "图片名称" //可选
        }
    }

    thinkphp上传-3.jpg

    4、本例中用thinkPHP5实现编辑器插入图片接口的代码如下:

    我创建了一个资源上传的控制器,专门用来处理文件上传相关业务,其中有关thinkPHP5上传文件的代码请参考TP的官方文档,这里不做过多解释。

    thinkphp上传-4.jpg

    5、然后,发布一篇科技互联网新闻,演示一下效果。

    在第一段后面添加一张图片,提交后效果如下:

    thinkphp上传-5.jpg

    以上内容仅供参考!

    推荐教程:thinkphp教程

    以上就是thinkphp富文本编辑器如何实现上传图片的详细内容,更多请关注php中文网其它相关文章!

    phpstudy集成环境下载
    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:thinkphp 富文本编辑器 上传
    上一篇:thinkphp的模型,控制器,视图,是什么 下一篇:thinkphp钩子是什么意思

    相关文章推荐

    • ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法,_PHP教程• 富文本编辑器 - 关于symfony中读取web/bundles路径下php文件的问题• 富文本编辑器 - php接收富文本时a标签的 target="_blank"会被过滤掉??• 富文本编辑器的介绍

    全部评论我要评论

  • Null

    阿萨德群无若群无若无群若无群若

    2019-09-12

  • Null

    阿萨德群无若群无若无群若无群若

    2019-09-12

  • Null

    阿萨德群无若群无若无群若无群若

    2019-09-12

  • 取消发布评论发送
  • 1/1

    PHP中文网