react umeditor 다운로드 - react umeditor 소스 코드 다운로드

react umeditor

기타 리소스

1.0.0

다운로드

반응 원료

UMEDITOR와 같은 편집자 반응

설치하다

 npm install react-umeditor --save

사용

자바 스크립트

 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 >

예

반응-omeditor-example

참조 기능

당신은 this.refs.editor.xxx() ! xxx 는 다음과 같습니다.

finddomnode : ref 이름으로 refs ref name "root","editarea","toolbar","color" 찾으십시오.
SetContent : 편집기의 HTML을 설정하십시오
GetContent : 편집자의 HTML을 얻으십시오
Focuseditor : 편집자에 집중하십시오

소품

props 설정할 수 있습니다! props 은 다음과 같습니다.

Onfocus : 초점 이벤트
OnChange : 텍스트 변경 이벤트 { content: string }
DefaultValue : 편집기의 기본값
가치 : 편집자의 가치
아이콘 : 도구 모음의 아이콘
플러그인 : 플러그인 설정
- 도구 모음 : 도구 모음 설정
  - 아이콘 : 사용자 정의 아이콘
    - 이름 : 아이콘 이름
    - 제목 : 아이콘 제목
    - OniconClick : 이벤트를 처리합니다
    - Maprangestate : 필터 rangestate
    - 소품 : 아이콘 및 구성 요소의 소품
    - 구성 요소 : 사용자 정의 구성 요소, 예를 들어. 대화
- 이미지 : 이미지 대화 상자의 설정
  - 업 로더 : 이미지 업 로더 설정
    - 이름 : XHR의 양식 이름
    - URL : 서버의 URL
    - 데이터 : XHR의 다른 FormData
    - 필터 : 필터 JSON 스타일 바디
  - CustomUploader : 사용자 정의 파일 업 로더 (FileUploader 참조)

아이콘

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

스냅 사진

개발하다

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