美文网首页
超简单!使用百度UEditor编辑器插件提交文本以及图片上传的使

超简单!使用百度UEditor编辑器插件提交文本以及图片上传的使

作者: easonR | 来源:发表于2018-11-05 17:25 被阅读0次

相关地址:

准备工作:

由于后台暂时只需要发布文字和图片2项功能,
也是第一次使用,所以只简单记录一下这两项功能的使用。

我们用的是PHP,此链接是我自己存放此插件的路径:
https://img.haomeiwen.com/i2078961/d9039e20e122dfd9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

1.引入js
<script type="text/javascript" charset="utf-8" src="/Public/admin/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/admin/ueditor.all.min.js"> </script>
2.html
<form action="URL" method="post">
    <!--实例化-->
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    <input type="submit" value="提交">
</form>

至此,一般情况下,就可以提交文本了!

3.js相关配置:

//config.json 文件

/* 上传图片配置项 */
    //...
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/xxx/Public/img/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
此处主要配置 “ imagePathFormat ” ,一定要写对哦!!!!!

作用:指定文件上传路径和返回路径。--> 官网详细介绍请移步
说白了,在点击submit提交按钮后,会在此目录下自动生成一个以日期为名的文件夹存放上传的图片。

大写的注意(也是当时折磨我的问题):

此处配置好后,检查好项目权限问题,否则提交时可能会导致,“创建目录失败”!

好了,可以在后台(TP3.2)IndexController.class.php文件打印一下from表单提交的内容,
提交后就可以在浏览器看到打印结果了

public function Name()
    {
        print_r($_POST);die;
    }

之后,项目上线后,问题又出现了。。。
再次备注一下路径问题:

下方 “myProject” 为 项目根文件夹

"imageUrlPrefix": "/myProject", /* 图片访问路径前缀 */
"imagePathFormat": "/myProject/{yyyy}{mm}{dd}/{time}{rand:6}",

如果你myProject下只有图片,可以按上面说的设置
如果myProject下除了图片还有其他类型的文件,建议多加一层
"imageUrlPrefix": "/myProject",
"imagePathFormat": "/myProject/img/{yyyy}{mm}{dd}/{time}{rand:6}",

简单介绍完毕,后续发现新问题再更新。。。

相关文章

  • 超简单!使用百度UEditor编辑器插件提交文本以及图片上传的使

    相关地址: 官网 下载地址 官方文档 准备工作: 由于后台暂时只需要发布文字和图片2项功能,也是第一次使用,所以只...

  • 仿微信公众号富文本编辑器

    微信公众号富文本编辑器使用百度ueditor插件为基础加以封装 百度ueditor配置提供替换皮肤,只要添加相应的...

  • 工具集合

    富文本编辑器 UEditor百度提供的开源和免费的插件

  • springboot集成ueditor

    ueditor ueditor是百度开源的富文本编辑器。使用教程可以参考官网。ueditor JPS版下载地址 S...

  • 百度ueditor富文本 单图上传iframe跨域问题

    最近在使用百度ueditor富文本编辑器,由于是一个前后端分离的项目,并且需要使用单图上传的功能,所以不可避免的会...

  • 百度富文本ueditor

    关于百度富文本使用备忘Vue 项目使用这个插件 vue-ueditor-wrap需要将 https://gitee...

  • 常用编辑器大全

    一、富文本编辑器 1、UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有...

  • 关于富文本markdown编辑器

    几种知名开源富文本编辑器记录和对比(仅供参考) 1、UEditor 百度的。 优点:插件多,基本满足各种需求,类似...

  • 富文本编辑器

    几种知名开源富文本编辑器记录和对比(仅供参考) 1、UEditor 百度的。 优点:插件多,基本满足各种需求,类似...

  • 富文本插件ueditor的使用

    在后台编辑页中经常要用到富文本编辑器,比较常用的就是百度的开源插件ueditor,为了快速,没有看文档,直接百度,...

网友评论

      本文标题:超简单!使用百度UEditor编辑器插件提交文本以及图片上传的使

      本文链接:https://www.haomeiwen.com/subject/vsisxqtx.html