ed

npm start

ed

Menggunakan prosemirror dengan data dari grid API

Demo: the-git.github.io/ed/, dengan fixture

Demo menunjukkan yang diterjemahkan dari prosemirror ke grid API Json dan kembali.

tujuan

Prosemirror menyediakan antarmuka berbasis skema tingkat tinggi untuk berinteraksi dengan contenteditable , mengurus rasa sakit itu. ED berfokus pada:

• Skema untuk diterjemahkan antara data API grid dan tipe dokumen prosemirror
• Widget Koordinasi (Editor Blok Khusus berdasarkan Jenis) (Contoh)

menggunakan

Menggunakan sebagai komponen reaksi ⚛

ED mengekspos komponen bereaksi secara default.

 import Ed from '@the-grid/ed'

export default class PostEditor extends React . Component {
  render ( ) {
    return (
      < Ed key = 'item-uuid' initialContent = { ... } onChange = { ... } ... / >
    )
  }
} 

Menggunakan sebagai perpustakaan yang berdiri sendiri di iframe atau yang serupa

Termasuk dist/build.js di halaman Anda Exposes window.TheGridEd

 < script src =' dist/build.js ' > </ script >

Ada {mountApp, unmountApp} Metode penolong yang tersedia untuk digunakan seperti ini:

  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

perintah

Dengan prop onCommandsChanged , App akan mendapatkan objek yang berisi kunci nama komando ini. Nilai akan menjadi salah satu string ini: inactive , active , disabled , flagged .

Aplikasi dapat menerapkan perintah pemformatan / pengeditan dengan ed.execCommand(commandName)

Kasus Khusus: ed.execCommand('link:toggle', {href, title}) (judul opsional) untuk mengatur tautan seleksi saat ini.

Kunci commandName yang Didukung:

 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

dev

server

npm start dan buka http: // localhost: 8080/

Dalam mode pengembangan, Webpack membangun dan menyajikan target dalam memori dari /Webpack /

Perubahan akan memicu penyegaran browser.

plugin

Plugin adalah kelas ES2015 dengan 2 metode yang diperlukan:

• constructor (ed) {} mendapat referensi ke ed utama, di mana Anda bisa
  • Dengarkan acara PM: ed.pm.on('draw', ...)
  • dan mengatur UI: ed.pluginContainer.appendChild(...)
• teardown () {} di mana semua pendengar dan UI harus dihapus

widget

Widget adalah editor mini yang dibangun untuk mengedit jenis media tertentu

iframe

Jalankan dalam iframe dan berkomunikasi melalui postmessage

Contoh: CED - widget untuk pengeditan kode

warga asli

Contoh: WIP

gaya

1. Pratama: Rebass Default dan Tema Rebass untuk Penanggulangan Global
2. Secondary: Objek style JS yang Dikenakan (Contoh)
3. DESSECASI: require('./component-name.css') Termasuk, tetapi diperlukan untuk beberapa peretasan responsif dan penanggulangan prosemirror

Gaya kode

Feross Standard Diperiksa oleh Eslint dengan npm test atau npm run lint

• Tidak ada titik koma yang tidak dibutuhkan
• Tidak ada ruang tertinggal
• Kutipan tunggal

Untuk secara otomatis memperbaiki hal -hal mudah seperti trailing whitespace: npm run lintfix

tes

npm test

Karma diatur untuk menjalankan tes di Chrome lokal dan Firefox.

Tes juga akan berjalan di platform seluler melalui BrowserStack, jika Anda memiliki variabel lingkungan ini diatur:

 BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY

membangun

npm run build

Output Minified Dist/Ed.js dan Salinan widget yang didefinisikan dalam package.json.

Menyebarkan

npm version patch - Gaya tweak, perbaikan bug panas

npm version minor - Menambahkan fitur, perubahan yang kompatibel dengan mundur

npm version major -Menghapus fitur, perubahan yang tidak kompatibel

Pintasan ini akan menjalankan tes, tag, mengubah versi paket, dan mendorong perubahan dan tag ke GH.

Travis kemudian akan menerbitkan tag baru ke NPM dan membangun demo untuk menerbitkan ke halaman GH.