tinymce上传本地图片的实现:imageUpload + jquery.form.js

广告位招租
扫码页面底部二维码联系

使用tinymce作为网站的编辑器的时候著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。,由于tinymce本身并不提供本地图片【转载请注明来源】【版权所有,侵权必究】上传(提供付费图片上传插件),所以我们需【本文受版权保护】【本文首发于唐霜的博客】要自己去集成这个功能。但是我在网上找了很【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。多资料,都没有完整且有效的实现方法,经过【作者:唐霜】未经授权,禁止复制转载。对已有插件的研究,最终实现了这个功能。现【原创内容,转载请注明出处】未经授权,禁止复制转载。在记录下来,为今后参考。

【原创不易,请尊重版权】【版权所有,侵权必究】

1. 使用imageUpload插件

【作者:唐霜】【原创不易,请尊重版权】

tinymce拥有完备的插件体系,就像W【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。ordPress一样,tinymce本身【转载请注明来源】未经授权,禁止复制转载。就提供了一些核心插件,例如字体样式等,虽【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】然都是编辑器的核心功能,但是仍然是通过插【转载请注明来源】转载请注明出处:www.tangshuang.net件实现的。它不提供图片上传功能,它的图片本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】只能引用网络图片。所以我们可以通过插件的【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】形式来实现这个功能。

未经授权,禁止复制转载。原创内容,盗版必究。【本文受版权保护】

imageUpload插件可以在这里获取和了解。按照作者的意图,在使用本插件【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】的时候,必须先加载iframe form【关注微信公众号:wwwtangshuangnet】【转载请注明来源】 post插件,这个插件在这里下载

【原创内容,转载请注明出处】【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】et 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。

但是iframe form post插件本文版权归作者所有,未经授权不得转载。【作者:唐霜】的机制似乎出现了问题,导致我在使用时无法【作者:唐霜】【版权所有,侵权必究】正常使用imageUpload插件,所以【转载请注明来源】【原创不易,请尊重版权】我选择了使用jquery.form.js【本文受版权保护】著作权归作者所有,禁止商业用途转载。这个插件。

【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】ang.net【转载请注明来源】

2.使用jquery.form.js插件

未经授权,禁止复制转载。【本文受版权保护】【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。ngnet】【作者:唐霜】

jquery非常漂亮的封装了ajax,但本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】是在进行表单提交的时候,特别是在上传图片未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。的时候,就会出现问题,[type=fil【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】e]无法被提交。而通过jquery.fo【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。rm.js插件,就可以很好的解决这个问题【本文受版权保护】【原创内容,转载请注明出处】

【作者:唐霜】未经授权,禁止复制转载。【作者:唐霜】【转载请注明来源】

jquery.form.js并没有提交为本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。官方插件,你可以在这里下载下来。点击这里进入插件的官方主页。

【未经授权禁止转载】【本文首发于唐霜的博客】

3.开始部署tinymce

原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】【本文受版权保护】

说了这么多,到底怎么来实现tinymce转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。的本地上传图片功能呢?按照下方的方法一步本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】一步的操作即可。

【原创内容,转载请注明出处】【本文受版权保护】【本文首发于唐霜的博客】

1)集成tinymce

【版权所有】唐霜 www.tangshu【作者:唐霜】【本文受版权保护】ang.net【作者:唐霜】【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】未经授权,禁止复制转载。ang.net原创内容,盗版必究。

也就是在你的HTML中先集成tinymc未经授权,禁止复制转载。转载请注明出处:www.tangshuang.nete,并可以正常使用。具体集成方法就不说了【本文首发于唐霜的博客】【原创不易,请尊重版权】

【作者:唐霜】本文版权归作者所有,未经授权不得转载。

2)载入jQuery.form.js

未经授权,禁止复制转载。转载请注明出处:www.tangshua【未经授权禁止转载】【原创不易,请尊重版权】ng.net【未经授权禁止转载】本文作者:唐霜,转载请注明出处。

在进行tinymce的某个实例化之前,要本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】载入jquery.form.js,你可以【转载请注明来源】【关注微信公众号:wwwtangshuangnet】直接在tinymce的js载入之后,立即本文作者:唐霜,转载请注明出处。【本文受版权保护】载入jquery.form.js。

著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.netng.net

3)把插件丢入tinymce的插件目录

著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】

上面说过了,我们对imageUpload【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】插件进行了改造,点击这里下载我改造过的插件(jquery.for【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netm.js也在这里面)。下载之后,解压出i未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。mageupload目录,把这个目录直接【本文首发于唐霜的博客】【转载请注明来源】丢在tinymce的插件目录(tinym著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。ce/plugins)下。

原创内容,盗版必究。转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】ng.net本文版权归作者所有,未经授权不得转载。

4)初始化时配好配置

【转载请注明来源】【未经授权禁止转载】未经授权,禁止复制转载。【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】

在第一步中我们正常集成了tinymce,【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。说明你已经知道如何进行配置了。接下来你要本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】让你的上传图标出现在编辑器工具栏中,并且本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。能够上传图片成功。

【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】ngnet】【版权所有】唐霜 www.tangshu【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。ang.net【版权所有,侵权必究】【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】
<script>
  tinymce.init({
    selector: "#detail",
    language : "zh_CN",
    language_url : "__ASSETS__/TinymceEditor/langs/zh_CN.js", // 语言包,需要到官网去下载,你也可以不使用中文语言包
    menubar: false,
    convert_urls: false,
    height: 450,
    plugins: [
      "link imageupload"
    ],
    toolbar: "undo redo | imageupload link | bold italic | alignleft aligncenter alignright alignjustify",
    imageupload_url: '{:U("File/uploadPicture")}'
  });
</script>

要注意上面三个地方,一个是plugins【作者:唐霜】【关注微信公众号:wwwtangshuangnet】中添加imageupload(初始化时载转载请注明出处:www.tangshuang.net【未经授权禁止转载】入插件),toolbar中要添加imag【原创不易,请尊重版权】【未经授权禁止转载】eupload(工具栏中出现上传图片按钮【作者:唐霜】【本文首发于唐霜的博客】),imageupload_url要设置本文版权归作者所有,未经授权不得转载。【本文受版权保护】文件上传到哪一个URL(用php去接收$【未经授权禁止转载】【本文受版权保护】_FILES[‘file&#未经授权,禁止复制转载。未经授权,禁止复制转载。8217;]进行处理,比如上传、水印等)原创内容,盗版必究。转载请注明出处:www.tangshuang.net

【访问 www.tangshuang.n【本文受版权保护】【本文受版权保护】et 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。

imageupload_url用来处理上【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】传好的图片,同时要返回一个json,让插【版权所有,侵权必究】原创内容,盗版必究。件知道上传是否成功。json格式在ima【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.netgeUpload的github上已经有了本文作者:唐霜,转载请注明出处。原创内容,盗版必究。,如果成功的情况下,要返回:

【原创内容,转载请注明出处】未经授权,禁止复制转载。
{"error":false,"path":"http:\/\/www.mydomain.com\/myimage.jpg"}

这样子,上传成功后,就可以直接将图片插入转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】到该位置了。

未经授权,禁止复制转载。【作者:唐霜】未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。

2015-11-19 32268

为价值买单,打赏一杯咖啡

本文价值322.68RMB
已有18条评论
  1. WRZ 2019-07-26 11:57

    你好,请教一下,为什么按照你上面的方式 提示imageupload初始化失败了

    • 否子戈 2019-07-27 12:07

      注意路径

      • WRZ 2019-07-27 12:14

        大佬 :
            imageupload_url: ‘{:U(“File/uploadPicture”)}’   这个路径是什么文件路径啊

        • 否子戈 2019-07-27 12:38

          后台路径

          • WRZ 2019-07-27 12:39

            是存放图片文件夹地址的路径吗

          • 否子戈 2019-07-27 12:41

            你后台接收上传图片的路径

  2. 老衲法号小学生 2017-03-02 18:03

    博主我有个问题,为什么点了那个上传图标后弹出的那个窗口特别小,应该修改下哪里?还有选择上传图片或者文件显示先传错误是因为什么?必须写后台才能上传吗?

    • 否子戈 2017-03-03 20:38

      上传窗口是它自己的,我也不知道,上传错误肯定是前后端结合有问题,你要通过调试工具慢慢查一下原因

    • sky 2017-04-13 11:05

      请问一下上传图片的弹窗特别小你找到原因了吗?重新设置了对应的高宽也没变化呢

      • 否子戈 2017-04-13 19:48

        我不是很清楚你说的这个弹窗特别小是什么意思,没有遇到过,你可能需要自己慢慢调试。

      • 阿水 2017-06-12 20:49

        弹窗很小的问题,在这里能找到解决方案 http://www.cnblogs.com/hzj680539/p/5715489.html

        • 否子戈 2017-06-13 16:47

          非常感谢补充,希望其他同学可以看到!

  3. 小鱼博客 2016-12-22 18:32

    感谢博主,前端都没有问题,正在写后端,写好以后测试看

  4. sophone 2016-09-06 15:46

    下载了修改后的插件  放入到plugins中 并且在tinyMCE.init中分别添加了convert_urls   plugins toolbar imageupload_url   但编辑器中并未显示图片上传按钮,请指点,谢谢

    • 否子戈 2016-09-06 21:01

      使用控制台查看报错,贴上错误信息

      • sophone 2016-09-07 10:11

        程序正常运行  启动后也没有报错  可以正常访问 就是imageupload没有加载  通过chrome浏览器去查看加载的所有js文件中也没有发现imageupload.js插件

      • sophone 2016-09-07 10:19

        现在从chrome浏览器中已经看到该js插件被加载 但是编辑器中依然没有图标可以点击上传

      • sophone 2016-09-07 11:14

        补充:JS加载了 但图标没出来  我使用的是django1.10环境 是否应该将css  img文件放到static路径下?