使用tinymce作为网站的编辑器的时候【版权所有，侵权必究】【作者：唐霜】，由于tinymce本身并不提供本地图片本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。上传（提供付费图片上传插件），所以我们需【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。要自己去集成这个功能。但是我在网上找了很本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net多资料，都没有完整且有效的实现方法，经过【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。对已有插件的研究，最终实现了这个功能。现【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】在记录下来，为今后参考。

1. 使用imageUpload插件【原创不易，请尊重版权】

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

imageUpload插件可以在【未经授权禁止转载】这里【关注微信公众号：wwwtangshuangnet】获取和了解。按照作者的意图，在使用本插件原创内容，盗版必究。【本文受版权保护】的时候，必须先加载iframe form【转载请注明来源】原创内容，盗版必究。 post插件，这个插件在这里下载【原创不易，请尊重版权】。【作者：唐霜】

但是iframe form post插件【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】的机制似乎出现了问题，导致我在使用时无法本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。正常使用imageUpload插件，所以【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】我选择了使用jquery.form.js未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。这个插件。

2.使用jquery.form.js插件

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

jquery.form.js并没有提交为未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】官方插件，你可以在这里【访问 www.tangshuang.net 获取更多精彩内容】下载下来。点击【转载请注明来源】这里本文作者：唐霜，转载请注明出处。进入插件的官方主页。【版权所有，侵权必究】

3.开始部署tinymce【版权所有】唐霜 www.tangshuang.net

说了这么多，到底怎么来实现tinymce【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】的本地上传图片功能呢？按照下方的方法一步本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。一步的操作即可。

1）集成tinymce原创内容，盗版必究。

也就是在你的HTML中先集成tinymc【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】e，并可以正常使用。具体集成方法就不说了著作权归作者所有，禁止商业用途转载。【转载请注明来源】。

2）载入jQuery.form.js著作权归作者所有，禁止商业用途转载。

在进行tinymce的某个实例化之前，要【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】载入jquery.form.js，你可以【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】直接在tinymce的js载入之后，立即【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。载入jquery.form.js。

3）把插件丢入tinymce的插件目录【未经授权禁止转载】

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

4）初始化时配好配置【原创内容，转载请注明出处】

在第一步中我们正常集成了tinymce，【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】说明你已经知道如何进行配置了。接下来你要【本文受版权保护】原创内容，盗版必究。让你的上传图标出现在编辑器工具栏中，并且本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】能够上传图片成功。

<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（初始化时载【作者：唐霜】【本文首发于唐霜的博客】入插件），toolbar中要添加imag【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。eupload（工具栏中出现上传图片按钮【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】），imageupload_url要设置【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】文件上传到哪一个URL（用php去接收$【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】_FILES[‘file&#未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。8217;]进行处理，比如上传、水印等）【作者：唐霜】未经授权，禁止复制转载。。

imageupload_url用来处理上本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。传好的图片，同时要返回一个json，让插【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。件知道上传是否成功。json格式在ima【本文首发于唐霜的博客】【本文首发于唐霜的博客】geUpload的github上已经有了【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。，如果成功的情况下，要返回：

{"error":false,"path":"http:\/\/www.mydomain.com\/myimage.jpg"}

这样子，上传成功后，就可以直接将图片插入【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】到该位置了。

2015-11-19 31789