ed
1.0.0
npm start
Verwendung von Prosemirror mit Daten aus der Grid -API
Demo: the-grid.github.io/ed/, mit Fixture
Die Demo zeigt, dass sie von Prosemirror in die Raster -Api -Json und zurück übersetzen.
Prosemirror bietet eine hochrangige schema-basierte Schnittstelle für die Interaktion mit contenteditable und kümmert sich um diesen Schmerz. Ed konzentriert sich auf:
ED enthält standardmäßig eine React -Komponente.
import Ed from '@the-grid/ed'
export default class PostEditor extends React . Component {
render ( ) {
return (
< Ed key = 'item-uuid' initialContent = { ... } onChange = { ... } ... / >
)
}
} Einschließlich dist/build.js in Ihrer Seite enthüllt window.TheGridEd
< script src =' dist/build.js ' > </ script > Es gibt {mountApp, unmountApp} Helfer -Methoden, die wie folgt verwendet werden:
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
Mit onCommandsChanged Prop erhält App ein Objekt, das diese Befehlsnamenschlüssel enthält. Werte werden einer dieser Zeichenfolgen sein: inactive , active , disabled , flagged .
Apps können mit ed.execCommand(commandName) Formatierungs- / Bearbeitungsbefehle anwenden.
Sonderfall: ed.execCommand('link:toggle', {href, title}) (Titel optional), um den Link der aktuellen Auswahl festzulegen.
Unterstützte 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 und Öffnen Sie http: // localhost: 8080/
Im Entwicklungsmodus baut und dient Webpack die Ziele im Speicher von /webpack /dient
Änderungen auslösen eine Browser -Aktualisierung.
Plugins sind ES2015 -Klassen mit 2 erforderlichen Methoden:
constructor (ed) {} erhält einen Verweis auf die ed , wo Sie könnened.pm.on('draw', ...)ed.pluginContainer.appendChild(...)teardown () {} wo alle Zuhörer und UI entfernt werden sollten Widgets sind Mini-Editoren, die zum Bearbeiten bestimmter Medientypen erstellt wurden
Laufen Sie in Iframe und kommunizieren Sie sie per Postmessage
Beispiel: CED - Widget für die Codebearbeitung
Beispiel: WIP
style (Beispiel)require('./component-name.css') Style beinhaltet, aber für einige reaktionsschnelle Hacks und Prosemrror-Überschreibungen benötigt, aber benötigt npm test npm run lint
Um automatisch einfache Dinge wie Trailing Whitespace zu beheben: npm run lintfix
npm test
Karma ist eingerichtet, um Tests in lokalem Chrom und Firefox durchzuführen.
Tests werden auch in mobilen Plattformen über BrowsStack ausgeführt, wenn Sie diese Umgebungsvariablen einrichten:
BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY
npm run build
Ausgänge minimiert dist/ed.js und kopiert Widgets, die in package.json definiert sind.
npm version patch - Stil -Optimierungen, heiße Fehlerbehebungen
npm version minor - Hinzufügen von Funktionen, rückwärtskompatible Änderungen
npm version major -Entfernen von Funktionen, nicht rückwärtskompatible Änderungen
Diese Verknüpfungen werden Tests ausführen, Tags ändern, die Paketversion ändern und Änderungen und Tags nach GH drücken.
Travis wird dann neue Tags an NPM veröffentlichen und die Demo für die Veröffentlichung auf GH-Seiten erstellen.
