{"id":3621,"date":"2022-10-13T22:40:29","date_gmt":"2022-10-13T13:40:29","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=3621"},"modified":"2024-01-12T19:45:08","modified_gmt":"2024-01-12T10:45:08","slug":"post-3621","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/3621","title":{"rendered":"CKEditor5(WYSIWYG\u30a8\u30c7\u30a3\u30bf)\u306b\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"

CKEditor5(\u30a6\u30a3\u30b8\u30a6\u30a3\u30b0\u30a8\u30c7\u30a3\u30bf)<\/a>\u306b\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u305f\u3044\u3002\u516c\u5f0f\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u30a2\u30c0\u30d7\u30bf<\/a>\u304c\u3042\u308b\u3082\u306e\u306e\u30b5\u30fc\u30d0\u306b\u30b3\u30cd\u30af\u30bf\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3089\u3057\u3044\u3002\u8a2d\u7f6e\u5148\u304c\u30ec\u30f3\u30bf\u30eb\u30b5\u30fc\u30d0\u3060\u3068\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308b\u306e\u3067\u7570\u306a\u308b\u65b9\u6cd5\u3067\u5b9f\u88c5\u3057\u305f\u3044\u3002\u4ee5\u4e0b\u306b\u5bfe\u5fdc\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\n

WYSIWYG\u30a8\u30c7\u30a3\u30bf\u5074<\/h3>\n
<html lang=\"ja\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n<title>CKEditor<\/title>\r\n<style>\r\n.ck-editor__editable_inline {\r\n    min-height: 200px;\r\n}\r\n<\/style>\r\n\r\n<\/head>\r\n<body>\r\n\r\n    <?php if( $_POST ){ ?>\r\n        <div>\u9001\u4fe1\u7d50\u679c:<\/div>\r\n        <pre><?php var_dump($_POST['editor']);?><\/pre>\r\n    <?php } ?>\r\n\r\n    <form action=\".\/index2.php\" method=\"post\">\r\n        <textarea name=\"editor\" id=\"editor\"><\/textarea><br>\r\n        <input type=\"submit\" value=\"\u9001\u4fe1\">\r\n    <\/form>\r\n\r\n    <script src=\"\/\/cdn.ckeditor.com\/ckeditor5\/33.0.0\/classic\/ckeditor.js\"><\/script>\r\n    <script src=\"\/\/cdn.ckeditor.com\/ckeditor5\/33.0.0\/classic\/translations\/ja.js\"><\/script>\r\n\r\n    <script>\r\n    ClassicEditor.create( document.querySelector( '#editor' ), {\r\n        language: 'ja',\r\n        ckfinder: {\r\n            uploadUrl: '.\/upload.php'\r\n        }\r\n    }).then( editor => {\r\n        console.log( editor );\r\n    }).catch( error => {\r\n        console.error( error );\r\n    });\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5074(upload.php)<\/h3>\n
<?php\r\ndo{\r\n\r\n    \/\/\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5148\u306e\u30d1\u30b9\r\n    $path = '\/var\/www\/html\/upload\/img\/';\r\n\r\n    \/\/\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5148\u306eURL\r\n    $url = 'https:\/\/hoge.com\/upload\/img\/';\r\n\r\n    $img = $_FILES['upload'];\r\n\r\n    if( !$img['size'] ){\r\n        $msg = '\u753b\u50cf\u304c\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002';\r\n        break;\r\n    }\r\n\r\n    $ext = $img['type'];\r\n    if ($ext == 'image\/jpeg' || $ext == 'image\/jpg') {\r\n        $tmp_ext = '.jpg';\r\n    } elseif ($ext == 'image\/png') {\r\n        $tmp_ext = '.png';\r\n    } elseif ($ext == 'image\/gif') {\r\n        $tmp_ext = '.gif';\r\n    } elseif ($ext == 'image\/webp') {\r\n        $tmp_ext = '.webp';\r\n    }\r\n\r\n    if( !$tmp_ext ){\r\n        $msg = 'jpg \/ png \/ gif \/ webp\u30d5\u30a1\u30a4\u30eb\u306e\u307f\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3044\u305f\u3060\u3051\u307e\u3059\u3002';\r\n        break;\r\n    }\r\n\r\n    $img_name = md5(uniqid(rand(), true)) . '_' . time() . $tmp_ext;\r\n\r\n    if( !move_uploaded_file($img['tmp_name'], $path . $img_name) ){\r\n        $msg = '\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002';\r\n        break;\r\n    }\r\n\r\n    $flg = true;\r\n\r\n}while(0);\r\n\r\nif( $msg ){\r\n    $response = array(\r\n        'uploaded' => false,\r\n        'error' => array(\r\n            'message' => $msg,\r\n        ),\r\n    );\r\n}else{\r\n    $response = array(\r\n        'url' => $url . $img_name, \r\n        'uploaded' => true,\r\n    );\r\n}\r\n\r\necho json_encode($response);<\/pre>\n
\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5148\u306e\u30d1\u30b9\u3068URL\u90e8\u5206\u306f\u9069\u5b9c\u5909\u66f4\u3059\u308b\u3002<\/p>\n
 <\/p>\n
\u53c2\u8003\u30b5\u30a4\u30c8<\/h2>\n
https:\/\/qiita.com\/sawadashota\/items\/984fa2c73dfd2062a1a4<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
CKEditor5(\u30a6\u30a3\u30b8\u30a6\u30a3\u30b0\u30a8\u30c7\u30a3\u30bf)\u306b\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u305f\u3044\u3002\u516c ... <\/p>\n","protected":false},"author":1,"featured_media":1067,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[86,91],"class_list":["post-3621","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-wysiwyg","tag-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t