CODEPENへソースをPOSTしてエデッターを開くAPI

2018年2月17日API

サイトやブログに掲載しているソースコードを運営者でも訪問者でもコピペなしの1クリックでWEBサービスの編集エデッターに移動できないか、と

CODEPENならありそうと思ったらありました


POST to Prefill Editors by CODEPEN

流石、しかもとっても簡単そう

フォームボタンからサクっと出来そうです

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input name="data" type="hidden" value="{&quot;title&quot;: &quot;やっほー&quot;, &quot;html&quot;: &quot;&lt;div&gt;やっほー!&lt;/div&gt;&quot;,&quot;css&quot;: &quot;div\{font-size:100px;\}&quot;}" />
<input type="submit" value="CODEPENで編集" /></form>

うむ、サクっとできましたね
フォームで送信する時のエスケープ用
php

htmlspecialchars($htmlsauce, ENT_QUOTES, 'UTF-8');

WEBツール
HTML特殊文字変換(自作)

オプション

オプション 値、デフォルト値など
title ”テキスト” 新しいPenのタイトル
description ”テキスト” Penの説明
private false or true 保存した時の公開・非公開
parent “” フォーク元になるPenのIDを指定、デフォルトは空
tags [“”,””] Penのタグ
editors 111 最初に開くエデッターフレーム
HTML、CSS、JSの順に0か1
layout “left” エデッターのレイアウト
top | left | right
html ”” エデッターに読み込むHTMLコード
html_pre_processor “none” HTMLの種類
“none”、”slim”、”haml”、”markdown”
css ”” エデッターに読み込むCSSコード
css_pre_processor “none” CSSの種類
none”、”less”、”scss”、”sass”、”stylus”
css_starter “normalize” ????
“normalize”、”reset”、”neither”
css_prefix “autoprefixer” ブラウザ互換の設定
ベンダープレフィックス、オートプリフィクサー
“autoprefixer”、”prefixfree”、”neither”
js ”” エデッターに読み込むJavaScriptコード
js_pre_processor “none” “none” 、 “coffeescript” 、 “babel” 、 “livescript” 、”typescript”
html_classes “loading” HTMLビュー読み込み時のloading文字
デフォルトで”loading”
head ”” head内に記述するべきコードや読み込みなど
css_external “https://~” 外部CSSファイル
js_external “https://~” 外部JSファイル
js_modernizr “false” JSモジュールの使用
js_library “jquery” 利用するJSライブラリ
“jquery”、”mootools”、”prototype”

ほむほむ、一通りの事を設定した上でエデッターを開く様に出来そうですね

2018年2月17日API

Posted by Yousuke.U