Dirección de descarga de Ckeditor (se recomienda la versión del paquete estándar):
http://ckeditor.com/download
1. Introduzca el archivo principal de ckeditor ckeditor.js en la página.
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2. Inserta controles HTML donde uses el editor.
<textarea id="content" name="content" cols="30" rows="2"></textarea>
Tres, reemplace el control correspondiente con el código del editor
<script type="text/javascript"
window.onload = function()
{
CKEDITOR.replace( 'content');
};
</script>
En cuarto lugar, configure la función de carga de imágenes del editor.
1. Elimina el texto del cuadro de vista previa de carga.
Agregue ckeditor / config.js:
CKEDITOR.editorConfig = function( config ) {
//去掉图片上传预览区域显示的文字
config.image_previewText=' ';
});
2. Active la función de carga (la función de carga está oculta, por lo que debe activarse)
En el archivo ckeditor / plugins / image / dialogs / image.js, busque: id: "Upload", hidden :! 0 , change ! 0 to false
3. En ckeditor / config.js, agregue la ruta de la imagen de carga de back-end:
//图片上传配置
config.filebrowserUploadUrl = '/admin/article/uploadPic';
Cinco, método de carga de archivos back-end de thinkphp
/**
* @name='上传图片'
*/
public function uploadPic()
{
$file = request()->file('upload');
if($file){
$uploadtype="jpg,png,gif,jpeg";
//限制只能上传2MB图片
$path=ROOT_PATH . 'public' . DS . 'uploads';
$info = $file->rule(function(){return md5(microtime(true));})->validate(['size'=>1024*1024*2,'ext'=>$uploadtype])->move($path);
if($info){
$img =request()->domain().'/uploads/'.$info->getSaveName();
$callback = $_REQUEST["CKEditorFuncNum"];
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($callback,'".$img."','');</script>";
}else{
echo '上传失败,请检查文件类型是否允许上传';
}
}else{
echo '请选择要上传的图片';
}
}