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 = () => {
console.log('sads', value);
}}
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: 'Загрузка временно невозможна'
}}
style={{
......@@ -27,7 +27,7 @@ const App = () => {
console.log('sads', value);
}}
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: 'Загрузка временно невозможна'
}}
style={{
......
src/QEditor.jsx
import React, { Fragment } from 'react'
import ReactQuill, { Quill } from 'react-quill'
import './index.scss'
import 'react-quill/dist/quill.snow.css'
import './index.scss'
import "katex/dist/katex.min.css"
import ImageBlot from "./blots/ImageBlot"
import VideoBlot from "./blots/VideoBlot"
......@@ -170,6 +170,20 @@ export default class QEditor extends React.Component {
uploadedPaths.push(file);
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}
/>
</Fragment>
......@@ -188,6 +202,20 @@ export default class QEditor extends React.Component {
uploadedPaths.push(file);
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}
/>
</Fragment>
......@@ -213,6 +241,10 @@ export default class QEditor extends React.Component {
quill.insertEmbed(index, this.state.innerModalType, file.path, Quill.sources.USER);
quill.setSelection(index + 1);
});
this.setState({
uploadedPaths: []
})
break
default:
quill.insertEmbed(index, this.state.innerModalType, this.state.embedContent, Quill.sources.USER);
......@@ -319,7 +351,15 @@ export default class QEditor extends React.Component {
{
title: 'Вставить',
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()
}
])
......
src/components/Uploader.js
......@@ -25,17 +25,7 @@ export default class Uploader extends React.Component {
super(props);
this.state = {
disabledFileUpload: false,
files: {
/* 'first': {
uid: 'first',
percent: 10,
uploaded: false
},
'second': {
uid: 'second',
percent: 80
}*/
},
files: {},
dropFiles: [],
progress: 0,
isUpload: false,
......@@ -69,6 +59,10 @@ export default class Uploader extends React.Component {
return this.props.onSuccess;
}
get onDelete () {
return this.props.onDelete;
}
get errorMessage () {
return this.props.errorMessage;
}
......@@ -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 () {
let {disabledFileUpload, isUpload, progress, dropFiles} = this.state;
......@@ -93,13 +112,12 @@ export default class Uploader extends React.Component {
className={ 'atma-editor-uploader-uitems-elem' }
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 ? (
<div className={ 'atma-editor-uploader-progress-wrap' }>
<div className={ 'atma-editor-uploader-progress' }>
<div style={{ width: this.state.files[uid].percent + '%' }} />
{ parseInt(this.state.files[uid].percent) + '%' }
</div>
</div>
) : null
......@@ -109,6 +127,7 @@ export default class Uploader extends React.Component {
}
</div>
<Upload
ref={ ref => this.uploader = ref }
accept={this.accept}
action={this.action}
multiple={this.multiple}
......
src/index.scss
......@@ -39,7 +39,7 @@ body{
&-editor{
overflow: visible;
white-space: normal;
//white-space: normal;
min-height: 260px;
&:after{
......@@ -154,17 +154,38 @@ body{
}
&-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{
display: flex;
position: relative;
width: 40px;
height: 8px;
width: 46px;
height: 46px;
background-color: #ffffff;
border-radius: 4px;
border-radius: 23px;
color: #1790FF;
font-size: 13px;
justify-content: center;
align-items: center;
&-wrap{
display: flex;
......@@ -179,14 +200,17 @@ body{
align-items: center;
}
& > div{
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #1790FF;
border-radius: 4px;
}
//& > div{
// position: absolute;
// top: 0;
// left: 0;
// height: 100%;
// background-color: #1790FF;
// border-radius: 4px;
// overflow: hidden;
//
//
//}
}
}
......@@ -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