Skip to content

R
react-ag-qeditor
Commit 7872ba43 by Рамис
Options

fix bug

parent 59021c3c
Showing with 45 additions and 39 deletions
example/src/App.js
......@@ -8,7 +8,7 @@ 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" width="100"></p>'}
'<p><img src="https://cdn.atmaguru.online/2/atma/4/e/4edof0juw55fUp6TC41r7Swt4eCMWFGHJKBvtZxyglvI2B7aae1NRsqkvV7CLkny.jpeg" style="width: 100px;"></p>'}
onChange={(value)=>{
console.log('sads', value);
}}
......
package.json
{
"name": "react-ag-qeditor",
"version": "0.0.5",
"version": "0.0.6",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
......
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 ImageBlot from "./blots/ImageBlot";
import VideoBlot from "./blots/VideoBlot";
import VideoLocalBlot from "./blots/VideoLocalBlot";
import EditorModal from "./components/EditorModal";
import Uploader from "./components/Uploader";
import "katex/dist/katex.min.css";
import ImageResize from "quill-image-resize-module-react";
import BlotFormatter from 'quill-blot-formatter';
import ReactQuill, { Quill } from 'react-quill'
import './index.scss'
import 'react-quill/dist/quill.snow.css'
import "katex/dist/katex.min.css"
import ImageBlot from "./blots/ImageBlot"
import VideoBlot from "./blots/VideoBlot"
import VideoLocalBlot from "./blots/VideoLocalBlot"
import EditorModal from "./components/EditorModal"
import Uploader from "./components/Uploader"
import BlotFormatter from 'quill-blot-formatter'
import ResizeImageBlot from "./blots/ResizeImageBlot"
import katex from "katex";
Quill.register('modules/blotFormatter', BlotFormatter);
export default class QEditor extends React.Component {
constructor (props) {
super(props)
......@@ -32,7 +27,7 @@ export default class QEditor extends React.Component {
Quill.register('formats/video', VideoBlot)
Quill.register('formats/videoLocal', VideoLocalBlot)
// Quill.register('modules/imageResize', ImageResize)
Quill.register('modules/blotFormatter', BlotFormatter)
Quill.register('formats/image', ImageBlot)
}
......@@ -75,32 +70,15 @@ export default class QEditor extends React.Component {
}, () => this.editorModal.show({title: 'Загрузить видео'}));
},
image: (a) => {
console.log(a);
this.setState({
innerModalType: 'image'
}, () => this.editorModal.show({title: 'Загрузить изображение'}));
}
}
},
// imageResize: {
// parchment: Quill.import("parchment"),
// modules: ["Resize", "DisplaySize"]
// },
blotFormatter: {}
/* clipboard: {
matchers: [
['IMG', (node, delta)=>{
console.log(delta)
return delta.compose(new Delta().retain(delta.length(), { width: 100, title: 'ekwgon' }));
}]
]
} */
blotFormatter: {
specs: [ ResizeImageBlot ],
}
}
formats = [
......@@ -144,6 +122,7 @@ export default class QEditor extends React.Component {
<li className={'vimeo'}/>
{/* <li className={'vk'}/> */}
<li className={'ok'}/>
<li className={'rutube'}/>
</ul>
</Fragment>
)
......
src/blots/ImageBlot.js
......@@ -13,6 +13,16 @@ export default class ImageBlot extends Image {
}
static value(domNode) {
if(domNode.hasAttribute('style')) {
domNode.style.height = 'none';
if(domNode.style.width !== '' && domNode.style.width !== 'auto'){
domNode.setAttribute('width', domNode.style.width);
domNode.style.width = '';
}
}
return domNode;
}
......
src/blots/ResizeImageBlot.js 0 → 100644
import { AlignAction, DeleteAction, ImageSpec, ResizeAction } from "quill-blot-formatter";
export default class ResizeImageBlot extends ImageSpec {
getActions() {
return [AlignAction, DeleteAction, ResizeAction];
}
}
src/blots/VideoBlot.js
......@@ -17,6 +17,10 @@ export default class VideoBlot extends Video {
case 'www.rutube.ru':
value = `https://rutube.ru/pl/?pl_id&pl_type&pl_video=${id}`;
break
case 'vimeo.com':
value = `https://player.vimeo.com/video/${id}`;
break
case 'ok.ru':
case 'www.ok.ru':
value = `//ok.ru/videoembed/${id}`;
......
src/index.scss
......@@ -243,6 +243,12 @@
width: 24px;
height: 24px;
}
&.rutube{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2246%22%20height%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.902%206H0v15h3.87v-4.88h7.414L14.667%2021H19l-3.73-4.902c1.158-.18%201.992-.608%202.502-1.282.51-.675.765-1.755.765-3.194v-1.124c0-.855-.093-1.53-.255-2.047a3.399%203.399%200%200%200-.834-1.372%203.799%203.799%200%200%200-1.437-.832C15.455%206.09%2014.76%206%2013.903%206zm-.625%206.814H3.87V9.306h9.407c.533%200%20.904.09%201.089.247.185.158.301.45.301.877v1.26c0%20.45-.116.742-.301.9-.185.157-.556.224-1.09.224zM24.758%2016.57V6H21v10.48c0%20.854.067%201.552.225%202.069.157.54.427.99.832%201.372.383.404.833.674%201.373.832.54.18%201.215.247%202.07.247h9c.833%200%201.508-.067%202.047-.247.54-.158.99-.428%201.396-.832.382-.383.652-.832.81-1.372.157-.517.247-1.215.247-2.07V6h-3.758v10.57c0%20.45-.112.742-.292.9-.18.157-.54.224-1.058.224h-7.785c-.54%200-.9-.067-1.08-.225-.18-.157-.27-.45-.27-.9z%22%20fill%3D%22%2314191E%22%2F%3E%3Cpath%20d%3D%22M42.682%205.252a2.623%202.623%200%200%200%202.619-2.626A2.623%202.623%200%200%200%2042.682%200a2.623%202.623%200%200%200-2.62%202.626%202.623%202.623%200%200%200%202.62%202.626z%22%20fill%3D%22%23F41240%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
width: 32px;
height: 24px;
background-size: contain;
}
}
}
......
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