Descargar react umeditor - Descargar el código fuente react umeditor

react umeditor

Otros recursos

1.0.0

Descargar

React-Umeditor

React Editor como Umeditor

Instalar

 npm install react-umeditor --save

Usar

javascript

 var React = require ( 'react' ) ;
var Editor = require ( 'react-umeditor' ) ;

class App extends React . Component {
	constructor ( props ) {
		super ( props ) ;
		this . state = {
			content : ""
		}
	}
	handleChange ( content ) {
		this . setState ( {
			content : content
		} )
	}
	getIcons ( ) {
		var icons = [
			"source | undo redo | bold italic underline strikethrough fontborder emphasis | " ,
			"paragraph fontfamily fontsize | superscript subscript | " ,
			"forecolor backcolor | removeformat | insertorderedlist insertunorderedlist | selectall | " ,
			"cleardoc  | indent outdent | justifyleft justifycenter justifyright | touppercase tolowercase | " ,
			"horizontal date time  | image emotion spechars | inserttable"
		]
		return icons ;
	}
	getPlugins ( ) {
		return {
			"image" : { 
				"uploader" : { 
					"name" : "file" , 
					"url" : "/api/upload" 
				} 
			} 
		}
	}
	render ( ) {
	    var icons = this . getIcons ( ) ;
		var plugins = this . getPlugins ( ) ;
		return ( < Editor ref = "editor" 
			icons = { icons } 
			value = { this . state . content } defaultValue = "<p>React Umeditor</p>" 
			onChange = { this . handleChange . bind ( this ) } 
			plugins = { plugins } /> )
	}
}

html

 <!DOCTYPE html >
< html lang =" en " >
< head >
	< meta charset =" UTF-8 " >
	< title > Editor Demo </ title >
	
	<!-- mathquill & umeditor stylesheet & if you have the formula icon -->
	< link rel =" stylesheet " href =" ../../dist/third-part/mathquill/mathquill.css " />
	
	< link rel =" stylesheet " href =" app.css " type =" text/css " />
</ head >
< body >
	< div id =" react-container " > </ div >
	
	<!-- jquery & mathquill javascript & if you have the formula icon -->
	< script src =" ../../dist/third-part/jquery.min.js " > </ script >
	< script src =" ../../dist/third-part/mathquill/mathquill.js " > </ script >
	
	<!-- your react script -->
	< script src =" bundle.js " > </ script >
	< script src =" app.js " > </ script >
</ body >
</ html >

Ejemplo

React-Umeditor-Ejemplo

Funciones de referencia

¡Puede this.refs.editor.xxx() ! El xxx tal vez sea el siguiente:

finddomnode: Find Refs by Ref Name "root","editarea","toolbar","color"
setContent: set html de editor
GetContent: Obtener html de editor
COMBUSTITOR: Focus el editor

Accesorios

¡Puedes establecer los props ! Los props tal vez sean los siguientes:

Onfocus: el evento Focus
Onchange: el evento de cambio de texto { content: string }
Valor predeterminado: valor predeterminado del editor
Valor: valor del editor
íconos: íconos de la barra de herramientas
complementos: configuración de complementos
- Barra de herramientas: configuración de la barra de herramientas
  - íconos: iconos personalizados
    - Nombre: Nombre del icono
    - Título: Título del icono
    - OnicOnClick: Evento de manejo
    - MapRangeState: Filter RangeState
    - Props: accesorios de icono y componente
    - Componente: Componente personalizado, por ejemplo. diálogo
- Imagen: Configuración del cuadro de diálogo de imagen
  - cargador: configuración del cargador de imágenes
    - Nombre: Forma Nombre de XHR
    - URL: URL del servidor
    - Datos: Otros datos de formato de XHR
    - Filtro: Filtro JSON Style Body
  - CustomUPLOADER: SERVICIO Custom File Supeader (consulte FileUploader)

Íconos

Íconos de soporte, como fllow:

 source undo redo bold italic underline strikethrough fontborder emphasis 
paragraph fontfamily fontsize superscript subscript 
forecolor backcolor removeformat insertorderedlist insertunorderedlist  selectall 
cleardoc  indent outdent justifyleft justifycenter justifyright  touppercase tolowercase 
horizontal date time  image emotion spechars inserttable formula

Instantánea

instantánea

Desarrollar

 // clone code
git clone https://github.com/liuhong1happy/react-umeditor
cd react-umeditor
// install require
npm install
// build
npm run build
// run example server
cd example
npm run example

TODO - Versión 1.0

1. Propiedades de cargador de imágenes personalizadas
2. Icono de barra de herramientas personalizada
3. Estilo ES6
4. React16
5. Pruebas (barra de herramientas y ejemplo y nueva función)
6. Docs (ReadMe.MD & Docs & Ejemplo Docs)

Contribuir

¡Los cambios y las mejoras son más que bienvenidas! Siéntase libre de bifurcar y abrir una solicitud de extracción. ¡Haga sus cambios en una rama específica y solicite que ingrese al maestro! Si puede, asegúrese de que el editor funcione completamente antes de enviar el PR, ya que eso ayudará a acelerar el proceso.

Ver más documento