首先在官网查看载入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的时候可以更改到想要的目录,在界面上显示的就是这个目录啦,非常方便的插件,虽然官方代码还是错的,踩了好多坑。。。。。