tinymce编辑器上传图片插件配置

使用tinymce作为网站的编辑器的时候,由于tinymce本身并不提供本地图片上传(提供付费图片上传插件),所以我们需要自己去集成这个功能。但是我在网上找了很多资料,都没有完整且有效的实现方法,经过对已有插件的研究,最终实现了这个功能。现在记录下来,为今后参考。


1. 使用imageUpload插件


tinymce拥有完备的插件体系,就像WordPress一样,tinymce本身就提供了一些核心插件,例如字体样式等,虽然都是编辑器的核心功能,但是仍然是通过插件实现的。它不提供图片上传功能,它的图片只能引用网络图片。所以我们可以通过插件的形式来实现这个功能。


imageUpload插件可以在这里获取和了解。按照作者的意图,在使用本插件的时候,必须先加载iframe form post插件,这个插件在这里下载。


但是iframe form post插件的机制似乎出现了问题,导致我在使用时无法正常使用imageUpload插件,所以我选择了使用jquery.form.js这个插件。


2.使用jquery.form.js插件


jquery非常漂亮的封装了ajax,但是在进行表单提交的时候,特别是在上传图片的时候,就会出现问题,[type=file]无法被提交。而通过jquery.form.js插件,就可以很好的解决这个问题。


jquery.form.js并没有提交为官方插件,你可以在这里下载下来。点击这里进入插件的官方主页。


3.开始部署tinymce


说了这么多,到底怎么来实现tinymce的本地上传图片功能呢?按照下方的方法一步一步的操作即可。


1)集成tinymce


也就是在你的HTML中先集成tinymce,并可以正常使用。具体集成方法就不说了。


2)载入jQuery.form.js


在进行tinymce的某个实例化之前,要载入jquery.form.js,你可以直接在tinymce的js载入之后,立即载入jquery.form.js。


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


上面说过了,我们对imageUpload插件进行了改造,点击这里下载我改造过的插件(jquery.form.js也在这里面)。下载之后,解压出imageupload目录,把这个目录直接丢在tinymce的插件目录(tinymce/plugins)下。


4)初始化时配好配置


在第一步中我们正常集成了tinymce,说明你已经知道如何进行配置了。接下来你要让你的上传图标出现在编辑器工具栏中,并且能够上传图片成功。


<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中添加imageupload(初始化时载入插件),toolbar中要添加imageupload(工具栏中出现上传图片按钮),imageupload_url要设置文件上传到哪一个URL(用php去接收$_FILES['file']进行处理,比如上传、水印等)。


imageupload_url用来处理上传好的图片,同时要返回一个json,让插件知道上传是否成功。json格式在imageUpload的github上已经有了,如果成功的情况下,要返回:


{"error":false,"path":"http:\/\/www.mydomain.com\/myimage.jpg"}
这样子,上传成功后,就可以直接将图片插入到该位置了。

有话要说