หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

การพัฒนาล่าสุดเกิดขึ้นในสาขานี้

ร่างกลาง - การสาธิต

สื่อกลางเช่นตัวแก้ไขข้อความที่หลากหลายที่สร้างขึ้นบนร่าง JS โดยเน้นการกำจัดการใช้เมาส์โดยการเพิ่มแป้นพิมพ์ลัดที่เกี่ยวข้อง

เอกสารกำลังดำเนินการ

ติดตั้งเวอร์ชันเบต้าโดยใช้

npm install medium-draft@beta

คุณสมบัติ

  • มุ่งเน้นไปที่แป้นพิมพ์ลัดและการแปลงบล็อกข้อความอัตโนมัติ
  • การเพิ่มรูปภาพด้วยการรองรับคำบรรยายภาพข้อความที่หลากหลาย
  • ลดการใช้เมาส์ให้น้อยที่สุด
  • autolists
  • การจัดการที่เหมาะสมของการกด RETURN
  • นอกจากนี้ยังมีการใช้งานบล็อกที่กำหนดเองเช่น:
    • caption - สามารถใช้เป็นคำบรรยายภาพสำหรับบล็อกสื่อเช่นรูปภาพหรือวิดีโอแทนอินสแตน draft-js ที่ซ้อนกันเพื่อความเรียบง่าย
    • block-quote-caption คำบรรยายภาพสำหรับ blockquote s
    • todo - TODO TEXT พร้อมช่องทำเครื่องหมาย
  • แถบเครื่องมือที่ปรับแต่งได้ง่ายผ่าน toolbarConfig สำหรับบล็อกและสไตล์อินไลน์ต่อไปนี้ ค่าเริ่มต้นสำหรับทั้งหมด ตัวพิมพ์ใหญ่
    • block: ['ordered-list-item', 'unordered-list-item', 'blockquote', 'header-three', 'todo']
    • inline: ['BOLD', 'ITALIC', 'UNDERLINE', 'hyperlink', 'HIGHLIGHT']
ต่อไปนี้เป็นแป้นพิมพ์ลัดเป็นประเภทบล็อกสลับ ( ALT และ CTRL สำหรับ Windows/Linux และ ตัวเลือกและคำสั่ง สำหรับ OSX)

  • alt/opption +

    • 1 - สลับรายการที่สั่งซื้อ
    • * - สลับรายการที่ไม่ได้เรียงลำดับ
    • # - สลับส่วนหัว - สาม
    • < - บล็อกคำบรรยายภาพสลับ
    • > - สลับบล็อกที่ไม่มีหรือย่อหน้า
    • H - การเลือกไฮไลต์
ทางลัดอื่น ๆ
  • cmd/ctrl + k -> เพิ่มลิงค์
  • CMD/Ctrl + Shift + K -> ลบลิงก์หากเคอร์เซอร์อยู่ในคำที่มีลิงก์
คำสั่งระดับบรรณาธิการ

คำสั่งเหล่านี้ไม่ได้เป็นส่วนหนึ่งของตัวแก้ไขหลัก แต่ได้ถูกนำไปใช้ในรหัสตัวอย่างที่ใช้ตัวแก้ไข medium-draft

  • คำสั่ง/ctrl + s - บันทึกข้อมูลปัจจุบันไปยัง localstorage
  • Alt + Shift + L - โหลดข้อมูลที่บันทึกไว้ก่อนหน้านี้จาก localstorage
อักขระพิเศษขณะพิมพ์: ในขณะที่พิมพ์ในบล็อกว่างเปล่าหากเนื้อหาตรงกับหนึ่งในสิ่งต่อไปนี้ประเภทของบล็อกนั้นและรูปลักษณ์จะถูกเปลี่ยนเป็นบล็อกที่เกี่ยวข้องที่ระบุไว้ด้านล่าง
  • -- หากบล็อกปัจจุบันเป็น blockquote มันจะถูกเปลี่ยนเป็น block-quote-caption caption
  • *. (An asterisk and a period) - unordered-list-item
  • *<SPACE> (An asterisk and a space) - unordered-list-item
  • -<SPACE> (A hyphen and a space) - unordered-list-item
  • 1. (The number 1 and a period) - unordered-list-item
  • ## - header-two
  • [] - todo
  • == - unstyled

การติดตั้ง

  • NPM
    • npm install medium-draft
    • import Editor from 'medium-draft'
  • เบราว์เซอร์
    • รวม <link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css"> ใน <head>
    • รวม <script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script> มีการร่างกลาง มีอยู่ในวัตถุระดับโลกเป็น MediumDraft

การใช้งาน

medium-draft ตั้งอยู่ด้านบนของ draft-js พร้อมฟังก์ชั่นและบล็อกในตัว API ของมันเกือบจะเหมือนกับ draft-js คุณสามารถดูรหัสของบรรณาธิการสาธิตเพื่อดูการใช้งาน

CSS

รวม CSS ที่มาพร้อมกับห้องสมุดใน HTML ของคุณ - 

 < link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/medium-draft.css " >

หากคุณใช้ webpack สำหรับการรวมกลุ่มคุณสามารถนำเข้า CSS เช่นนี้ในรหัส JS ของคุณ 

 import 'medium-draft/lib/index.css' ;

หากคุณกำลังใช้ sideButtons คุณจะต้องรวม CSS สำหรับ font-awesome - 

 < link rel =" stylesheet " href =" //maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css " >

หรือสิ่งที่เทียบเท่า

JS (ES6)

อย่างน้อยที่สุดคุณจะต้องจัดเตรียมอุปกรณ์ editorState และอุปกรณ์ประกอบ onChange เช่นเดียวกับ draft-js 

 import React from 'react' ;
import ReactDOM from 'react-dom' ;

// if using webpack
// import 'medium-draft/lib/index.css';

import {
  Editor ,
  createEditorState ,
} from 'medium-draft' ;

class App extends React . Component {
  constructor ( props ) {
    super ( props ) ;

    this . state = {
      editorState : createEditorState ( ) , // for empty content
    } ;

    /*
    this.state = {
      editorState: createEditorState(data), // with content
    };
    */

    this . onChange = ( editorState ) => {
      this . setState ( { editorState } ) ;
    } ;

    this . refsEditor = React . createRef ( ) ;

  }

  componentDidMount ( ) {
    this . refsEditor . current . focus ( ) ;
  }

  render ( ) {
    const { editorState } = this . state ;
    return (
      < Editor
        ref = { this . refsEditor }
        editorState = { editorState }
        onChange = { this . onChange } />
    ) ;
  }
} ;

ReactDOM . render (
  < App /> ,
  document . getElementById ( 'app' )
) ;

การปรับแต่งปุ่มด้านข้าง

Editor ของ medium-draft ยอมรับเสาที่เรียกว่า sideButtons โดยค่าเริ่มต้นมีเพียงปุ่มเดียว (รูปภาพ) แต่คุณสามารถเพิ่มได้เพิ่มเติม เสา sideButtons ต้องเป็นอาร์เรย์ของวัตถุที่มีแต่ละวัตถุที่มีลายเซ็นต่อไปนี้: 

 {
  "title" : "unique-button-name" ,
  "component" : ButtonComponent
}

สำหรับอดีต: 

 {
  "title" : "Image" ,
  "component" : ImageSideButton
}

รหัสตัวอย่าง:

ตอนนี้ปุ่มรูปภาพเพียงเพิ่มรูปภาพภายในตัวแก้ไขโดยใช้ URL.createObjectURL แต่ถ้าคุณต้องการอัปโหลดรูปภาพไปยังเซิร์ฟเวอร์ของคุณก่อนแล้วเพิ่มภาพนั้นลงในตัวแก้ไขคุณสามารถติดตามหนึ่งใน 2 วิธี:

  1. ขยายส่วนประกอบ ImageSideButton เริ่มต้นที่มาพร้อมกับ medium-draft

  2. หรือสร้างองค์ประกอบของคุณเองด้วยฟังก์ชั่นที่สมบูรณ์ด้วยตัวเอง

เพื่อความเรียบง่ายเราจะทำตามวิธีแรก หากคุณศึกษาการใช้งานของ ImageSideButton คุณจะเห็นวิธี onChange ที่ได้รับเหตุการณ์ตัวเลือกไฟล์ที่มีไฟล์ Seleced เป็น event.target.files เราจะแทนที่วิธีนี้เนื่องจากเราไม่ต้องการปรับแต่งสิ่งอื่นใด นอกจากนี้โปรดทราบว่าส่วนประกอบปุ่มด้านข้างจะได้รับฟังก์ชัน getEditorState (ส่งคืน Draft editorState ), ฟังก์ชั่น setEditorState(newEditorState) ) (ตั้งค่า EditorState ใหม่) และฟังก์ชั่น close ที่คุณต้องโทรด้วยตนเองเพื่อปิดรายการด้านข้าง: 

 import React from 'react' ;
import {
  ImageSideButton ,
  Block ,
  addNewBlock ,
  createEditorState ,
  Editor ,
} from 'medium-draft' ;
import 'isomorphic-fetch' ;

class CustomImageSideButton extends ImageSideButton {

  /*
  We will only check for first file and also whether
  it is an image or not.
  */
  onChange ( e ) {
    const file = e . target . files [ 0 ] ;
    if ( file . type . indexOf ( 'image/' ) === 0 ) {
      // This is a post request to server endpoint with image as `image`
      const formData = new FormData ( ) ;
      formData . append ( 'image' , file ) ;
      fetch ( '/your-server-endpoint' , {
        method : 'POST' ,
        body : formData ,
      } ) . then ( ( response ) => {
        if ( response . status === 200 ) {
          // Assuming server responds with
          // `{ "url": "http://example-cdn.com/image.jpg"}`
          return response . json ( ) . then ( data => {
            if ( data . url ) {
              this . props . setEditorState ( addNewBlock (
                this . props . getEditorState ( ) ,
                Block . IMAGE , {
                  src : data . url ,
                }
              ) ) ;
            }
          } ) ;
        }
      } ) ;
    }
    this . props . close ( ) ;
  }

}

// Now pass this component instead of default prop to Editor example above.
class App extends React . Component {
  constructor ( props ) {
    super ( props ) ;

    this . sideButtons = [ {
      title : 'Image' ,
      component : CustomImageSideButton ,
    } ] ;

    this . state = {
      editorState : createEditorState ( ) , // for empty content
    } ;

    /*
    this.state = {
      editorState: createEditorState(data), // with content
    };
    */

    this . onChange = ( editorState ) => {
      this . setState ( { editorState } ) ;
    } ;

    this . refsEditor = React . createRef ( )

  }

  componentDidMount ( ) {
    this . refsEditor . current . focus ( ) ;
  }

  render ( ) {
    const { editorState } = this . state ;
    return (
      < Editor
        ref = { this . refsEditor }
        editorState = { editorState }
        onChange = { this . onChange }
        sideButtons = { this . sideButtons }
      />
    ) ;
  }
} ;

การลบปุ่มด้านข้าง

หากต้องการลบปุ่มด้านข้างทั้งหมดเพื่อไม่ให้ปุ่มเพิ่มวงกลมไม่ปรากฏขึ้นเพียงแค่ผ่านอาร์เรย์ที่ว่างเปล่า:

sideButtons={[]}

การปรับแต่งแถบเครื่องมือ

มีอุปกรณ์ประกอบฉากสามชุดที่คุณสามารถใช้เพื่อปรับแต่งปุ่มในแถบเครื่องมือที่ปรากฏขึ้นเมื่อใดก็ตามที่คุณเลือกข้อความภายในตัวแก้ไข:

  • blockButtons
  • inlineButtons
  • toolbarConfig

ปุ่มตัวแก้ไขระดับบล็อกเริ่มต้นคือ ['header-three', 'unordered-list-item', 'ordered-list-item', 'blockquote', 'todo'] และปุ่มตัวแก้ไขอินไลน์เริ่มต้น ['BOLD', 'ITALIC', 'UNDERLINE', 'HIGHLIGHT', 'hyperlink']

ตัวอย่างเช่นหากคุณต้องการเก็บปุ่มบล็อกเริ่มต้นและเพิ่มอีกสองสามอย่างคุณสามารถทำสิ่งต่อไปนี้: 

 import { BLOCK_BUTTONS } from 'medium-draft' ;

const blockButtons = [ {
    label : 'H1' ,
    style : 'header-one' ,
    icon : 'header' ,
    description : 'Heading 1' ,
  } ,
  {
    label : 'H2' ,
    style : 'header-two' ,
    icon : 'header' ,
    description : 'Heading 2' ,
} ] . concat ( BLOCK_BUTTONS ) ;

// in your component
< Editor blockButtons = { blockButtons } . . . / >

หากคุณต้องการ ลบ ปุ่มบางส่วนหรือ จัดเรียงใหม่ คุณสามารถใช้ฟังก์ชั่นเช่น array.slice บน BLOCK_BUTTONS เริ่มต้นและ INLINE_BUTTONS แต่นี่อาจเป็นปัญหามากกว่าที่คุ้มค่า

เพื่อจุดประสงค์นี้จะดีกว่าที่จะใช้ Prop toolbarConfig : 

 // custom ordering for block and inline buttons, and removes some buttons
const toolbarConfig = {
  block : [ 'unordered-list-item' , 'header-one' , 'header-three' ] ,
  inline : [ 'BOLD' , 'UNDERLINE' , 'hyperlink' ] ,
}

< Editor toolbarConfig = { toolbarConfig } . . . / >

สตริงภายใน block และอาร์เรย์ inline จะต้องตรงกับแอตทริบิวต์ style ภายใน blockButtons และอาร์เรย์ inlineButtons

เพื่อสรุป: หากคุณต้องการเพิ่มลบและเรียงลำดับปุ่มใหม่อาจเป็นวิธีที่ง่ายที่สุดในการใช้ blockButtons , inlineButtons และ toolbarConfig ด้วยกัน

จัดหาแถบเครื่องมือของคุณเอง

หากอุปกรณ์ประกอบการปรับแต่งแถบเครื่องมือไม่เพียงพอที่จะได้รับพฤติกรรมที่คุณต้องการคุณสามารถฉีดแถบเครื่องมือของคุณเองด้วย Prop ToolbarComponent

รูปแบบนี้เรียกว่าการฉีดส่วนประกอบ ToolbarComponent ของคุณได้รับอุปกรณ์ประกอบฉากเดียวกับแถบเครื่องมือเริ่มต้น

หากคุณต้องการเขียนส่วนประกอบแถบเครื่องมือของคุณเองจุดเริ่มต้นที่ดีคือการใช้ส่วนประกอบเริ่มต้น

แสดงข้อมูลเป็น html

คุณสมบัติในการส่งออก HTML มีให้ตั้งแต่เวอร์ชัน 0.4.1 เป็นต้นไป

medium-draft ใช้การแปลงร่าง (ซึ่งจะใช้ React-Dom-Server) เพื่อแสดง editorState ของ draft-js ไปยัง HTML

ผู้ส่งออกไม่ได้เป็นส่วนหนึ่งของห้องสมุดหลัก หากคุณต้องการใช้ medium-draft-exporter ทำตามขั้นตอนเหล่านี้-

เบราว์เซอร์/webpack

  • npm install draft-convert

draft-convert เป็นส่วนหนึ่งของ peerDependencies ของ medium-draft

รหัส 
  import mediumDraftExporter from 'medium-draft/lib/exporter' ;
  const editorState = /* your draft editorState */ ;
  const renderedHTML = mediumDraftExporter ( editorState . getCurrentContent ( ) ) ;
  /* Use renderedHTML */

เบราว์เซอร์

  • เพิ่มสคริปต์ต่อไปนี้ก่อนรหัส JS ของคุณ 
 < script src =" https://unpkg.com/[email protected]/dist/react-dom-server.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/draft-convert.min.js " > </ script >
< script src =" https://unpkg.com/medium-draft/dist/medium-draft-exporter.js " > </ script >

ผู้ส่งออกมีให้บริการเป็น MediumDraftExporter Global;

  • JS 
 var mediumDraftExporter = MediumDraftExporter . default ;
const editorState = /* your draft editorState */ ;
const renderedHTML = mediumDraftExporter ( editorState . getCurrentContent ( ) ) ;
/* Use renderedHTML */

medium-draft-exporter ยังมาพร้อมกับ CSS ที่ตั้งไว้ล่วงหน้าหากคุณต้องการใช้สไตล์พื้นฐานบางอย่างกับ HTML ที่แสดงผล

  • ใน WebPack ซึ่งเป็นส่วนหนึ่งของหน้า HTML ที่แสดงผลของคุณใช้สิ่งนี้- 

     import 'medium-draft/lib/basic.css'

  • ในเบราว์เซอร์ในหน้า HTML ที่แสดงผลของคุณคุณสามารถรวมลิงค์สไตล์ชีทนี้ 

     < link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/basic.css " >

โหลด HTML ที่ส่งออกโดยใช้ medium-draft-exporter ไปยัง editorState

คุณสมบัติในการส่งออก HTML มีให้ตั้งแต่เวอร์ชัน 0.5.3 เป็นต้นไป

medium-draft ใช้การแปลงร่าง (ซึ่งจะใช้ React-Dom-Server) เพื่อแสดง editorState ของ draft-js ไปยัง HTML

ผู้นำเข้าไม่ได้เป็นส่วนหนึ่งของห้องสมุดหลัก หากคุณต้องการใช้ medium-draft-importer ทำตามขั้นตอนเหล่านี้-

เบราว์เซอร์/webpack

  • npm install draft-convert

draft-convert เป็นส่วนหนึ่งของ peerDependencies ของ medium-draft

รหัส 
  import { convertToRaw } from 'draft-js' ;
  import { createEditorState } from 'medium-draft' ;
  import mediumDraftImporter from 'medium-draft/lib/importer' ;

  const html = /* your previously exported html */ ;
  const editorState = createEditorState ( convertToRaw ( mediumDraftImporter ( html ) ) ) ;
  // Use this editorState

เบราว์เซอร์

  • เพิ่มสคริปต์ต่อไปนี้ก่อนรหัส JS ของคุณ 
 < script src =" https://unpkg.com/[email protected]/dist/react-dom-server.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/draft-convert.min.js " > </ script >
< script src =" https://unpkg.com/medium-draft/dist/medium-draft-importer.js " > </ script >

ผู้นำเข้ามีให้บริการเป็น MediumDraftImporter กลาง

  • JS 
  const { convertToRaw } = Draft ;
  const { createEditorState } = MediumDraft ;
  const mediumDraftImporter = MediumDraftImporter . default ;
  const html = /* your previously exported html */ ;
  const editorState = createEditorState ( convertToRaw ( mediumDraftImporter ( html ) ) ) ;
  // Use this editorState

ปัญหา

  • เขียนผู้ส่งออกเพื่อส่งออกข้อมูลร่างไปยัง HTML โดยเฉพาะสำหรับ medium-draft
  • คิดหาวิธีแสดงข้อความตัวยึดตำแหน่งสำหรับคำบรรยายภาพที่ว่างเปล่า
  • ปัจจุบันแถบเครื่องมือที่ปรากฏเมื่อมีการเลือกข้อความจะต้องได้รับการแก้ไขเกี่ยวกับตำแหน่งในวิวพอร์ต

ผู้พัฒนา

  • โคลนนี้ git clone https://github.com/brijeshb42/medium-draft.git
  • ติดตั้งแพ็คเกจโหนด npm install react react-dom draft-convert && npm install
  • เริ่มการสาธิตท้องถิ่น npm run dev สิ่งนี้จะเริ่มต้นเซิร์ฟเวอร์ท้องถิ่นบนพอร์ต 8080
  • สร้างโดยใช้ npm run build

ใบอนุญาต

มิกซ์

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด