ed
1.0.0
npm start
使用PROSEMIRROR與網格API的數據
演示：the-grid.github.io/ed/，帶固定裝置
該演示顯示了從Presemirror轉換為網格API JSON和Back的翻譯。
Prosemirror提供了一個基於高級模式的界面，用於與contenteditable互動，以照顧這種痛苦。 Ed專注於：
ED默認情況下公開了一個反應組件。
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，應用程序將獲得一個包含這些命令名稱鍵的對象。值將是以下字符串之一： 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 /
更改將觸發瀏覽器刷新。
插件是ES2015類，具有2種所需方法：
constructor (ed) {}獲取對主要ed引用，您可以在其中ed.pm.on('draw', ...)ed.pluginContainer.appendChild(...)teardown () {}應刪除所有聽眾和UI 小部件是用於編輯特定媒體類型的迷你編輯
在iframe中運行並通過郵政事間進行交流
示例：CED-代碼編輯的小部件
示例：WIP
style對象（示例）require('./component-name.css')樣式包括，但需要一些響應式hacks和Prosemirror替代由ESLINT使用npm test或npm run lint檢查的FEROSS標準
自動修復簡單的內容，例如尾隨空間： npm run lintfix
npm test
業力是在本地鉻和Firefox中進行測試的。
如果您設置了這些環境變量，則測試也將通過Browserstack在移動平台中運行：
BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY
npm run build
輸出kinized dist/ed.js和副本在package.json中定義的小部件。
npm version patch - 樣式調整，熱門修復
npm version minor - 添加功能，向後兼容的更改
npm version major - 刪除功能，不兼容的更改
這些快捷方式將運行測試，標籤，更改軟件包版本，並將更改和標籤推向GH。
然後，Travis將將新標籤發佈到NPM，並構建演示以發佈到GH頁面。
