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

2019年6月12日APICodePen

サイトやブログに掲載しているソースコードを運営者でも訪問者でもコピペなしの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の説明
privatefalse or true保存した時の公開・非公開
parent“"フォーク元になるPenのIDを指定、デフォルトは空
tags[“",""]Penのタグ
editors111最初に開くエデッターフレーム
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"

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

2019年6月12日APICodePen

Posted by Yousuke.U