react quill

import * as React from 'react';

// tslint:disable-next-line:ordered-imports

import { Select, message } from 'antd';

import './adminaccout.css'

// import ContentModify from '../../experiment/ContentModify'

const Option = Select. Option;

import Quill from 'quill';

import { ExContent } from '../../../utils/api/ExContent'

require( './quill.snow.css');

interface ILoginState {

chapter: any;

step: any;

totol: string;

step1: number;

justHtml: any;

chaptercontent: string;

content: string

}

const toolbarOptions = [

[ 'bold', 'italic', 'underline', 'strike'], // toggled buttons

[ 'blockquote', 'code-block'],

[{ 'header' : 1 }, { 'header' : 2 }], // custom button values

[{ 'list' : 'ordered' }, { 'list' : 'bullet' }],

[{ 'script' : 'sub' }, { 'script' : 'super' }], // superscript/subscript

[{ 'indent' : '-1' }, { 'indent' : '+1' }], // outdent/indent

[{ 'direction' : 'rtl' }], // text direction

[{ 'size' : [ 'small', false, 'large', 'huge'] }], // custom dropdown

[{ 'header' : [ 1, 2, 3, 4, 5, 6, false] }],

[{ 'color' : [] }, { 'background' : [] }], // dropdown with defaults from theme

[{ 'font' : [] }],

[{ 'align' : [] }],

[ 'clean'], // remove formatting button

[ 'link', 'image']

];

class AdminAccout extends React. Component<{}, ILoginState>{

// editor : Quill;

public editor: any

// public state: ILoginState;

constructor( props: any) {

super( props);

this. state = { chapter: [ '实验2-1', '实验2-2'], step: [], totol: '', step1: 1, justHtml: '', chaptercontent: '', content: '' };

this. save = this. save. bind( this);

this. handlechapter = this. handlechapter. bind( this);

this. handlestep = this. handlestep. bind( this);

}

public save() {

console. log( this. state. justHtml, 'hhh')

ExContent. save( '1', this. state. chaptercontent, this. state. step1, this. state. justHtml)

. then(( res: any) => {

if ( res) {

message. success( '成功')

}

})

. catch(() => {

message. error( '保存失败，请重新保存');

})

}

public handlestep( value: any) {

( this. refs. myEditor as any). innerHTML = '';

console. log( value, 'value')

this. setState({ step1: value }, () => {

console. log( this. state. step1)

ExContent. findBychapter( '1', this. state. chaptercontent, this. state. step1)

. then(( res: any) => {

console. log( res, '333')

this. setState({ content: res. content })

if ( this. editor) {

this. editor= null;

let parent = document. getElementById( 'editorParent');

if ( parent) {

parent. removeChild( parent. children[ 0]);

parent. innerHTML = `

<div ref="myEditor" id="myEditor2"></div>

{/* <div ref="mres" /> */}

</div>

</div>

`

}

}

let myEditor = document. querySelector( '#myEditor2');

if ( myEditor) {

console. log( 'dfdgwe', myEditor, myEditor. children[ 0])

myEditor. innerHTML = this. state. content;

}

let options = {

debug: 'info',

modules: {

toolbar: toolbarOptions

},

placeholder: 'edit',

theme: 'snow'

};

let editor = new Quill( this. refs. myEditor as any, options);

// tslint:disable-next-line:no-var-keyword

var txtArea = document. createElement( 'textarea');

editor. on( 'text-change', ( delta: any, oldDelta: any, source: any) => {

var html = ( this. editor as any). children[ 0]. innerHTML

txtArea. value = html

})

})

// tslint:disable-next-line:no-empty

. catch(() => {

})

});

}

public handlechapter( value: any) {

console. log( `selected ${ value } `);

this. setState({ chaptercontent: value })

ExContent. findstep( '1', 0, 1000, value)

. then(( re: any) => {

console. log( re, 'resss')

if ( re) {

this. setState({ step: re });

} else {

this. setState({ step: [ '实验2-1', '实验2-2'] });

}

})

. catch(() => {

});

}

public componenetWillUnmount() {

delete this. editor;

( this. refs. myEditor as any). innerHTML = '';

}

public componentDidMount() {

ExContent. findchapter( '1', 0, 1000)

. then(( res: any) => {

console. log( res, 'resss')

if ( res) {

this. setState({ chapter: res });

} else {

this. setState({ chapter: [ '实验2-1', '实验2-2'] });

}

})

. catch(() => {

});

if (! this. refs. myEditor) {

console. warn( 'meditor not found');

return;

}

let options = {

debug: 'info',

modules: {

toolbar: toolbarOptions

},

placeholder: 'edit',

theme: 'snow'

};

let editor = new Quill( this. refs. myEditor as any, options);

this. editor = editor;

console. log( editor);

editor. on( 'text-change', () => {

let delta = editor. getContents();

let text = editor. getText();

let justHtml = editor. root. innerHTML;

console. log( justHtml, 'justHtml')

this. setState({ justHtml })

console. log( delta, 'delta')

console. log( text, 'text')

console. log( this. refs. myEditor)

});

}

public render() {

// let content = <div/>

// if(this.state.current === '1') {

// content =<ContentModify/>

// }

let chapter = < Option />

if ( this. state. chapter) {

chapter = this. state. chapter. map(( item: any, index: any) => {

// console.log(item,'item')

return < Option value= { item. id } key= { index } >实验 { item. id } </ Option >;

})

}

let step = < Option />

if ( this. state. step) {

step = this. state. step. map(( item: any, index: any) => {

console. log( item, 'item11')

return < Option value= { item. step } key= { index } >步骤 { item. step } </ Option >;

})

}

return (

< div >

< div className= "accoutcondition" >

< div >

< Select

// tslint:disable-next-line:jsx-boolean-value

showSearch

style= {{ width: 200 } }

placeholder= "选择一个章节"

optionFilterProp= "children"

onChange= {this. handlechapter }

filterOption= {( input: any, option: any) => option. props. children. toLowerCase(). indexOf( input. toLowerCase()) >= 0 }

>

{ chapter }

</ Select >

</ div >

< div 　　 style= {{ marginLeft: '25px' } } >

< Select

showSearch

style= {{ width: 200 } }

placeholder= "选择章节的步骤"

optionFilterProp= "children"

onChange= {this. handlestep }

filterOption= {( input: any, option: any) => option. props. children. toLowerCase(). indexOf( input. toLowerCase()) >= 0 }

>

{ step }

</ Select >

</ div >

{ /* <div >

<Button onClick={this.save}>保存</Button>

</div> */ }

</ div >

{ /* <Button onClick={this.click}>修改</Button> */ }

< div >

< div >

{ /* <div id="toolbar">

<button className="ql-bold">Bold</button>

<button className="ql-italic">Italic</button>

</div> */ }

< div id= "editorParent" >

< div ref= "myEditor" id= "myEditor2" > {} </ div >

</ div >

</ div >

</ div >

</ div >

);

}

}

export default AdminAccout