https://github.com/hjxenjoy/react-text-media-editor

Simple React Web Editor Just Support Text and Medias Such As Image and Video
https://github.com/hjxenjoy/react-text-media-editor

editor react

Last synced: 10 days ago
JSON representation

Simple React Web Editor Just Support Text and Medias Such As Image and Video

• Host: GitHub
• URL: https://github.com/hjxenjoy/react-text-media-editor
• Owner: hjxenjoy
• Created: 2019-07-05T05:30:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T05:32:34.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T08:08:45.593Z (about 1 month ago)
• Topics: editor, react
• Language: JavaScript
• Homepage: https://hujin.xin/react-text-media-editor/
• Size: 4.17 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Text Media Editor

Simple React Web Editor Only Support Text and Medias

## Demo

```sh

npm start

```

## Installation

Using [npm](https://www.npmjs.com/package/react-text-media-editor):

```sh

npm install --save react-text-media-editor react-sortable-hoc

```

## Usage

Basic Example

```js

import React, { useState } from 'react'

import ReactDOM from 'react-dom'

import RtmEditor from 'react-text-media-editor'

import 'react-text-media-editor/dist/style.css'

const IMAGE = 'https://picsum.photos/500/150'

const InitialValue = [

  { type: 'TEXT', raw: 'React Text Media Editor Example' },

  { type: 'IMAGE', url: IMAGE, name: 'Pic.png', width: 500, height: 150 },

]

function Example() {

  const [value, setValue] = useState(InitialValue)

  function updateValue(nextValue) {

    console.log(nextValue)

    // setValue(nextValue)

  }

  function uploadImages(files, callback) {

    // put your upload function here

    setTimeout(() => {

      callback(

        files.map(file => ({

          status: 'done',

          url: '', // 'https://your.domain.com/your/image/url',

          _id: file._id,

        }))

      )

    }, 1000)

  }

  return (

    


      
React Text Media Editor Example

      

    

  )

}


ReactDOM.render(, document.getElementById('root'))

```