Skip to content

R
react-ag-qeditor
Commit 29c3e622 by Рамис
Options

new editor

parent 7ab063ca
Showing with 125 additions and 49 deletions
example/src/App.js
......@@ -7,22 +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><br></p><table style="width: 100%;"><tbody><tr><td style="width: 50.0000%;"><img src="https://fs1.sintegrum.com/api/v1/files/qBGd6qdcF-U5ulKXFIkII8VuM92K9Vpd" style="width: 628px;" class="fr-fic fr-dib"><br></td><td style="width: 50.0000%;"><div style="text-align: left;">Для каждого сотрудника компании качественная деятельность является естественной. &nbsp;Качественный &nbsp;сервис &ndash; это то, что обеспечивает компании лидирующее положение на рынке. Мы развиваем и обеспечиваем качество наших услуг и всех процессов в компании. Основой для обеспечения и развития качества является система стандартов и регламентов компании, неукоснительное соблюдение которых является нашим принципом</div><div data-empty="true" style="text-align: left;"><br></div><div style="text-align: left;">Посмотрите видео:</div><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe width="640" height="360" src="//www.youtube.com/embed/mfOZnfuVy-g?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></span><br></td></tr></tbody></table><p><br></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);
}}
uploadOptions={{
url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=VE5Gz8OqRY0FduVfM4SP1g&expires=1654771143',
errorMessage: 'Загрузка временно невозможна'
}}
style={{
maxWidth: '830px',
margin: '20px 20px 20px 100px',
}}
/>
<QEditor
value={'<p><strong>Наш принцип №4 - Непрерывно улучшать процессы</strong></p><p><br></p><p><img src="https://fs1.sintegrum.com/api/v1/files/qBGd6qdcF-U5ulKXFIkII8VuM92K9Vpd" style="" class="fr-fic fr-dib" width="628px"></p><p>Для каждого сотрудника компании качественная деятельность является естественной.&nbsp;Качественный&nbsp;сервис – это то, что обеспечивает компании лидирующее положение на рынке. Мы развиваем и обеспечиваем качество наших услуг и всех процессов в компании. Основой для обеспечения и развития качества является система стандартов и регламентов компании, неукоснительное соблюдение которых является нашим принципом</p><p><br></p><p><br></p><video class="ql-video-local" src="https://cdn.atmaguru.online/2/test/5/K/5KHrK0aNzS5Eb6SPSnT8nW4oM59q7nrZIgDxtk0OVOIsN4Hw64FsGDjoSmQVRrqy.mp4.mp4" controls="true" disabled="true" poster="https://cdn.atmaguru.online/2/test/5/K/5KHrK0aNzS5Eb6SPSnT8nW4oM59q7nrZIgDxtk0OVOIsN4Hw64FsGDjoSmQVRrqy.mp4.mp4.jpg"></video><p><br></p><p>Посмотрите видео:</p><p><br></p><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/mfOZnfuVy-g" style="width:1280px;height:auto;aspect-ratio: 16 / 9;"></iframe><p><br></p><p><br></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><p><br></p><ul><li>Мы следим за современными тенденциями рынка и идём в ногу со временем</li><li>Мы изобретаем новые эффективные способы решения задач</li><li>Мы приветствуем и поощряем инициативу каждого сотрудника компании</li><li>Мы устраняем проблемы и ошибки в процессах</li><li>Мы используем непрерывный цикл Планируй-Делай-Контролируй-Корректируй для улучшения наших процессов</li><li>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</li><li>Мы замечаем проблемы и ошибки в процессах и говорим о них</li></ul>'}
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>'}
onChange={(value)=>{
console.log('sads', value);
}}
......
src/QEditor.jsx
......@@ -4,7 +4,7 @@ import './index.scss'
// import EditorModal from "./components/EditorModal"
// import Uploader from "./components/Uploader"
import { useEditor, EditorContent, BubbleMenu, isMarkActive, isActive } from '@tiptap/react'
import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'
import Table from '@tiptap/extension-table'
......@@ -39,6 +39,30 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
}
const toolsLib = {
link: {
title: 'Вставить ссылку',
onClick: () => {
const previousUrl = editor.getAttributes('link').href
const url = window.prompt('Введите URL', previousUrl);
// cancelled
if (url === null) {
return
}
// empty
if (url === '') {
editor.chain().focus().extendMarkRange('link').unsetLink()
.run();
return
}
// update link
editor.chain().focus().extendMarkRange('link').setLink({ href: url, target: '_blank' })
.run();
}
},
video: {
title: 'Загрузить видео',
onClick: () => modalOpener('video', 'Загрузить видео')
......@@ -133,7 +157,7 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
},
insertTable: {
title: 'Вставить таблицу',
onClick: () => editor.chain().focus().insertTable({ rows: 4, cols: 4 }).run()
onClick: () => editor.chain().focus().insertTable({ rows: 2, cols: 2 }).run()
},
deleteTable: {
title: 'Удалить таблицу',
......@@ -145,7 +169,11 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
},
addRowAfter: {
title: 'Вставить строку после',
onClick: () => editor.chain().focus().addRowBefore().run()
onClick: () => editor.chain().focus().addRowAfter().run()
},
deleteRow: {
title: 'Удалить строку',
onClick: () => editor.chain().focus().deleteRow().run()
},
addColumnBefore: {
title: 'Вставить столбец перед',
......@@ -155,6 +183,18 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
title: 'Вставить столбец после',
onClick: () => editor.chain().focus().addColumnAfter().run()
},
deleteColumn: {
title: 'Удалить столбец',
onClick: () => editor.chain().focus().deleteColumn().run()
},
mergeOrSplit: {
title: 'Объединить/разъединить ячейки',
onClick: () => editor.chain().focus().mergeOrSplit().run()
},
toggleHeaderCell: {
title: 'Добавить/удалить заголовок',
onClick: () => editor.chain().focus().toggleHeaderCell().run()
}
}
const editor = useEditor({
......@@ -162,7 +202,11 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
StarterKit,
Underline,
Image,
Link,
Link.configure({
autolink: true,
linkOnPaste: true,
validate: (href)=> console.log(href),
}),
Video,
Iframe,
Table.configure({
......@@ -179,8 +223,16 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
})
],
content: value,
onUpdate: ({editor}) => {
console.log(editor.getHTML());
}
})
useEffect(()=>{
}, [])
const buildActionsModal = (buttons = []) => {
if (buttons.length === 0) {
return null;
......@@ -314,43 +366,75 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
<BubbleMenu editor={editor} shouldShow={({...o}) => {
let items = [];
console.log(editor.isActive('table'), o.from, o.to, o);
if(o.from !== o.to && editor.isActive('paragraph')){
items = initialBubbleItems;
console.log('das');
}
if(editor.isActive('table')){
items = [...items, ...['video']];
}
if(editor.isActive('table')){
if(o.from === o.to || document.querySelectorAll('.selectedCell').length > 0){
if(items.length > 0){
items = [...items, '|']
}
console.log(o);
if(document.querySelectorAll('.selectedCell').length > 0){
items = [
...items,
...['mergeOrSplit']
]
}
items = [
...items,
...[
'addRowBefore',
'addRowAfter',
'deleteRow',
'|',
'addColumnBefore',
'addColumnAfter',
'deleteColumn',
'|',
'toggleHeaderCell',
'|',
'deleteTable'
]
];
}
}
console.log('>', o.from, o.to, editor.isActive('paragraph'));
console.log('items', [...['1','2'], ...['3', '4']]);
if(editor.isActive('image') === true){
setBubbleItems(['alignLeft', 'alignCenter', 'alignRight']);
}
if(items.length > 0){
setBubbleItems(items);
return true;
}
setBubbleItems(items)
return true
}} tippyOptions={{ duration: 100 }}>
<div className="atma-editor-bubble">
{
bubbleItems.map((type, i)=>(
<div
key={ 'bubbleItems' + i }
className={'qicon q' + type + (editor.isActive(type) ? ' active' : '')}
title={ toolsLib[type] ? toolsLib[type].title : '' }
onClick={ toolsLib[type].onClick }
/>
))
bubbleItems.map((type, i) => {
if(type === '|'){
return ( <div className={'qseparator'} /> )
}else{
return (
<div
key={ 'bubbleItems' + i }
className={'qicon q' + type + (editor.isActive(type) ? ' active' : '')}
title={ toolsLib[type] ? toolsLib[type].title : '' }
onClick={ toolsLib[type].onClick }
/>
)
}
})
}
</div>
......
src/components/ToolBar.js
......@@ -14,23 +14,14 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
]
},
{
type: 's',
type: 'g',
items: [
'paragraph',
'h2',
'h3',
'h4',
'paragraph'
'h4'
]
},
/* {
type: 'g',
items: [
'bold',
'italic',
'underline',
'strike',
]
}, */
{
type: 'g',
items: [
......@@ -45,6 +36,15 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
{
type: 'g',
items: [
'alignLeft',
'alignCenter',
'alignRight',
]
},
{
type: 'g',
items: [
'link',
'image',
'video',
'iframe',
......@@ -57,6 +57,13 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
'clearMarks',
'hardBreak',
]
},
{
type: 'g',
items: [
'insertTable',
]
}
])
......
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