tinymce图片上传

首先在官网查看载入tinymace的方法,官网有详细的记载。

header的代码借鉴了https://www.douban.com/note/520260653/的代码。修改了一下,

tinymce.init({
            selector: '#mytextarea',
            height: 500,
            menubar: false,
            imageupload_url: '/misc/images/articleimages',
            plugins: [
                'advlist autolink lists link image imagetools charmap print preview anchor textcolor imageupload',
                'searchreplace visualblocks code fullscreen ',
                'insertdatetime media table contextmenu paste code help wordcount'
            ],
            toolbar: 'preview link code insertdatetime  charmap | media  image | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent  | removeformat | help',

            convert_urls: false,


            images_upload_credentials: true,
            images_upload_handler: function s(e, t, n) {
                var o_n = n;
                n = function (s) {
                    window.alert(s);
                    o_n(s);
                }
                var a, s, i = function(e){
                    var t,n;
                    return n={
                        "image/jpeg":"jpg",
                        "image/jpg":"jpg",
                        "image/gif":"gif",
                        "image/png":"png"
                    },
                        t=n[e.blob().type.toLowerCase()]||"dat",e.id()+"."+t
                };
                a = new XMLHttpRequest,
                    //填写postAcceptor的地址
                    a.open("POST", "/misc/tinymce/postAcceptor.php"),
                    a.withCredentials = true,
                    a.onload = function() {
                        var e, o = function(e, t) {
                            return e ? e.replace(/\/$/, "") + "/" + t.replace(/^\//, "") : t
                        };
                        return 200 != a.status ? void n(a.responseText) : (e = JSON.parse(a.responseText),e && "string" == typeof e.location ? void t(o("/", e.location)) : void n("Invalid JSON: " + a.responseText))
                    },
                    s = new FormData,
                    //填写图片存放的目录地址
                    s.append("misc/tinymce/images/articleimages", e.blob(), i(e)),
                    a.send(s)
            },

            content_css: [
                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                '//www.tinymce.com/css/codepen.min.css']
        });

下面为postAcceptor的代码

 $filetowrite2));
} else {
    // Notify editor that the upload failed
    header("HTTP/1.1 500 Server Error");
}
其中要注意, $imageFolder的地址只能在postacceptor.php的根目录下。后面到json_encode的时候可以更改到想要的目录,在界面上显示的就是这个目录啦,非常方便的插件,虽然官方代码还是错的,踩了好多坑。。。。。

你可能感兴趣的:(tinymace)