ThinkphpはCKEditorリッチテキストエディターを使用しています

Ckeditorのダウンロードアドレス(標準パッケージバージョンをお勧めします):

http://ckeditor.com/download

1.ページにckeditorコアファイルckeditor.jsを導入します 

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

2.エディターを使用する場所にHTMLコントロールを挿入します

<textarea  id="content" name="content" cols="30" rows="2"></textarea>

3つ目は、対応するコントロールをエディターコードに置き換えます

<script type="text/javascript"
window.onload = function()
{
    CKEDITOR.replace( 'content');
};
</script>

第四に、編集者の画像アップロード機能を設定します

1.アップロードプレビューボックスのテキストを削除します

ckeditor /config.jsに追加します。

CKEDITOR.editorConfig = function( config ) {
//去掉图片上传预览区域显示的文字
config.image_previewText=' '; 
});

2.アップロード機能をオンにします(アップロード機能は非表示になっているため、オンにする必要があります)

ckeditor / plugins / image / dialogs / image.jsファイルで、次を検索します:id: "Upload"、hidden:!0!0falseに変更ます

3. ckeditor / config.jsで、バックエンドアップロード画像のパスを追加します。

//图片上传配置
config.filebrowserUploadUrl = '/admin/article/uploadPic';

5、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 '请选择要上传的图片';
		}

    }

 

おすすめ

転載: blog.csdn.net/qq15577969/article/details/115264791