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页面。
