分享ckedit的使用。直接码出来 <input type="hidden" name="id" id="id" value="<?php echo $data['id'];?>"> <div style="display:none" > <textarea id="data"><?php echo $data['content'];?></textarea> </div> 此处是html的ckedit的id,下面我加了一个隐藏内容,后面做数据填充,大家可以忽略. 重点是js配置 CKEDITOR.editorConfig = function( config ) { config.language = 'zh-cn'; // 设置宽高 config.width = 800; config.height = 300; //改变大小的最小宽度 config.resize_minWidth = 750; }; //获取数据 var data = $("#data").val(); var ck = CKEDITOR.replace('content',{ //图片上传 filebrowserImageUploadUrl : '/admin/basic/basic/uploadImage' }); ck.setData(data); 这里只是简单的用来默认配置,此处要对主要,图片上传路径。由于我用的是七牛的上传空间,没有在本地保存,所以没有设置本地路径。如果你用的是本地图片上传。需要设置一下图片路径。同时注意上传图片的路径权限问题。 下面是重点:后端 public function uploadImageAction() { $callback =$this->request->get("CKEditorFuncNum"); $file = $this->request->getUploadedFiles()[0]; $image_url = EFUserAPI::uploadpicture( $file->getTempName(), $file->getType(), $file->getName()); $image = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($callback,'".$image_url['url']."','');</script>"; return $this->response->setContent($image); } 第一个注意的是callback这个是回调函数的id,直接从get方法获取,或者用$_REQUEST[‘CKEditorFuncNum’];直接读取这个数字id。这个是ckedit返回给后端的。图片上传到七牛后,获取到返回的图片url 这个时候需要返回给前端ckedit一个js,而不是内容。不懂的直接复制这个内容"<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($callback,'".$image_url['url']."','');</script>";这个会在ckedit解析到图片信息里,自动填充。由于官方js是压缩的,内部东西还没看,简单的使用了一下。后面继续学习ckedit。 (责任编辑:最模板) |