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",
"version": "1.1.20",
"version": "1.1.21",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
......
src/QEditor.jsx
......@@ -641,10 +641,14 @@ const QEditor = ({
accept={accept}
action={custom_url.length > 0 ? custom_url : url}
errorMessage={uploadOptions.errorMessage}
onSuccess={(file) => {
const _uploadedPaths = [...uploadedPaths]
_uploadedPaths.push(file)
setUploadedPaths(_uploadedPaths)
onSuccess={(file, html) => {
if (typeof file !== "undefined") {
const _uploadedPaths = [...uploadedPaths]
_uploadedPaths.push(file)
setUploadedPaths(_uploadedPaths)
} else {
setEmbedContent(html);
}
}}
onDelete={(deleteFile) => {
let deleteIdx = null
......
src/components/Uploader.js
......@@ -31,6 +31,7 @@ export default class Uploader extends React.Component {
progress: 0,
isUpload: false,
isSuccess: false,
html: ''
}
this.files = {};
......@@ -109,101 +110,106 @@ export default class Uploader extends React.Component {
}
return (
<Fragment>
<div className={'atma-editor-uploader-uitems'}>
{
Object.keys(this.state.files).map((uid, i) => (
<div
className={ 'atma-editor-uploader-uitems-elem' + (this.modalType === 'file' ? ' atma-editor-uploader-file' : '' ) }
style={{ backgroundImage: `url(${this.state.files[uid].path})` }}
data-url={ this.state.files[uid].path }
key={`key_${i}`}
>
<div className={'atma-editor-uploader-uitems-del'} title={'Удалить'} onClick={()=> this.abortUpload({ uid }) } />
{
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) + '%' }
{this.state.html.length > 0 ? <div dangerouslySetInnerHTML={{__html: this.state.html}} />
:
<>
<div className={'atma-editor-uploader-uitems'}>
{
Object.keys(this.state.files).map((uid, i) => (
<div
className={ 'atma-editor-uploader-uitems-elem' + (this.modalType === 'file' ? ' atma-editor-uploader-file' : '' ) }
style={{ backgroundImage: `url(${this.state.files[uid].path})` }}
data-url={ this.state.files[uid].path }
key={`key_${i}`}
>
<div className={'atma-editor-uploader-uitems-del'} title={'Удалить'} onClick={()=> this.abortUpload({ uid }) } />
{
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>
) : null
}
{ this.modalType === 'file' && <span>{ this.state.files[uid].name }</span> }
</div>
))
}
</div>
<Upload
ref={ ref => this.uploader = ref }
accept={this.accept}
action={this.action}
multiple={this.multiple}
disabled={disabledFileUpload}
beforeUpload={(a, files) => {
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;
) : null
}
{ this.modalType === 'file' && <span>{ this.state.files[uid].name }</span> }
</div>
))
}
</div>
<Upload
ref={ ref => this.uploader = ref }
accept={this.accept}
action={this.action}
multiple={this.multiple}
disabled={disabledFileUpload}
beforeUpload={(a, files) => {
this.files[a.uid] = {...a, percent: 0, uploaded: false};
this.setState({
uploaderSuccess: true,
isUpload: false,
disabledFileUpload: false,
isUpload: true,
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') {
}
});
}
if (resp.state === 'success') {
console.log(resp);
}
}}
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>
}}
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({
uploaderSuccess: true,
isUpload: false,
disabledFileUpload: false,
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') {
}
});
}
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>
)
......
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