Skip to content

R
react-ag-qeditor
Commit 891a245b by Рамис
Options

new editor

parent fb694d4e
Showing with 10 additions and 149 deletions
example/src/App.js
......@@ -7,7 +7,7 @@ import 'react-ag-qeditor/dist/index.css'
const App = () => {
return <div style={{padding:40}}>
<QEditor
value={'<p><span style="font-size: 24px;"><strong>Наш принцип №4 - Непрерывно улучшать процессы</strong></span></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><ul><li>Мы следим за современными тенденциями рынка и идём в ногу со временем</li><li>Мы изобретаем новые эффективные способы решения задач</li><li>Мы приветствуем и поощряем инициативу каждого сотрудника компании</li><li>Мы устраняем проблемы и ошибки в процессах</li><li>Мы используем непрерывный цикл Планируй-Делай-Контролируй-Корректируй для улучшения наших процессов</li><li>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</li><li>Мы замечаем проблемы и ошибки в процессах и говорим о них</li></ul>'}
value={'<div><img src="https://picsum.photos/200" width="100" /></div><p><span style="font-size: 40px;"><strong>Наш принцип №4 - Непрерывно улучшать процессы</strong></span></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><ul><li>Мы следим за современными тенденциями рынка и идём в ногу со временем</li><li>Мы изобретаем новые эффективные способы решения задач</li><li>Мы приветствуем и поощряем инициативу каждого сотрудника компании</li><li>Мы устраняем проблемы и ошибки в процессах</li><li>Мы используем непрерывный цикл Планируй-Делай-Контролируй-Корректируй для улучшения наших процессов</li><li>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</li><li>Мы замечаем проблемы и ошибки в процессах и говорим о них</li></ul>'}
onChange={(value)=>{
console.log('sads', value);
}}
......
package.json
{
"name": "react-ag-qeditor",
"version": "1.0.2",
"version": "1.0.3",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
......
src/QEditor.jsx
......@@ -201,7 +201,9 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
extensions: [
StarterKit,
Underline,
Image,
Image.configure({
inline: true
}),
Link.configure({
autolink: true,
linkOnPaste: true,
......@@ -351,7 +353,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
<BubbleMenu editor={editor} shouldShow={({...o}) => {
let items = [];
if(o.from !== o.to && editor.isActive('paragraph')){
if(o.from !== o.to && editor.isActive('paragraph') && editor.isActive('image') === false){
items = initialBubbleItems;
}
......@@ -388,7 +390,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
}
if(editor.isActive('image') === true){
setBubbleItems(['alignLeft', 'alignCenter', 'alignRight']);
items = ['alignLeft', 'alignCenter', 'alignRight'];
}
if(items.length > 0){
setBubbleItems(items);
......
src/blots/ImageBlot.js deleted 100644 → 0
import { Quill } from 'react-quill'
const Image = Quill.import('formats/image')
export default class ImageBlot extends Image {
static create(value) {
if (typeof value == 'string') {
return super.create(value);
} else {
return value;
}
}
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;
}
static get ATTRIBUTES() {
return [ 'alt', 'height', 'width' ]
}
//
// static formats(domNode) {
//
// console.log(domNode);
//
//
// return this.ATTRIBUTES.reduce(function(formats, attribute) {
// if (domNode.hasAttribute(attribute)) {
// formats[attribute] = domNode.getAttribute(attribute);
// }
// return formats;
// }, {});
// }
formatAt(name, value) {
console.log(name, value);
if (this.constructor.ATTRIBUTES.indexOf(name) > -1) {
if (value) {
this.domNode.setAttribute(name, value);
} else {
this.domNode.removeAttribute(name);
}
} else {
super.format(name, value);
}
}
}
src/blots/ResizeImageBlot.js deleted 100644 → 0
import { AlignAction, DeleteAction, ImageSpec, ResizeAction } from "quill-blot-formatter";
export default class ResizeImageBlot extends ImageSpec {
getActions() {
return [AlignAction, DeleteAction, ResizeAction];
}
}
src/blots/VideoBlot.js deleted 100644 → 0
import { Quill } from 'react-quill'
const Video = Quill.import('formats/video')
export default class VideoBlot extends Video {
static create (value) {
let type = '';
let node = null;
var reg = /(http|https):\/\/([\w.]+\/?)\S*/;
const url = new URL(reg.test(value) ? value : 'https:' + value);
let urlId = url.pathname.replace(/\/$/ig, '').split('/').pop();
console.log(urlId);
switch (url.hostname){
case 'rutube.ru':
case 'www.rutube.ru':
value = `https://rutube.ru/pl/?pl_id&pl_type&pl_video=${urlId}`;
break
case 'vimeo.com':
value = `https://player.vimeo.com/video/${urlId}`;
break
case 'ok.ru':
case 'www.ok.ru':
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 !== ''){
if(url.searchParams.get('v')){
urlId = url.searchParams.get('v');
}
}
value = `https://www.youtube.com/embed/${urlId}`;
// console.log(id);
break
}
node = super.create(value);
node.setAttribute('style', 'width:1280px;height:auto;aspect-ratio: 16 / 9;');
return node;
}
}
VideoBlot.tagName = 'IFRAME';
VideoBlot.blotName = 'video';
src/blots/VideoLocalBlot.js deleted 100644 → 0
import { Quill } from 'react-quill';
const BlockEmbed = Quill.import('blots/block/embed');
export default class VideoLocalBlot extends BlockEmbed {
static create (value){
let node = super.create(value);
node.setAttribute('src', value);
node.setAttribute('controls', true);
node.setAttribute('disabled', true);
node.setAttribute('poster', value + '.jpg');
return node;
}
static value(node){
return node.getAttribute('src');
}
}
VideoLocalBlot.tagName = 'VIDEO';
VideoLocalBlot.className = 'ql-video-local';
VideoLocalBlot.blotName = 'videoLocal';
src/components/ToolBar.js
......@@ -93,11 +93,11 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
let gItems = [];
if(section.type === 'g'){
section.items.map((gKey, idx)=>{
gItems.push(getItem(gKey, `g-${ i }-${ idx }`))
gItems.push(getItem(gKey, `tools-g-item-${ i }-${ idx }`))
})
toolItems.push(
<div className="atma-editor-toolbar-g">{ gItems }</div>
<div key={`tools-g${i}`} className="atma-editor-toolbar-g">{ gItems }</div>
)
}
})
......
src/index.scss
......@@ -25,6 +25,7 @@ body{
border-radius: 4px 4px 0 0;
border: 1px solid #ccc;
background-color: #ffffff;
box-shadow: 0 -3px 0 3px #ffffff;
padding: 6px;
z-index: 1;
......
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