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'
const App = () => {
return <div style={{padding:40}}>
<QEditor
value={'<p><b>bold</b></p>' +
'<p><img src="https://cdn.atmaguru.online/2/atma/4/e/4edof0juw55fUp6TC41r7Swt4eCMWFGHJKBvtZxyglvI2B7aae1NRsqkvV7CLkny.jpeg" style="width: 100px;"></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>'}
onChange={(value)=>{
console.log('sads', value);
}}
......@@ -16,6 +15,10 @@ const App = () => {
url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=YEUk8Mjmh2h9NnJrVO7Srg&expires=1653194293',
errorMessage: 'Загрузка временно невозможна'
}}
style={{
maxWidth: '830px',
margin: '20px 20px 20px 100px',
}}
/>
</div>
}
......
src/QEditor.jsx
......@@ -22,7 +22,8 @@ export default class QEditor extends React.Component {
quillRef: null,
uploadedPaths: [],
uploaderUid: 'uid' + new Date(),
embedContent: ''
embedContent: '',
focusedIndex: 0
}
Quill.register('formats/video', VideoBlot)
......@@ -36,6 +37,8 @@ export default class QEditor extends React.Component {
this.setState({
init: true
})
console.log();
}
modules = {
......@@ -57,21 +60,37 @@ export default class QEditor extends React.Component {
handlers: {
video: (a) => {
const quill = this.quillRef.getEditor();
let range = quill.getSelection();
let index = range ? range.index : 0;
this.setState(
{
innerModalType: 'video'
innerModalType: 'video',
focusedIndex: index
},
() => this.editorModal.show({title: 'Видео по ссылке'})
)
},
videoLocal: () => {
videoLocal: (a) => {
const quill = this.quillRef.getEditor();
let range = quill.getSelection();
let index = range ? range.index : 0;
this.setState({
innerModalType: 'videoLocal'
innerModalType: 'videoLocal',
focusedIndex: index
}, () => this.editorModal.show({title: 'Загрузить видео'}));
},
image: (a) => {
const quill = this.quillRef.getEditor();
let range = quill.getSelection();
let index = range ? range.index : 0;
this.setState({
innerModalType: 'image'
innerModalType: 'image',
focusedIndex: index
}, () => this.editorModal.show({title: 'Загрузить изображение'}));
}
}
......@@ -172,17 +191,22 @@ export default class QEditor extends React.Component {
let range = quill.getSelection();
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 'videoLocal':
this.state.uploadedPaths.map((file, i) => {
quill.insertEmbed(index, this.state.innerModalType, file.path, Quill.sources.USER);
quill.setSelection(index + 1);
quill.blur();
});
break
default:
quill.insertEmbed(index, this.state.innerModalType, this.state.embedContent, Quill.sources.USER);
quill.setSelection(index + 1);
......@@ -190,13 +214,52 @@ export default class QEditor extends React.Component {
this.setState({
uploaderUid: `uid${new Date()}`,
embedContent: ''
embedContent: '',
focusedIndex: 0
}, () => 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 () {
let {init, innerModalType, modalIsOpen} = this.state;
let {maxWidth, maxHeight, value} = this.props;
let { value, style } = this.props;
window.katex = katex;
......@@ -205,7 +268,7 @@ export default class QEditor extends React.Component {
}
return (
<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' }>
<ReactQuill
ref={ref => this.quillRef = ref}
......@@ -231,9 +294,14 @@ export default class QEditor extends React.Component {
title: 'Отмена',
className: ' atma-editor-cancel',
onClick: () => {
const quill = this.quillRef.getEditor();
let range = quill.getSelection();
let index = range ? range.index : 0;
this.setState(
{
uploaderUid: `uid${new Date()}`
uploaderUid: `uid${new Date()}`,
uploadedPaths: []
},
() => this.editorModal.hide()
)
......@@ -243,7 +311,7 @@ export default class QEditor extends React.Component {
title: 'Вставить',
className: ' atma-editor-complete',
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 {
}
QEditor.defaultProps = {
maxWidth: 'auto',
maxHeight: 1000,
onChange: ()=>{},
lang: 'ru',
uploadOptions: {
url: null,
errorMessage: 'Загрузка временно невозможна'
}
},
style: {}
}
src/blots/VideoBlot.js
......@@ -10,29 +10,29 @@ export default class VideoBlot extends Video {
let type = '';
let node = null;
const url = new URL(value);
let id = url.pathname.replace(/\/$/ig, '').split('/').pop();
let urlId = url.pathname.replace(/\/$/ig, '').split('/').pop();
switch (url.hostname){
case '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
case 'vimeo.com':
value = `https://player.vimeo.com/video/${id}`;
value = `https://player.vimeo.com/video/${urlId}`;
break
case 'ok.ru':
case 'www.ok.ru':
value = `//ok.ru/videoembed/${id}`;
value = `//ok.ru/videoembed/${urlId}`;
break
case 'youtu.be':
case 'youtube.com':
case 'www.youtube.com':
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);
break
}
......
src/blots/VideoLocalBlot.js
......@@ -2,20 +2,20 @@ import { Quill } from 'react-quill';
const BlockEmbed = Quill.import('blots/block/embed');
export default class VideoLocalBlot extends BlockEmbed {
static tagName = 'video';
static blotName = 'videoLocal';
static create (value){
console.log(value);
let node = super.create(value);
node.setAttribute('class', 'ql-video');
node.setAttribute('autoplay', true);
// node.setAttribute('loop', true);
node.setAttribute('src', value);
node.setAttribute('controls', true);
return node;
}
......
src/index.scss
......@@ -34,6 +34,7 @@
&-editor{
overflow: visible;
white-space: normal;
&:after{
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