ed

npm start

เอ็ด

การใช้ Prosemirror กับข้อมูลจาก Grid API

การสาธิต: the-grid.github.io/ed/ พร้อมกับติดตั้ง

การสาธิตแสดงการแปลจาก Prosemirror ไปยัง The Grid API JSON และย้อนกลับ

วัตถุประสงค์

Prosemirror จัดเตรียมอินเทอร์เฟซที่ใช้สคีมาระดับสูงสำหรับการโต้ตอบกับ contenteditable ในการดูแลความเจ็บปวดนั้น ED มุ่งเน้นไปที่:

• สคีมาเพื่อแปลระหว่างข้อมูลกริด API และประเภทเอกสาร Prosemirror
• วิดเจ็ตการประสานงาน (ตัวแก้ไขบล็อกที่เชี่ยวชาญตามประเภท) (ตัวอย่าง)

ใช้

ใช้เป็นส่วนประกอบ react ⚛

ED เปิดเผยองค์ประกอบปฏิกิริยาตามค่าเริ่มต้น

 import Ed from '@the-grid/ed'

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

ใช้เป็นไลบรารีสแตนด์อโลนใน iframe หรือคล้ายกัน

รวมถึง 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 แอพจะได้รับวัตถุที่มีคีย์คำสั่งเหล่านี้ ค่าจะเป็นหนึ่งในสตริงเหล่านี้: 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) {} ได้รับการอ้างอิงถึง Main ed ที่คุณสามารถทำได้
  • ฟังกิจกรรม PM: ed.pm.on('draw', ...)
  • และตั้งค่า UI: ed.pluginContainer.appendChild(...)
• teardown () {} ที่ผู้ฟังและ UI ทุกคนควรถูกลบออก

วิดเจ็ต

วิดเจ็ตเป็นผู้แก้ไขขนาดเล็กที่สร้างขึ้นเพื่อแก้ไขประเภทสื่อเฉพาะ

iframe

รันใน iframe และสื่อสารผ่าน postmessage

ตัวอย่าง: CED - วิดเจ็ตสำหรับการแก้ไขรหัส

พื้นเมือง

ตัวอย่าง: WIP

การจัดแต่งทรงผม

1. หลัก: ค่าเริ่มต้น rebass และธีม rebass สำหรับการแทนที่ทั่วโลก
2. ทุติยภูมิ: วัตถุ style JS ที่มีข้อต่อ (ตัวอย่าง)
3. การหักล้าง: require('./component-name.css') รวมถึง แต่จำเป็นสำหรับการแฮ็กที่ตอบสนองและการแทนที่ prosemirror

รูปแบบรหัส

มาตรฐาน Feross ตรวจสอบโดย Eslint ด้วย npm test หรือ npm run lint

• ไม่มีเครื่องหมายอัฒภาคที่ไม่จำเป็น
• ไม่มีพื้นที่ต่อท้าย
• คำพูดเดียว

เพื่อแก้ไขสิ่งง่ายๆโดยอัตโนมัติเช่น trailing whitespace: npm run lintfix

ทดสอบ

npm test

Karma ได้รับการตั้งค่าเพื่อทำการทดสอบในโครเมี่ยมและ Firefox ในท้องถิ่น

การทดสอบจะทำงานในแพลตฟอร์มมือถือผ่าน BrowserStack หากคุณมีการตั้งค่าตัวแปรสภาพแวดล้อมเหล่านี้:

 BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY

สร้าง

npm run build

เอาท์พุทมินต์ dist/ed.js และวิดเจ็ตสำเนาที่กำหนดไว้ใน package.json

การปรับใช้

npm version patch - การปรับแต่งสไตล์, การแก้ไขข้อผิดพลาดร้อน

npm version minor - การเพิ่มคุณสมบัติการเปลี่ยนแปลงที่เข้ากันได้ย้อนหลัง

npm version major การลบคุณสมบัติการเปลี่ยนแปลงที่ไม่เข้ากัน

ทางลัดเหล่านี้จะเรียกใช้การทดสอบแท็กเปลี่ยนเวอร์ชันแพ็คเกจและผลักดันการเปลี่ยนแปลงและแท็กเป็น GH

เทรวิสจะเผยแพร่แท็กใหม่ไปยัง NPM และสร้างตัวอย่างเพื่อเผยแพร่ไปยัง GH-PAGES