Skip to content

R
react-ag-qeditor
Commit 82faaded by Рамис
Options

add validation upload files and fix bug

parent 7872ba43
Showing with 99 additions and 28 deletions
example/src/App.js
...@@ -7,8 +7,7 @@ import 'react-ag-qeditor/dist/index.css' ...@@ -7,8 +7,7 @@ import 'react-ag-qeditor/dist/index.css'
const App = () => { const App = () => {
return <div style={{padding:40}}> return <div style={{padding:40}}>
<QEditor <QEditor
value={'<p><b>bold</b></p>' + value={'<p>Катарсис философски трансформирует конфликт. Надстройка иллюзорна. Можно&nbsp;предположить,&nbsp;что закон&nbsp;внешнего&nbsp;мира создает сложный позитивизм.</p><p>Вероятностная логика, следовательно, контролирует бабувизм. Вещь в себе, следовательно, транспонирует закон&nbsp;внешнего&nbsp;мира. Заблуждение, по определению, понимает&nbsp;под&nbsp;собой конфликт, tertium nоn datur. Ощущение&nbsp;мира подрывает гравитационный парадокс. Гештальтпсихология, конечно, реально рассматривается данный дуализм. Здравый смысл ясен&nbsp;не&nbsp;всем.</p><p><br></p><p>Отвечая на вопрос о взаимоотношении идеального ли и материального ци, Дай Чжень заявлял, что антропосоциология непредвзято создает принцип&nbsp;восприятия, отрицая&nbsp;очевидное. Апостериори, александрийская школа откровенна. Исчисление предикатов, как принято считать, рассматривается мир. Отсюда&nbsp;естественно&nbsp;следует,&nbsp;что надстройка рефлектирует естественный закон исключённого третьего. Любовь методологически рефлектирует смысл&nbsp;жизни.</p>'}
'<p><img src="https://cdn.atmaguru.online/2/atma/4/e/4edof0juw55fUp6TC41r7Swt4eCMWFGHJKBvtZxyglvI2B7aae1NRsqkvV7CLkny.jpeg" style="width: 100px;"></p>'}
onChange={(value)=>{ onChange={(value)=>{
console.log('sads', value); console.log('sads', value);
}} }}
...@@ -16,6 +15,10 @@ const App = () => { ...@@ -16,6 +15,10 @@ const App = () => {
url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=YEUk8Mjmh2h9NnJrVO7Srg&expires=1653194293', url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=YEUk8Mjmh2h9NnJrVO7Srg&expires=1653194293',
errorMessage: 'Загрузка временно невозможна' errorMessage: 'Загрузка временно невозможна'
}} }}
style={{
maxWidth: '830px',
margin: '20px 20px 20px 100px',
}}
/> />
</div> </div>
} }
......
src/QEditor.jsx
...@@ -22,7 +22,8 @@ export default class QEditor extends React.Component { ...@@ -22,7 +22,8 @@ export default class QEditor extends React.Component {
quillRef: null, quillRef: null,
uploadedPaths: [], uploadedPaths: [],
uploaderUid: 'uid' + new Date(), uploaderUid: 'uid' + new Date(),
embedContent: '' embedContent: '',
focusedIndex: 0
} }
Quill.register('formats/video', VideoBlot) Quill.register('formats/video', VideoBlot)
...@@ -36,6 +37,8 @@ export default class QEditor extends React.Component { ...@@ -36,6 +37,8 @@ export default class QEditor extends React.Component {
this.setState({ this.setState({
init: true init: true
}) })
console.log();
} }
modules = { modules = {
...@@ -57,21 +60,37 @@ export default class QEditor extends React.Component { ...@@ -57,21 +60,37 @@ export default class QEditor extends React.Component {
handlers: { handlers: {
video: (a) => { video: (a) => {
const quill = this.quillRef.getEditor();
let range = quill.getSelection();
let index = range ? range.index : 0;
this.setState( this.setState(
{ {
innerModalType: 'video' innerModalType: 'video',
focusedIndex: index
}, },
() => this.editorModal.show({title: 'Видео по ссылке'}) () => this.editorModal.show({title: 'Видео по ссылке'})
) )
}, },
videoLocal: () => { videoLocal: (a) => {
const quill = this.quillRef.getEditor();
let range = quill.getSelection();
let index = range ? range.index : 0;
this.setState({ this.setState({
innerModalType: 'videoLocal' innerModalType: 'videoLocal',
focusedIndex: index
}, () => this.editorModal.show({title: 'Загрузить видео'})); }, () => this.editorModal.show({title: 'Загрузить видео'}));
}, },
image: (a) => { image: (a) => {
const quill = this.quillRef.getEditor();
let range = quill.getSelection();
let index = range ? range.index : 0;
this.setState({ this.setState({
innerModalType: 'image' innerModalType: 'image',
focusedIndex: index
}, () => this.editorModal.show({title: 'Загрузить изображение'})); }, () => this.editorModal.show({title: 'Загрузить изображение'}));
} }
} }
...@@ -172,17 +191,22 @@ export default class QEditor extends React.Component { ...@@ -172,17 +191,22 @@ export default class QEditor extends React.Component {
let range = quill.getSelection(); let range = quill.getSelection();
let index = range ? range.index : 0; let index = range ? range.index : 0;
switch (this.state.innerModalType) {
// console.log(quill)
if(this.state.focusedIndex > 0){
index = this.state.focusedIndex;
}
switch (this.state.innerModalType) {
case 'image': case 'image':
case 'videoLocal': case 'videoLocal':
this.state.uploadedPaths.map((file, i) => { this.state.uploadedPaths.map((file, i) => {
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);
quill.blur();
}); });
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);
quill.setSelection(index + 1); quill.setSelection(index + 1);
...@@ -190,13 +214,52 @@ export default class QEditor extends React.Component { ...@@ -190,13 +214,52 @@ export default class QEditor extends React.Component {
this.setState({ this.setState({
uploaderUid: `uid${new Date()}`, uploaderUid: `uid${new Date()}`,
embedContent: '' embedContent: '',
focusedIndex: 0
}, () => this.editorModal.hide()); }, () => this.editorModal.hide());
} }
isDisabledAction(){
let { innerModalType, uploadedPaths, embedContent } = this.state;
let isDisabled = false;
switch(innerModalType){
case 'videoLocal':
case 'image':
if(this.props.uploadOptions.url === null || uploadedPaths.length === 0){
isDisabled = true;
}
break;
case 'video':
try{
let url = new URL(embedContent);
switch (url.hostname){
case 'rutube.ru':
case 'www.rutube.ru':
case 'vimeo.com':
case 'ok.ru':
case 'www.ok.ru':
case 'youtu.be':
case 'youtube.com':
case 'www.youtube.com':
break;
default:
isDisabled = true;
}
}catch (error){
isDisabled = true;
}
break;
}
return isDisabled;
}
render () { render () {
let {init, innerModalType, modalIsOpen} = this.state; let {init, innerModalType, modalIsOpen} = this.state;
let {maxWidth, maxHeight, value} = this.props; let { value, style } = this.props;
window.katex = katex; window.katex = katex;
...@@ -205,7 +268,7 @@ export default class QEditor extends React.Component { ...@@ -205,7 +268,7 @@ export default class QEditor extends React.Component {
} }
return ( return (
<Fragment> <Fragment>
<div className="atma-editor-wrap" style={{maxWidth}}> <div className="atma-editor-wrap" style={style}>
<div className={'atma-editor'} data-lang={ this.props.lang ? this.props.lang : 'ru' }> <div className={'atma-editor'} data-lang={ this.props.lang ? this.props.lang : 'ru' }>
<ReactQuill <ReactQuill
ref={ref => this.quillRef = ref} ref={ref => this.quillRef = ref}
...@@ -231,9 +294,14 @@ export default class QEditor extends React.Component { ...@@ -231,9 +294,14 @@ export default class QEditor extends React.Component {
title: 'Отмена', title: 'Отмена',
className: ' atma-editor-cancel', className: ' atma-editor-cancel',
onClick: () => { onClick: () => {
const quill = this.quillRef.getEditor();
let range = quill.getSelection();
let index = range ? range.index : 0;
this.setState( this.setState(
{ {
uploaderUid: `uid${new Date()}` uploaderUid: `uid${new Date()}`,
uploadedPaths: []
}, },
() => this.editorModal.hide() () => this.editorModal.hide()
) )
...@@ -243,7 +311,7 @@ export default class QEditor extends React.Component { ...@@ -243,7 +311,7 @@ export default class QEditor extends React.Component {
title: 'Вставить', title: 'Вставить',
className: ' atma-editor-complete', className: ' atma-editor-complete',
onClick: () => this.quillInsert(), onClick: () => this.quillInsert(),
disabled: (this.props.uploadOptions.url === null && (innerModalType === 'videoLocal' || innerModalType === 'image')) disabled: this.isDisabledAction()
} }
]) ])
} }
...@@ -255,12 +323,11 @@ export default class QEditor extends React.Component { ...@@ -255,12 +323,11 @@ export default class QEditor extends React.Component {
} }
QEditor.defaultProps = { QEditor.defaultProps = {
maxWidth: 'auto',
maxHeight: 1000,
onChange: ()=>{}, onChange: ()=>{},
lang: 'ru', lang: 'ru',
uploadOptions: { uploadOptions: {
url: null, url: null,
errorMessage: 'Загрузка временно невозможна' errorMessage: 'Загрузка временно невозможна'
} },
style: {}
} }
src/blots/VideoBlot.js
...@@ -10,29 +10,29 @@ export default class VideoBlot extends Video { ...@@ -10,29 +10,29 @@ export default class VideoBlot extends Video {
let type = ''; let type = '';
let node = null; let node = null;
const url = new URL(value); const url = new URL(value);
let id = url.pathname.replace(/\/$/ig, '').split('/').pop(); let urlId = url.pathname.replace(/\/$/ig, '').split('/').pop();
switch (url.hostname){ switch (url.hostname){
case 'rutube.ru': case 'rutube.ru':
case 'www.rutube.ru': case 'www.rutube.ru':
value = `https://rutube.ru/pl/?pl_id&pl_type&pl_video=${id}`; value = `https://rutube.ru/pl/?pl_id&pl_type&pl_video=${urlId}`;
break break
case 'vimeo.com': case 'vimeo.com':
value = `https://player.vimeo.com/video/${id}`; value = `https://player.vimeo.com/video/${urlId}`;
break break
case 'ok.ru': case 'ok.ru':
case 'www.ok.ru': case 'www.ok.ru':
value = `//ok.ru/videoembed/${id}`; value = `//ok.ru/videoembed/${urlId}`;
break break
case 'youtu.be': case 'youtu.be':
case 'youtube.com': case 'youtube.com':
case 'www.youtube.com': case 'www.youtube.com':
if(url.hostname.indexOf('youtu.be') === -1 && url.search !== ''){ if(url.hostname.indexOf('youtu.be') === -1 && url.search !== ''){
id = url.searchParams.get('v'); urlId = url.searchParams.get('v');
} }
value = `https://www.youtube.com/embed/${id}`; value = `https://www.youtube.com/embed/${urlId}`;
// console.log(id); // console.log(id);
break break
} }
......
src/blots/VideoLocalBlot.js
...@@ -2,20 +2,20 @@ import { Quill } from 'react-quill'; ...@@ -2,20 +2,20 @@ import { Quill } from 'react-quill';
const BlockEmbed = Quill.import('blots/block/embed'); const BlockEmbed = Quill.import('blots/block/embed');
export default class VideoLocalBlot extends BlockEmbed { export default class VideoLocalBlot extends BlockEmbed {
static tagName = 'video'; static tagName = 'video';
static blotName = 'videoLocal'; static blotName = 'videoLocal';
static create (value){ static create (value){
console.log(value);
let node = super.create(value); let node = super.create(value);
node.setAttribute('class', 'ql-video'); node.setAttribute('class', 'ql-video');
node.setAttribute('autoplay', true);
// node.setAttribute('loop', true);
node.setAttribute('src', value); node.setAttribute('src', value);
node.setAttribute('controls', true); node.setAttribute('controls', true);
return node; return node;
} }
......
src/index.scss
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
&-editor{ &-editor{
overflow: visible; overflow: visible;
white-space: normal;
&:after{ &:after{
content: ""; content: "";
......
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