Skip to content

R
react-ag-qeditor
Commit bd9f8fc8 by Яков
Options

add pdf to text

parent ed18ec99
Showing with 105 additions and 95 deletions
package.json
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.1.20", "version": "1.1.21",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/QEditor.jsx
...@@ -641,10 +641,14 @@ const QEditor = ({ ...@@ -641,10 +641,14 @@ const QEditor = ({
accept={accept} accept={accept}
action={custom_url.length > 0 ? custom_url : url} action={custom_url.length > 0 ? custom_url : url}
errorMessage={uploadOptions.errorMessage} errorMessage={uploadOptions.errorMessage}
onSuccess={(file) => { onSuccess={(file, html) => {
const _uploadedPaths = [...uploadedPaths] if (typeof file !== "undefined") {
_uploadedPaths.push(file) const _uploadedPaths = [...uploadedPaths]
setUploadedPaths(_uploadedPaths) _uploadedPaths.push(file)
setUploadedPaths(_uploadedPaths)
} else {
setEmbedContent(html);
}
}} }}
onDelete={(deleteFile) => { onDelete={(deleteFile) => {
let deleteIdx = null let deleteIdx = null
......
src/components/Uploader.js
...@@ -31,6 +31,7 @@ export default class Uploader extends React.Component { ...@@ -31,6 +31,7 @@ export default class Uploader extends React.Component {
progress: 0, progress: 0,
isUpload: false, isUpload: false,
isSuccess: false, isSuccess: false,
html: ''
} }
this.files = {}; this.files = {};
...@@ -109,101 +110,106 @@ export default class Uploader extends React.Component { ...@@ -109,101 +110,106 @@ export default class Uploader extends React.Component {
} }
return ( return (
<Fragment> <Fragment>
<div className={'atma-editor-uploader-uitems'}> {this.state.html.length > 0 ? <div dangerouslySetInnerHTML={{__html: this.state.html}} />
{ :
Object.keys(this.state.files).map((uid, i) => ( <>
<div <div className={'atma-editor-uploader-uitems'}>
className={ 'atma-editor-uploader-uitems-elem' + (this.modalType === 'file' ? ' atma-editor-uploader-file' : '' ) } {
style={{ backgroundImage: `url(${this.state.files[uid].path})` }} Object.keys(this.state.files).map((uid, i) => (
data-url={ this.state.files[uid].path } <div
key={`key_${i}`} className={ 'atma-editor-uploader-uitems-elem' + (this.modalType === 'file' ? ' atma-editor-uploader-file' : '' ) }
> style={{ backgroundImage: `url(${this.state.files[uid].path})` }}
<div className={'atma-editor-uploader-uitems-del'} title={'Удалить'} onClick={()=> this.abortUpload({ uid }) } /> data-url={ this.state.files[uid].path }
{ key={`key_${i}`}
this.state.files[uid].uploaded !== true ? ( >
<div className={ 'atma-editor-uploader-progress-wrap' }> <div className={'atma-editor-uploader-uitems-del'} title={'Удалить'} onClick={()=> this.abortUpload({ uid }) } />
<div className={ 'atma-editor-uploader-progress' }> {
{ parseInt(this.state.files[uid].percent) + '%' } this.state.files[uid].uploaded !== true ? (
<div className={ 'atma-editor-uploader-progress-wrap' }>
<div className={ 'atma-editor-uploader-progress' }>
{ parseInt(this.state.files[uid].percent) + '%' }
</div>
</div> </div>
</div> ) : null
) : null }
} { this.modalType === 'file' && <span>{ this.state.files[uid].name }</span> }
{ this.modalType === 'file' && <span>{ this.state.files[uid].name }</span> } </div>
</div> ))
)) }
} </div>
</div> <Upload
<Upload ref={ ref => this.uploader = ref }
ref={ ref => this.uploader = ref } accept={this.accept}
accept={this.accept} action={this.action}
action={this.action} multiple={this.multiple}
multiple={this.multiple} disabled={disabledFileUpload}
disabled={disabledFileUpload} beforeUpload={(a, files) => {
beforeUpload={(a, files) => { this.files[a.uid] = {...a, percent: 0, uploaded: false};
this.files[a.uid] = {...a, percent: 0, uploaded: false};
this.setState({
isUpload: true,
files: this.files
});
}}
onStart={(a) => {
this.setState({disabledFileUpload: true, isUpload: true});
// console.log('start');
}}
onSuccess={(resp, file) => {
if (resp.state === 'success' && resp.file_path) {
let curFile = this.files[file.uid];
curFile['uploaded'] = true;
curFile['path'] = resp.poster || resp.file_path;
curFile['name'] = resp.file_name;
curFile['size'] = resp.file_size;
this.setState({ this.setState({
uploaderSuccess: true, isUpload: true,
isUpload: false,
disabledFileUpload: false,
files: this.files files: this.files
}, () => this.onSuccess({
path: resp.file_path,
uid: file.uid,
name: resp.file_name,
size: resp.file_size
}))
let data = resp;
data.pathname = window.location.pathname;
data.slug = 'redactor';
axios.post('/api/web/ru/set-file-data/', resp, { withCredentials: true})
.then(response => {
if (response.data.state === 'success') {
}
}); });
}}
} onStart={(a) => {
if (resp.state === 'success') { this.setState({disabledFileUpload: true, isUpload: true});
console.log(resp); // console.log('start');
} }}
}} onSuccess={(resp, file) => {
onProgress={(o, file) => { if (resp.state === 'success' && resp.file_path) {
if (this.files[file.uid]) { let curFile = this.files[file.uid];
this.files[file.uid].percent = parseInt(o.percent); curFile['uploaded'] = true;
} curFile['path'] = resp.poster || resp.file_path;
//
this.setState({ curFile['name'] = resp.file_name;
files: this.files curFile['size'] = resp.file_size;
})
this.setState({
// console.log(o, file); uploaderSuccess: true,
}} isUpload: false,
component={'div'} disabledFileUpload: false,
type="drag" files: this.files
className={ 'atma-editor-uploader-drop' } }, () => this.onSuccess({
> path: resp.file_path,
<div className={'atma-editor-uploader-placeholder'}>Нажмите или перетащите файлы сюда</div> uid: file.uid,
</Upload> name: resp.file_name,
size: resp.file_size
}))
let data = resp;
data.pathname = window.location.pathname;
data.slug = 'redactor';
axios.post('/api/web/ru/set-file-data/', resp, { withCredentials: true})
.then(response => {
if (response.data.state === 'success') {
}
});
}
if (resp.state === 'success' && resp.html) {
this.setState({html: resp.html, uploaderSuccess: true}, () => this.onSuccess(undefined, resp.html))
}
}}
onProgress={(o, file) => {
if (this.files[file.uid]) {
this.files[file.uid].percent = parseInt(o.percent);
}
//
this.setState({
files: this.files
})
// console.log(o, file);
}}
component={'div'}
type="drag"
className={ 'atma-editor-uploader-drop' }
>
<div className={'atma-editor-uploader-placeholder'}>Нажмите или перетащите файлы сюда</div>
</Upload>
</>
}
</Fragment> </Fragment>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment