react umeditor Download - react umeditor Source Téléchargement du code

react umeditor

Autres ressources

1.0.0

Télécharger

react-umitor

React Editor comme UMEditor

Installer

 npm install react-umeditor --save

Utiliser

javascrip

 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 >

Exemple

react-umitor-example

Fonctions REF

Vous pouvez this.refs.editor.xxx() ! Le xxx est peut-être le suivant:

FindDomnode: Find Refs par le nom de la référence "root","editarea","toolbar","color"
setContent: Set HTML of Editor
GetContent: Obtenez HTML de l'éditeur
FocuSitor: Focus l'éditeur

Accessoires

Vous pouvez définir les props ! Les props sont peut-être les suivants:

OnFocus: l'événement Focus
onChange: l'événement de changement de texte { content: string }
DefaultValue: valeur par défaut de l'éditeur
Valeur: valeur de l'éditeur
Icônes: icônes de la barre d'outils
Plugins: Paramètres des plugins
- Barre d'outils: paramètres de la barre d'outils
  - Icônes: icônes personnalisées
    - Nom: nom de l'icône
    - Titre: Titre de l'icône
    - OniConClick: Événement de gestion
    - maprangestate: filtre rangestate
    - accessoires: accessoires d'icône et de composant
    - Composant: composant personnalisé, par exemple. dialogue
- Image: Paramètres de la boîte de dialogue d'image
  - Téléchargeur: Paramètres du téléchargeur d'image
    - Nom: Nom du formulaire de XHR
    - URL: URL du serveur
    - Données: Autres formdata de XHR
    - Filtre: Filtre Corps de style JSON
  - CustomUpLoader: Upustal File Uploader (voir FileUploader)

Icônes

Icônes de support, comme 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

Instantané

instantané

Développer

 // 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 - Version 1.0

1. accessoires de téléchargeur d'image personnalisés
2. Icône de la barre d'outils personnalisée
3. Style ES6
4. React16
5. Tests (barre d'outils et exemple et nouvelle fonctionnalité)
6. Docs (Readme.md & Docs & Exemples de documents)

Contribuer

Les changements et les améliorations sont plus que les bienvenus! N'hésitez pas à fourrer et à ouvrir une demande de traction. Veuillez apporter vos modifications dans une branche spécifique et demander à vous entraîner dans le maître! Si vous le pouvez, assurez-vous que l'éditeur fonctionne complètement avant d'envoyer le PR, car cela aidera à accélérer le processus.

Voir plus de document