标签:
分享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。
标签:
原文地址:http://www.cnblogs.com/erick-x/p/5560936.html