CKEditor是非常经典的一款富文本编辑器。最近项目中用到了,但是图片上传功能未打通,三天各种资料查询研究,终于搞清楚怎么打通。
1、未打通时点击富文本编辑器图片栏时,是没有上传的tab栏的。此刻需要做以下操作:在ckeditor/plugins/image/dialogs/image.js中查找id:"Upload",hidden:!0,改为id:"Upload",hidden:false。奇迹就出现了!!!上传tab栏出现。
2、接下来选择文件,挑选一张图片,确定,上传到服务器,此刻需要配置上传服务器这一步,找到config.js文件最后添加一行代码:config.filebrowserImageUploadUrl = 图片上传到服务器的接口;
然后后台是Php,需要做一下操作,我所写的示例是仿照java做的,因此贴出Java代码,都是相通的。
也就是说在点击上传到服务器后,Php后台要返回<script> window.parent.CKEDITOR.tools.callFuntion()。。。。。。等等,imageContextPath是图片在服务器地址,设置后在本地调会出现跨域的问题如下:
一运行就卡死在这里了,还以为自己的配置有问题,经研究是跨域问题,于是把项目放在与上传图片接口图一域名下就一切正常了。
只是上传图片点击上传到服务器之后自动调到了图像信息tab栏,拿到的预览图和上传的不一致,于是让后台又调了下返回的图片就好了。
主要是前后端相互配合好,这个操作就是相当简单的。有问题可以随时扣我。