Download medium draft - Unduh Kode Sumber medium draft

Pengembangan terbaru sedang berlangsung di cabang ini.

Demo Medium - Demo

Editor Teks Media seperti Rich Dibangun di atas Draft-Js dengan penekanan pada menghilangkan penggunaan mouse dengan menambahkan pintasan keyboard yang relevan.

Dokumentasi yang sedang berlangsung.

Instal versi beta menggunakan

npm install medium-draft@beta

Fitur

Fokus pada pintasan keyboard dan transformasi otomatis blok teks.
Penambahan gambar dengan dukungan untuk teks kaya.
Meminimalkan penggunaan tikus.
Autolists.
Penanganan yang tepat dari tekan RETURN .
Ini juga memiliki implementasi beberapa blok khusus seperti:
- caption - dapat digunakan sebagai keterangan untuk blok media seperti gambar atau video alih -alih instance draft-js bersarang untuk kesederhanaan.
- block-quote-caption -Keterangan untuk blockquote s.
- todo - TODO Teks dengan kotak centang.
Toolbar yang dapat disesuaikan dengan mudah melalui toolbarConfig untuk blok dan gaya inline berikut. Default untuk semua. Sensitif Kasus.
- block: ['ordered-list-item', 'unordered-list-item', 'blockquote', 'header-three', 'todo']
- inline: ['BOLD', 'ITALIC', 'UNDERLINE', 'hyperlink', 'HIGHLIGHT']

Berikut ini adalah pintasan keyboard untuk beralih tipe blok ( `ALT dan CTRL` untuk Windows/Linux dan `opsi dan perintah` untuk OSX)

Alt/opsi +
- 1 - Toggle Item Daftar yang Dipesan
- * - Toggle Item Daftar yang Tidak Terurutan
- # - Sakelar header -tiga.
- < - Toggle Caption Block.
- > - Toggle Blok Untunged atau Paragraf.
- H - Seleksi Sorotan.

Pintasan lainnya

CMD/CTRL + K -> Tambahkan tautan
CMD/CTRL + SHIFT + K -> Hapus tautan jika kursor ada di dalam kata dengan tautan.

Perintah Tingkat Editor

Perintah-perintah ini bukan bagian dari editor inti tetapi telah diimplementasikan dalam kode contoh yang menggunakan editor medium-draft .

Command/Ctrl + S - Simpan data saat ini ke localstorage .
Alt + Shift + L - Muat data yang disimpan sebelumnya dari localstorage .

Karakter Khusus Saat Mengetik: Saat Mengetik Di Blok Kosong, Jika Konten Cocok Salah Satu dari yang Berikut, Jenis Blok Tertentu dan Tampilan akan diubah ke blok yang sesuai yang ditentukan di bawah ini

-- blok saat ini adalah blockquote , itu akan diubah menjadi block-quote-caption , lain 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) -ITEM unordered-list-item .
## - header-two .
[] - todo .
== - unstyled .

Instalasi

NPM .
- npm install medium-draft .
- import Editor from 'medium-draft'
Browser
- Sertakan <link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css"> di <head>
- Sertakan <script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script> . Draf medium tersedia di objek global sebagai MediumDraft .

Penggunaan

medium-draft duduk di atas draft-js dengan beberapa fungsi dan blok bawaan. API-nya hampir sama dengan draft-js . Anda dapat melihat kode editor demo untuk melihat implementasinya.

CSS

Sertakan CSS yang dilengkapi dengan perpustakaan di HTML Anda -

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

Jika Anda menggunakan webpack untuk bundling, Anda dapat mengimpor CSS seperti ini di kode JS Anda

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

Jika Anda menggunakan sideButtons , Anda juga perlu memasukkan CSS untuk font-awesome -

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

atau sesuatu yang setara.

JS (ES6)

Minimal, Anda perlu menyediakan editorState dan alat peraga onChange , sama seperti 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' )
) ;

Menyesuaikan tombol samping

Editor medium-draft menerima prop yang disebut sideButtons . Secara default, hanya ada satu tombol (gambar), tetapi Anda dapat menambahkan lebih banyak. Prop sideButtons harus berupa array objek dengan masing -masing objek yang memiliki tanda tangan berikut:

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

Untuk mis:

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

Contoh kode:

Saat ini, tombol gambar cukup menambahkan gambar di dalam editor menggunakan URL.createObjectURL . Tetapi jika Anda ingin mengunggah gambar ke server Anda dan kemudian menambahkan gambar itu ke editor, Anda dapat mengikuti salah satu dari 2 metode:

Perluas komponen ImageSideButton default yang dilengkapi dengan medium-draft .
Atau buat komponen Anda sendiri dengan fungsionalitas lengkap.

Untuk kesederhanaan, kami akan mengikuti metode pertama. Jika Anda mempelajari implementasi ImageSideButton , Anda akan melihat metode onChange yang menerima acara pemilih file di mana file seleced tersedia sebagai event.target.files . Kami hanya akan mengganti metode ini karena kami tidak ingin menyesuaikan hal lain. Juga perhatikan bahwa setiap komponen tombol sisi menerima fungsi getEditorState (mengembalikan editorState ), setEditorState(newEditorState) Function (mengatur fungsi editor baru) dan close fungsi yang perlu Anda sebut secara manual untuk menutup daftar tombol samping:

 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 }
      />
    ) ;
  }
} ;

Menghapus tombol samping

Untuk melepas tombol samping sepenuhnya, sehingga tombol Tambah melingkar tidak pernah muncul, lewati saja array kosong:

sideButtons={[]}

Menyesuaikan toolbar

Ada tiga alat peraga yang dapat Anda gunakan untuk menyesuaikan tombol di toolbar yang muncul setiap kali Anda memilih teks di dalam editor:

blockButtons
inlineButtons
toolbarConfig

Tombol editor level blok default adalah ['header-three', 'unordered-list-item', 'ordered-list-item', 'blockquote', 'todo'] , dan tombol editor inline default ['BOLD', 'ITALIC', 'UNDERLINE', 'HIGHLIGHT', 'hyperlink'] .

Misalnya, jika Anda ingin menyimpan tombol blok default dan menambahkan beberapa lagi, Anda dapat melakukan sesuatu seperti berikut:

 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 } . . . / >

Jika Anda ingin menghapus beberapa tombol atau memesan ulang , Anda dapat menggunakan fungsi seperti array.slice pada BLOCK_BUTTONS default dan INLINE_BUTTONS , tetapi ini mungkin lebih banyak masalah daripada nilainya.

Untuk tujuan ini lebih baik menggunakan alat 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 } . . . / >

String di dalam block dan array inline harus cocok dengan atribut style di dalam blockButtons dan array inlineButtons .

Untuk meringkas: Jika Anda perlu menambahkan, menghapus, dan memesan ulang tombol, mungkin paling mudah menggunakan blockButtons , inlineButtons , dan toolbarConfig bersama -sama.

Suplai bilah alat Anda sendiri

Jika alat peraga kustomisasi toolbar tidak cukup untuk mendapatkan perilaku yang Anda inginkan, Anda dapat menyuntikkan bilah alat Anda sendiri dengan alat peraga ToolbarComponent .

Pola ini disebut injeksi komponen. ToolbarComponent Anda menerima alat peraga yang sama dengan toolbar default.

Jika Anda ingin menulis komponen bilah alat Anda sendiri, tempat yang baik untuk memulai adalah dengan komponen default.

Memberikan data ke HTML

Fitur untuk mengekspor HTML tersedia dari versi 0.4.1 dan seterusnya.

medium-draft menggunakan konsep konsep (yang pada gilirannya menggunakan react-dom-server) untuk membuat editorState draft-js ke html.

Eksportir bukan bagian dari perpustakaan inti. Jika Anda ingin menggunakan medium-draft-exporter , ikuti langkah-langkah ini-

Browserify/Webpack

npm install draft-convert .

draft-convert adalah bagian dari peerDependencies medium-draft .

Kode

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

Browser

Tambahkan skrip berikut sebelum kode JS Anda.

 < 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 >

Eksportir ini tersedia sebagai MediumDraftExporter Global;

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

medium-draft-exporter juga dilengkapi dengan CSS yang telah ditentukan jika Anda ingin menerapkan beberapa gaya dasar pada HTML yang diberikan.

Di Webpack, sebagai bagian dari halaman HTML yang Anda render, gunakan ini-
```
 import 'medium-draft/lib/basic.css'
```

Di browser, di halaman HTML yang Anda render, Anda dapat menyertakan tautan stylesheet ini

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

Muat HTML Diekspor Menggunakan `medium-draft-exporter` untuk `editorState`

Fitur untuk mengekspor HTML tersedia dari versi 0.5.3 dan seterusnya.

medium-draft menggunakan konsep konsep (yang pada gilirannya menggunakan react-dom-server) untuk membuat editorState draft-js ke html.

Importir bukan bagian dari perpustakaan inti. Jika Anda ingin menggunakan medium-draft-importer , ikuti langkah-langkah ini-

Browserify/Webpack

npm install draft-convert .

draft-convert adalah bagian dari peerDependencies medium-draft .

Kode

  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

Browser

Tambahkan skrip berikut sebelum kode JS Anda.

 < 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 >

Importir tersedia sebagai MediumDraftImporter Global;

  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

Masalah

Tulis eksportir untuk mengekspor draft data ke HTML khusus untuk medium-draft .
Cari tahu cara untuk menunjukkan teks placeholder untuk keterangan gambar kosong.
Saat ini, bilah alat yang muncul ketika teks dipilih perlu diperbaiki mengenai posisinya di viewport.