ed
1.0.0
npm start
Grid APIのデータを使用してProsemirrorを使用します
デモ：grid.github.io/ed/、フィクスチャ
デモは、プロセミラーからグリッドAPI JSONおよびバックに翻訳することを示しています。
Prosemirrorは、そのcontenteditableに対処し、その痛みを処理するための高レベルのスキーマベースのインターフェイスを提供します。エドは次のことに焦点を当てています：
EDは、デフォルトでReactコンポーネントを公開します。
import Ed from '@the-grid/ed'
export default class PostEditor extends React . Component {
render ( ) {
return (
< Ed key = 'item-uuid' initialContent = { ... } onChange = { ... } ... / >
)
}
} ページにdist/build.jsを含めると、 window.TheGridEdが公開されます
< script src =' dist/build.js ' > </ script >このように使用できる{mountApp, unmountApp}ヘルパーメソッドがあります。
var container = document . querySelector ( '#ed' )
window . TheGridEd . mountApp ( container , {
// REQUIRED -- Content array from post
initialContent : [ ] ,
// OPTIONAL (default true) enable or disable the default menu
menuBar : true ,
// REQUIRED -- Hit on every change
onChange : function ( ) {
/* App can show "unsaved changes" in UI */
} ,
// REQUIRED
onShareFile : function ( index ) {
/* App triggers native file picker */
/* App calls ed.insertPlaceholders(index, count) and gets array of ids back */
/* App uploads files and sets status on placeholder blocks with ed.updateProgress */
/* On upload / measurement finishing, app replaces placeholder blocks with ed.setContent */
} ,
// REQUIRED
onRequestCoverUpload : function ( id ) {
/* Similar to onShareFile, but hit with block id instead of index */
/* App uploads files and sets status on blocks with ed.updateProgress */
/* Once upload is complete, app hits ed.setCoverSrc */
} ,
// REQUIRED
onShareUrl : function ( { block , url } ) {
/* Ed made the placeholder with block id */
/* App shares url with given block id */
/* App updates status on placeholder blocks with ed.updateProgress */
/* On share / measurement finishing, app replaces placeholder blocks with ed.setContent */
} ,
// REQUIRED
onPlaceholderCancel : function ( id ) {
/* Ed removed the placeholder if you call ed.getContent() now */
/* App should cancel the share or upload */
} ,
// OPTIONAL
onRequestLink : function ( value ) {
/*
If defined, Ed will _not_ show prompt for link
If selection is url-like, value will be the selected string
App can then call `ed.execCommand('link:toggle', {href, title})`
Note: If that is called while command 'link:toggle' is 'active', it will remove the link, not replace it
*/
} ,
// OPTIONAL
onDropFiles : function ( index , files ) {
/* App calls ed.insertPlaceholders(index, files.length) and gets array of ids back */
/* App uploads files and sets status on placeholder blocks with ed.updateProgress */
/* On upload / measurement finishing, app replaces placeholder blocks with ed.setContent */
} ,
// OPTIONAL
onDropFileOnBlock : function ( id , file ) {
/* App uploads files and sets status on block with ed.updateProgress */
/* Once upload is complete, app hits ed.setCoverSrc */
} ,
// OPTIONAL
onMount : function ( mounted ) {
/* Called once PM and widgets are mounted */
window . ed = mounted
} ,
// OPTIONAL
onCommandsChanged : function ( commands ) {
/* Object with commandName keys and one of inactive, active, disabled */
} ,
// OPTIONAL -- imgflo image proxy config
imgfloConfig : {
server : 'https://imgflo.herokuapp.com/' ,
key : 'key' ,
secret : 'secret'
} ,
// OPTIONAL -- where iframe widgets live relative to app (or absolute)
widgetPath : './node_modules/' ,
// OPTIONAL -- site-wide settings to allow cover filter, crop, overlay; default true
coverPrefs : {
filter : false ,
crop : true ,
overlay : true
} ,
// OPTIONAL -- site or user flags to reduce functionality
featureFlags : {
edCta : false ,
edEmbed : false
}
} )
// Returns array of inserted placeholder ids
ed . insertPlaceholders ( index , count )
// Update placeholder metadata
// {status (string), progress (number 0-100), failed (boolean)}
// metadata argument with {progress: null} will remove the progress bar
ed . updateProgress ( id , metadata )
// Once block cover upload completes
// `cover` is object with {src, width, height}
ed . setCover ( id , cover )
// For placeholder or media block with uploading cover
// `src` should be blob: or data: url of a
// sized preview of the local image
ed . setCoverPreview ( id , src )
// Returns content array
// Expensive, so best to debounce and not call this on every change
// Above the fold block is index 0, and starred
ed . getContent ( )
// Only inserts/updates placeholder blocks and converts placeholder blocks to media
ed . setContent ( contentArray )
// Returns true if command applies successfully with current selection
ed . execCommand ( commandName )デモ：./demo/demo.js
onCommandsChanged Propを使用すると、APPはこれらのCommandNameキーを含むオブジェクトを取得します。値は、これらの文字列の1つになります： inactive 、 active 、 disabled 、 flaggedています。
アプリはed.execCommand(commandName)でフォーマット /編集コマンドを適用できます
特別ケース： ed.execCommand('link:toggle', {href, title}) （タイトルオプション）現在の選択のリンクを設定します。
サポートされているcommandNameキー：
strong:toggle
em:toggle
link:toggle
paragraph:make
heading:make1
heading:make2
heading:make3
bullet_list:wrap
ordered_list:wrap
horizontal_rule:insert
lift
undo
redo
ed_upload_image
ed_add_code
ed_add_location
ed_add_userhtml
ed_add_cta
ed_add_quote
npm startおよび開きhttp：// localhost：8080/
開発モードでは、Webpackが /webpack /from memoryでターゲットを構築および提供します。
変更はブラウザの更新をトリガーします。
プラグインは、2つの必要な方法を備えたES2015クラスです。
constructor (ed) {}メインedへの参照を取得します。ed.pm.on('draw', ...)ed.pluginContainer.appendChild(...)のセットアップteardown () {} ウィジェットは、特定のメディアタイプを編集するために構築されたミニ編集者です
iframeで実行し、ポストメサージを介して通信します
例：CED-コード編集用のウィジェット
例：WIP
styleオブジェクト（例）require('./component-name.css')スタイルには含まれていますが、いくつかのレスポンシブハックやプロセミラーのオーバーライドに必要ですnpm testまたはnpm run lintを使用してESLINTによってチェックされたFeross Standard
トレーリングホワイトスペースのような簡単なものを自動的に修正するには： npm run lintfix
npm test
Karmaは、地元のChromeとFirefoxでテストを実行するように設定されています。
これらの環境変数が設定されている場合、テストはBrowserStackを介してモバイルプラットフォームでも実行されます。
BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY
npm run build
Minified Dist/Ed.jsとコピーWidgetsをPackage.JSONで定義しました。
npm version patch - スタイルの調整、ホットバグ修正
npm version minor - 機能の追加、後方互換の変更
npm version major - 機能の削除、非バックワード互換の変更
これらのショートカットは、テスト、タグ、パッケージバージョンの変更、変更とタグをGHにプッシュすることになります。
TravisはNPMに新しいタグを公開し、Demoを構築してGH-Pagesに公開します。
