Skip to content

R
react-ag-qeditor
Commit 5ab97def by Рамис
Options

fix firefox space 

fix duplicate paste image
fix upload files
parent 2da22428
Showing with 114 additions and 32 deletions
example/src/App.js
...@@ -12,7 +12,7 @@ const App = () => { ...@@ -12,7 +12,7 @@ const App = () => {
console.log('sads', value); console.log('sads', value);
}} }}
uploadOptions={{ uploadOptions={{
url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=YEUk8Mjmh2h9NnJrVO7Srg&expires=1653194293', url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=VE5Gz8OqRY0FduVfM4SP1g&expires=1654771143',
errorMessage: 'Загрузка временно невозможна' errorMessage: 'Загрузка временно невозможна'
}} }}
style={{ style={{
...@@ -27,7 +27,7 @@ const App = () => { ...@@ -27,7 +27,7 @@ const App = () => {
console.log('sads', value); console.log('sads', value);
}} }}
uploadOptions={{ uploadOptions={{
url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=YEUk8Mjmh2h9NnJrVO7Srg&expires=1653194293', url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=VE5Gz8OqRY0FduVfM4SP1g&expires=1654771143',
errorMessage: 'Загрузка временно невозможна' errorMessage: 'Загрузка временно невозможна'
}} }}
style={{ style={{
......
src/QEditor.jsx
import React, { Fragment } from 'react' import React, { Fragment } from 'react'
import ReactQuill, { Quill } from 'react-quill' import ReactQuill, { Quill } from 'react-quill'
import './index.scss'
import 'react-quill/dist/quill.snow.css' import 'react-quill/dist/quill.snow.css'
import './index.scss'
import "katex/dist/katex.min.css" import "katex/dist/katex.min.css"
import ImageBlot from "./blots/ImageBlot" import ImageBlot from "./blots/ImageBlot"
import VideoBlot from "./blots/VideoBlot" import VideoBlot from "./blots/VideoBlot"
...@@ -170,6 +170,20 @@ export default class QEditor extends React.Component { ...@@ -170,6 +170,20 @@ export default class QEditor extends React.Component {
uploadedPaths.push(file); uploadedPaths.push(file);
this.setState({uploadedPaths}); this.setState({uploadedPaths});
}} }}
onDelete={(deleteFile)=>{
let deleteIdx = null;
let uploadedPaths = this.state.uploadedPaths;
uploadedPaths.map((f, i)=>{
if(f.uid === deleteFile.uid){
deleteIdx = i;
}
});
uploadedPaths.splice(deleteIdx, 1);
this.setState({
uploadedPaths
})
}}
multiple={true} multiple={true}
/> />
</Fragment> </Fragment>
...@@ -188,6 +202,20 @@ export default class QEditor extends React.Component { ...@@ -188,6 +202,20 @@ export default class QEditor extends React.Component {
uploadedPaths.push(file); uploadedPaths.push(file);
this.setState({uploadedPaths}); this.setState({uploadedPaths});
}} }}
onDelete={(deleteFile)=>{
let deleteIdx = null;
let uploadedPaths = this.state.uploadedPaths;
uploadedPaths.map((f, i)=>{
if(f.uid === deleteFile.uid){
deleteIdx = i;
}
});
uploadedPaths.splice(deleteIdx, 1);
this.setState({
uploadedPaths
})
}}
multiple={true} multiple={true}
/> />
</Fragment> </Fragment>
...@@ -213,6 +241,10 @@ export default class QEditor extends React.Component { ...@@ -213,6 +241,10 @@ export default class QEditor extends React.Component {
quill.insertEmbed(index, this.state.innerModalType, file.path, Quill.sources.USER); quill.insertEmbed(index, this.state.innerModalType, file.path, Quill.sources.USER);
quill.setSelection(index + 1); quill.setSelection(index + 1);
}); });
this.setState({
uploadedPaths: []
})
break break
default: default:
quill.insertEmbed(index, this.state.innerModalType, this.state.embedContent, Quill.sources.USER); quill.insertEmbed(index, this.state.innerModalType, this.state.embedContent, Quill.sources.USER);
...@@ -319,7 +351,15 @@ export default class QEditor extends React.Component { ...@@ -319,7 +351,15 @@ export default class QEditor extends React.Component {
{ {
title: 'Вставить', title: 'Вставить',
className: ' atma-editor-complete', className: ' atma-editor-complete',
onClick: () => this.quillInsert(), onClick: () => {
if(document.querySelectorAll('.atma-editor-uploader-progress').length > 0){
if(!confirm('Не полностью загруженные файлы будут утеряны. Вы уверены, что хотите продолжить?')){
return false;
}
}
this.quillInsert()
},
disabled: this.isDisabledAction() disabled: this.isDisabledAction()
} }
]) ])
......
src/components/Uploader.js
...@@ -25,17 +25,7 @@ export default class Uploader extends React.Component { ...@@ -25,17 +25,7 @@ export default class Uploader extends React.Component {
super(props); super(props);
this.state = { this.state = {
disabledFileUpload: false, disabledFileUpload: false,
files: { files: {},
/* 'first': {
uid: 'first',
percent: 10,
uploaded: false
},
'second': {
uid: 'second',
percent: 80
}*/
},
dropFiles: [], dropFiles: [],
progress: 0, progress: 0,
isUpload: false, isUpload: false,
...@@ -69,6 +59,10 @@ export default class Uploader extends React.Component { ...@@ -69,6 +59,10 @@ export default class Uploader extends React.Component {
return this.props.onSuccess; return this.props.onSuccess;
} }
get onDelete () {
return this.props.onDelete;
}
get errorMessage () { get errorMessage () {
return this.props.errorMessage; return this.props.errorMessage;
} }
...@@ -77,6 +71,31 @@ export default class Uploader extends React.Component { ...@@ -77,6 +71,31 @@ export default class Uploader extends React.Component {
} }
abortUpload({uid}){
let { files } = this.state;
if(files[uid]){
delete files[uid];
this.setState({
files
}, () => {
if(this.uploader){
this.uploader.abort({uid});
let filesNotUploaded = Object.keys(files).filter((f, i)=>{
return !f.uploaded;
});
if(filesNotUploaded.length === 0){
this.setState({
disabledFileUpload: false
})
}
this.onDelete({uid});
}
});
}
}
render () { render () {
let {disabledFileUpload, isUpload, progress, dropFiles} = this.state; let {disabledFileUpload, isUpload, progress, dropFiles} = this.state;
...@@ -93,13 +112,12 @@ export default class Uploader extends React.Component { ...@@ -93,13 +112,12 @@ export default class Uploader extends React.Component {
className={ 'atma-editor-uploader-uitems-elem' } className={ 'atma-editor-uploader-uitems-elem' }
style={{ backgroundImage: `url(${this.state.files[uid].path})` }} style={{ backgroundImage: `url(${this.state.files[uid].path})` }}
> >
<div className={'atma-editor-uploader-uitems-del'}></div> <div className={'atma-editor-uploader-uitems-del'} title={'Удалить'} onClick={()=> this.abortUpload({ uid }) } />
{ {
this.state.files[uid].uploaded !== true ? ( this.state.files[uid].uploaded !== true ? (
<div className={ 'atma-editor-uploader-progress-wrap' }> <div className={ 'atma-editor-uploader-progress-wrap' }>
<div className={ 'atma-editor-uploader-progress' }> <div className={ 'atma-editor-uploader-progress' }>
<div style={{ width: this.state.files[uid].percent + '%' }} /> { parseInt(this.state.files[uid].percent) + '%' }
</div> </div>
</div> </div>
) : null ) : null
...@@ -109,6 +127,7 @@ export default class Uploader extends React.Component { ...@@ -109,6 +127,7 @@ export default class Uploader extends React.Component {
} }
</div> </div>
<Upload <Upload
ref={ ref => this.uploader = ref }
accept={this.accept} accept={this.accept}
action={this.action} action={this.action}
multiple={this.multiple} multiple={this.multiple}
......
src/index.scss
...@@ -39,7 +39,7 @@ body{ ...@@ -39,7 +39,7 @@ body{
&-editor{ &-editor{
overflow: visible; overflow: visible;
white-space: normal; //white-space: normal;
min-height: 260px; min-height: 260px;
&:after{ &:after{
...@@ -154,17 +154,38 @@ body{ ...@@ -154,17 +154,38 @@ body{
} }
&-del{ &-del{
display: inline-block;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.163%209.649c.092.091.2.152.326.182.125.03.25.03.375%200a.66.66%200%200%200%20.32-.177l3.222-3.222L8.543%209.57a.7.7%200%200%200%20.32.183c.125.033.25.034.373.002a.707.707%200%200%200%20.328-.19.693.693%200%200%200%20.185-.323.753.753%200%200%200%200-.375.68.68%200%200%200-.18-.323L6.432%205.406l3.222-3.222a.655.655%200%200%200%20.18-.322.808.808%200%200%200-.003-.373.693.693%200%200%200-.51-.51.763.763%200%200%200-.373-.004.674.674%200%200%200-.32.183L5.406%204.38%202.269%201.243a.655.655%200%200%200-.323-.18.844.844%200%200%200-.375%200%20.656.656%200%200%200-.328.18.669.669%200%200%200-.186.333.807.807%200%200%200%20.003.373c.03.122.09.228.183.32L4.38%205.406%201.158%208.628a.68.68%200%200%200-.18.317.753.753%200%200%200%200%20.376.693.693%200%200%200%20.185.328z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
border-radius: 10px;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
top: -10px;
right: -10px;
background-color: rgba(204,209,217,0.8);
z-index: 1;
&:hover{
background-color: #FF4E44;
cursor: pointer;
}
} }
} }
&-progress{ &-progress{
display: flex;
position: relative; position: relative;
width: 40px; width: 46px;
height: 8px; height: 46px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 4px; border-radius: 23px;
color: #1790FF;
font-size: 13px;
justify-content: center;
align-items: center;
&-wrap{ &-wrap{
display: flex; display: flex;
...@@ -179,14 +200,17 @@ body{ ...@@ -179,14 +200,17 @@ body{
align-items: center; align-items: center;
} }
& > div{ //& > div{
position: absolute; // position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
height: 100%; // height: 100%;
background-color: #1790FF; // background-color: #1790FF;
border-radius: 4px; // border-radius: 4px;
} // overflow: hidden;
//
//
//}
} }
} }
...@@ -319,4 +343,3 @@ body{ ...@@ -319,4 +343,3 @@ body{
} }
} }
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