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' ...@@ -7,22 +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><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>'} 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);
}}
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>'}
onChange={(value)=>{ onChange={(value)=>{
console.log('sads', value); console.log('sads', value);
}} }}
......
src/QEditor.jsx
...@@ -4,7 +4,7 @@ import './index.scss' ...@@ -4,7 +4,7 @@ import './index.scss'
// import EditorModal from "./components/EditorModal" // import EditorModal from "./components/EditorModal"
// import Uploader from "./components/Uploader" // 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 StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline' import Underline from '@tiptap/extension-underline'
import Table from '@tiptap/extension-table' import Table from '@tiptap/extension-table'
...@@ -39,6 +39,30 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => { ...@@ -39,6 +39,30 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
} }
const toolsLib = { 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: { video: {
title: 'Загрузить видео', title: 'Загрузить видео',
onClick: () => modalOpener('video', 'Загрузить видео') onClick: () => modalOpener('video', 'Загрузить видео')
...@@ -133,7 +157,7 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => { ...@@ -133,7 +157,7 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
}, },
insertTable: { insertTable: {
title: 'Вставить таблицу', title: 'Вставить таблицу',
onClick: () => editor.chain().focus().insertTable({ rows: 4, cols: 4 }).run() onClick: () => editor.chain().focus().insertTable({ rows: 2, cols: 2 }).run()
}, },
deleteTable: { deleteTable: {
title: 'Удалить таблицу', title: 'Удалить таблицу',
...@@ -145,7 +169,11 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => { ...@@ -145,7 +169,11 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
}, },
addRowAfter: { addRowAfter: {
title: 'Вставить строку после', title: 'Вставить строку после',
onClick: () => editor.chain().focus().addRowBefore().run() onClick: () => editor.chain().focus().addRowAfter().run()
},
deleteRow: {
title: 'Удалить строку',
onClick: () => editor.chain().focus().deleteRow().run()
}, },
addColumnBefore: { addColumnBefore: {
title: 'Вставить столбец перед', title: 'Вставить столбец перед',
...@@ -155,6 +183,18 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => { ...@@ -155,6 +183,18 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
title: 'Вставить столбец после', title: 'Вставить столбец после',
onClick: () => editor.chain().focus().addColumnAfter().run() 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({ const editor = useEditor({
...@@ -162,7 +202,11 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => { ...@@ -162,7 +202,11 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
StarterKit, StarterKit,
Underline, Underline,
Image, Image,
Link, Link.configure({
autolink: true,
linkOnPaste: true,
validate: (href)=> console.log(href),
}),
Video, Video,
Iframe, Iframe,
Table.configure({ Table.configure({
...@@ -179,8 +223,16 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => { ...@@ -179,8 +223,16 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
}) })
], ],
content: value, content: value,
onUpdate: ({editor}) => {
console.log(editor.getHTML());
}
}) })
useEffect(()=>{
}, [])
const buildActionsModal = (buttons = []) => { const buildActionsModal = (buttons = []) => {
if (buttons.length === 0) { if (buttons.length === 0) {
return null; return null;
...@@ -314,43 +366,75 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => { ...@@ -314,43 +366,75 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
<BubbleMenu editor={editor} shouldShow={({...o}) => { <BubbleMenu editor={editor} shouldShow={({...o}) => {
let items = []; let items = [];
console.log(editor.isActive('table'), o.from, o.to, o);
if(o.from !== o.to && editor.isActive('paragraph')){ if(o.from !== o.to && editor.isActive('paragraph')){
items = initialBubbleItems; items = initialBubbleItems;
console.log('das'); 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){ if(editor.isActive('image') === true){
setBubbleItems(['alignLeft', 'alignCenter', 'alignRight']); setBubbleItems(['alignLeft', 'alignCenter', 'alignRight']);
} }
if(items.length > 0){
setBubbleItems(items);
return true;
}
setBubbleItems(items)
return true
}} tippyOptions={{ duration: 100 }}> }} tippyOptions={{ duration: 100 }}>
<div className="atma-editor-bubble"> <div className="atma-editor-bubble">
{ {
bubbleItems.map((type, i)=>( bubbleItems.map((type, i) => {
<div if(type === '|'){
key={ 'bubbleItems' + i } return ( <div className={'qseparator'} /> )
className={'qicon q' + type + (editor.isActive(type) ? ' active' : '')} }else{
title={ toolsLib[type] ? toolsLib[type].title : '' } return (
onClick={ toolsLib[type].onClick } <div
/> key={ 'bubbleItems' + i }
)) className={'qicon q' + type + (editor.isActive(type) ? ' active' : '')}
title={ toolsLib[type] ? toolsLib[type].title : '' }
onClick={ toolsLib[type].onClick }
/>
)
}
})
} }
</div> </div>
......
src/components/ToolBar.js
...@@ -14,23 +14,14 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -14,23 +14,14 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
] ]
}, },
{ {
type: 's', type: 'g',
items: [ items: [
'paragraph',
'h2', 'h2',
'h3', 'h3',
'h4', 'h4'
'paragraph'
] ]
}, },
/* {
type: 'g',
items: [
'bold',
'italic',
'underline',
'strike',
]
}, */
{ {
type: 'g', type: 'g',
items: [ items: [
...@@ -45,6 +36,15 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -45,6 +36,15 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
{ {
type: 'g', type: 'g',
items: [ items: [
'alignLeft',
'alignCenter',
'alignRight',
]
},
{
type: 'g',
items: [
'link',
'image', 'image',
'video', 'video',
'iframe', 'iframe',
...@@ -57,6 +57,13 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -57,6 +57,13 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
'clearMarks', 'clearMarks',
'hardBreak', '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