ed
1.0.0
npm start
Usando Prosemirror com dados da API da grade
Demo: the-grid.github.io/ed/, com acessórios
A demonstração mostra tradução de Prosemirror para a API da Grid JSON e VOLTO.
O Prosemirror fornece uma interface baseada em esquema de alto nível para interagir com contenteditable , cuidando dessa dor. Ed está focado em:
ED expõe um componente REACT por padrão.
import Ed from '@the-grid/ed'
export default class PostEditor extends React . Component {
render ( ) {
return (
< Ed key = 'item-uuid' initialContent = { ... } onChange = { ... } ... / >
)
}
} Incluindo dist/build.js em sua página expõe window.TheGridEd
< script src =' dist/build.js ' > </ script > Existem métodos auxiliares {mountApp, unmountApp} disponíveis para usar assim:
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/demo.js
Com onCommandsChanged Prop, o aplicativo receberá um objeto que contém essas teclas de nome de comando. Os valores serão uma dessas seqüências: inactive , active , disabled , flagged .
Os aplicativos podem aplicar comandos de formatação / edição com ed.execCommand(commandName)
Caso especial: ed.execCommand('link:toggle', {href, title}) (título opcional) para definir o link da seleção atual.
Chaves de commandName suportadas:
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 e abrir http: // localhost: 8080/
No modo de desenvolvimento, o WebPack constrói e serve os alvos na memória de /webpack /
As alterações desencadearão uma atualização do navegador.
Os plugins são as classes ES2015 com 2 métodos necessários:
constructor (ed) {} recebe uma referência à ed principal, onde você podeed.pm.on('draw', ...)ed.pluginContainer.appendChild(...)teardown () {} onde todos os ouvintes e interface do usuário devem ser removidos Widgets são mini-editores construídos para editar tipos de mídia específicos
Executar no iframe e comunicar -se via pós -maquiagem
Exemplo: CED - Widget para edição de código
Exemplo: WIP
style JS inlinados (exemplo)require('./component-name.css') o estilo inclui, mas necessário para alguns hacks responsivos e substituições do prosemirror Feross Standard verificado por ESLint com npm test ou npm run lint
Para corrigir automaticamente coisas fáceis, como o espaço de branco à direita: npm run lintfix
npm test
O karma está configurado para executar testes no Chrome local e no Firefox.
Os testes também serão executados em plataformas móveis via BrowSerstack, se você tiver essas variáveis de ambiente configuradas:
BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY
npm run build
Saídas Minified Dist/Ed.js e Widgets de cópias definidas no package.json.
npm version patch - ajustes de estilo, correções de bugs quentes
npm version minor - Adicionando recursos, alterações compatíveis com versões anteriores
npm version major -Remoção de recursos, alterações não compatíveis com backwards
Esses atalhos executarão testes, tag, alteram a versão do pacote e pressionam as alterações e as tags para o GH.
Travis publicará novas tags no NPM e criará a demonstração para publicar no GH-Pages.
