Skip to content

R
react-ag-qeditor
Commit 3e4e2246 by Яков
Options

add glossary

parent 397ac5f3
Showing with 112 additions and 1 deletions
example/src/App.js
......@@ -7,7 +7,7 @@ const App = () => {
return <div style={{padding:40}}>
<QEditor
// value={`<iframe src="https://cdn.atmaguru.online/2/atmacompany/8/b/8bTfGoWtAuv5waVabQRTtWaNOrve5uv8UBXFbGOH9cowQ1K56dYi7TFz6h5jUfzr.pdf" width="100%" /><iframe src="https://www.youtube.com/embed/YmZGP7YP8c4" frameborder="0" allowfullscreen="true"></iframe><video src="https://cdn.atmaguru.online/2/demo/V/k/VkrEXjkxnutXLgcJPt5CLXNgEj4RaL9Zk4SQhIMUjOeIRpu0dSKtQCIMl49pJM6N.webm" controls="true"></video><p>Так исторически сложилось, что взрослым людям стараются дать максимум материалов: часовые лекции, объемные массивы текста и должностных инструкций. Сотрудник изучает огромный объем информации. Пытается его запомнить, а потом в конце курса сдать большой аттестационный экзамен. Вы не учитывете при этом, что мозг взрослого человека перегружен, ему нужно выполнять обязанности по работе, думать о домашних делах, его постоянно отвлекают менеджеры и коллеги по работе… Единственный правильный способ — это давать информацию небольшими кусочками и после каждой порции проверять усвоена она или нет.</p><p></p><p>что-то новое о компании<br><a href="https://cdn.atmaguru.online/1/demo/T/G/TGvSAoLawONkteJ47yyNfmsC8zNe3ZRG4iO0ZfAjmvOIZkm20BWp8KdWCH5p1Rrx.gif" target="_blank" download="Редактор.gif" data-size="37 Мб">РСкачать книгу</a> <br></p>`}
value={'<p><img src="https://cdn.atmaguru.online/2/atmacompany/L/K/LKKVK05QnvrFIFUohGtRdFbaEweB03TFNQTXItMyOhk0JmmhApvwCWJQu5SzLzNd.jpeg"><img src="https://cdn.atmaguru.online/2/atmacompany/x/Q/xQYFBvh6u7m8YqMUb3mKW2lL19psIyqCNXHurhiG3ozBfZbqiIzUzfP64sgvpcEf.jpeg"></p>'}
value={'<p>sdfsdfsdfsdfsdf</p>'}
onChange={(value)=>{
console.log(value);
}}
......
package.json
......@@ -73,6 +73,7 @@
"@tiptap/extension-underline": "^2.0.0-beta.23",
"@tiptap/react": "^2.0.0-beta.109",
"@tiptap/starter-kit": "^2.0.0-beta.185",
"antd": "^5.24.7",
"axios": "^0.27.2",
"katex": "^0.15.3",
"prosemirror-state": "1.4.0",
......
src/QEditor.jsx
......@@ -13,6 +13,7 @@ import TableCell from '@tiptap/extension-table-cell'
import TableRow from '@tiptap/extension-table-row'
import TableHeader from '@tiptap/extension-table-header'
import Focus from '@tiptap/extension-focus'
import { Input, Modal, Form, Button, message } from "antd";
// import Link from '@tiptap/extension-link'
// import Image from '@tiptap/extension-image'
import TextAlign from '@tiptap/extension-text-align'
......@@ -59,6 +60,7 @@ import { mergeAttributes } from "@tiptap/core";
// // }
// // },
// })
const {TextArea} = Input;
const initialBubbleItems = [
'bold',
......@@ -86,6 +88,8 @@ const QEditor = ({
const [uploaderUid, setUploaderUid] = useState('uid' + new Date())
const [uploadedPaths, setUploadedPaths] = useState([])
const [modalIsOpen, setModalIsOpen] = useState(false)
const [modalGlossaryIsOpen, setModalGlossaryIsOpen] = useState(false)
const [wordGlossary, setWordGlossary] = useState(false)
const [modalTitle, setModalTitle] = useState('')
const [bubbleItems, setBubbleItems] = useState(initialBubbleItems)
const [colorsSelected, setColorsSelected] = useState(null)
......@@ -131,6 +135,25 @@ const QEditor = ({
}
}, [focusFromTo])
const editWord = (values) => {
let _values = values;
if(_values.word.replace(/\s/g, '') !== ''){
axios.post('/api/admin/ru/glossary/edit/', _values, {withCredentials: true}).then((response) => {
if (response.data.state === "success") {
message.success('Сохранено');
} else if (response.data.state === "error") {
message.error('Ошибка');
}
}).catch((reason)=>{
message.error('Что-то пошло не так');
})
} else {
message.error('Термин не может состоять из одних пробелов');
}
}
const modalOpener = (type, title) => {
setModalTitle(title)
setInnerModalType(type)
......@@ -1225,6 +1248,27 @@ const QEditor = ({
)
}
})}
<div
key={'bubbleItems-glossary'}
className={
'qicon qglossary'
}
title={'Добавить в глоссарий'}
onClick={()=>{
if (!editor.state.selection.empty) {
const selectedText = editor.state.doc.textBetween(
editor.state.selection.from,
editor.state.selection.to,
" "
);
setWordGlossary(selectedText);
setTimeout(()=>{
setModalGlossaryIsOpen(true);
}, 100)
}
// console.log(editor.chain().focus());
}}
/>
</div>
</BubbleMenu>
<EditorContent editor={editor} className='atma-editor-content'/>
......@@ -1233,6 +1277,69 @@ const QEditor = ({
{getInnerModal()}
{buildActionsModal(buttons)}
</EditorModal>
<Modal
width={1100}
open={modalGlossaryIsOpen}
title={'Добавить слово'}
onCancel={()=>{
setModalGlossaryIsOpen(false);
}}
footer={[
<Button key={1}
size={'middle'}
type={'text'}
onClick={()=>{
setModalGlossaryIsOpen(false);
}}>Отменить</Button>,
<Button key={2}
size={'middle'}
type={'primary'}
htmlType={'submit'}
form={'form-glossary'}
>Сохранить</Button>
]}
>
<Form
name={'form-glossary'}
initialValues={{word : wordGlossary}}
labelCol={{span: 8}}
wrapperCol={{span: 32}}
layout="vertical"
size="middle"
style={{margin: '30px'}}
onFinish={(values) => {
editWord(values);
}}
>
<Form.Item name="id" style={{'display': 'none'}}>
<input type="hidden"/>
</Form.Item>
<Form.Item
label={'Термин'}
name="word"
rules={[
{
required: true,
message: 'Обязательное поле',
type:"string"
},
{ min: 2, message: 'Минимум 2 символа' },
{ max: 254, message: 'Максимум 254 символов' },
]}
>
<Input placeholder={'Термин'}/>
</Form.Item>
<Form.Item
name="description"
label={'Краткое описание'}
rules={[{required: true, type: 'string', message: 'Обязательное поле' }]}
>
<TextArea showCount={true} maxLength={1000} placeholder={'Краткое описание'}/>
</Form.Item>
</Form>
</Modal>
</div>
)
}
......
src/index.scss
......@@ -890,6 +890,9 @@ body{
.qicon{
&.qglossary{
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNiAxNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNS40Mjg2IDAuNzM0Mzc2SDExLjM0MjlDMTAuNDY2MSAwLjczNDM3NiA5LjYwODkzIDAuOTg2MTYxIDguODcxNDMgMS40NjExNkw4IDIuMDIwMDlMNy4xMjg1NyAxLjQ2MTE2QzYuMzkxODEgMC45ODYyNTIgNS41MzM3MSAwLjczMzkwNyA0LjY1NzE0IDAuNzM0Mzc2SDAuNTcxNDI5QzAuMjU1MzU3IDAuNzM0Mzc2IDAgMC45ODk3MzMgMCAxLjMwNThWMTEuNDQ4N0MwIDExLjc2NDcgMC4yNTUzNTcgMTIuMDIwMSAwLjU3MTQyOSAxMi4wMjAxSDQuNjU3MTRDNS41MzM5MyAxMi4wMjAxIDYuMzkxMDcgMTIuMjcxOSA3LjEyODU3IDEyLjc0NjlMNy45MjE0MyAxMy4yNTc2QzcuOTQ0NjQgMTMuMjcxOSA3Ljk3MTQzIDEzLjI4MDggNy45OTgyMSAxMy4yODA4QzguMDI1IDEzLjI4MDggOC4wNTE3OSAxMy4yNzM3IDguMDc1IDEzLjI1NzZMOC44Njc4NiAxMi43NDY5QzkuNjA3MTQgMTIuMjcxOSAxMC40NjYxIDEyLjAyMDEgMTEuMzQyOSAxMi4wMjAxSDE1LjQyODZDMTUuNzQ0NiAxMi4wMjAxIDE2IDExLjc2NDcgMTYgMTEuNDQ4N1YxLjMwNThDMTYgMC45ODk3MzMgMTUuNzQ0NiAwLjczNDM3NiAxNS40Mjg2IDAuNzM0Mzc2Wk00LjY1NzE0IDEwLjczNDRIMS4yODU3MVYyLjAyMDA5SDQuNjU3MTRDNS4yODkyOSAyLjAyMDA5IDUuOTAzNTcgMi4yMDA0NSA2LjQzMzkzIDIuNTQxNTJMNy4zMDUzNiAzLjEwMDQ1TDcuNDI4NTcgMy4xODA4VjExLjQzMDhDNi41Nzg1NyAxMC45NzM3IDUuNjI4NTcgMTAuNzM0NCA0LjY1NzE0IDEwLjczNDRaTTE0LjcxNDMgMTAuNzM0NEgxMS4zNDI5QzEwLjM3MTQgMTAuNzM0NCA5LjQyMTQzIDEwLjk3MzcgOC41NzE0MyAxMS40MzA4VjMuMTgwOEw4LjY5NDY0IDMuMTAwNDVMOS41NjYwNyAyLjU0MTUyQzEwLjA5NjQgMi4yMDA0NSAxMC43MTA3IDIuMDIwMDkgMTEuMzQyOSAyLjAyMDA5SDE0LjcxNDNWMTAuNzM0NFpNNS45NDQ2NCA0LjMwNThIMi42MjY3OUMyLjU1NzE0IDQuMzA1OCAyLjUgNC4zNjY1MiAyLjUgNC40Mzk3M1Y1LjI0MzNDMi41IDUuMzE2NTIgMi41NTcxNCA1LjM3NzIzIDIuNjI2NzkgNS4zNzcyM0g1Ljk0Mjg2QzYuMDEyNSA1LjM3NzIzIDYuMDY5NjQgNS4zMTY1MiA2LjA2OTY0IDUuMjQzM1Y0LjQzOTczQzYuMDcxNDMgNC4zNjY1MiA2LjAxNDI5IDQuMzA1OCA1Ljk0NDY0IDQuMzA1OFpNOS45Mjg1NyA0LjQzOTczVjUuMjQzM0M5LjkyODU3IDUuMzE2NTIgOS45ODU3MSA1LjM3NzIzIDEwLjA1NTQgNS4zNzcyM0gxMy4zNzE0QzEzLjQ0MTEgNS4zNzcyMyAxMy40OTgyIDUuMzE2NTIgMTMuNDk4MiA1LjI0MzNWNC40Mzk3M0MxMy40OTgyIDQuMzY2NTIgMTMuNDQxMSA0LjMwNTggMTMuMzcxNCA0LjMwNThIMTAuMDU1NEM5Ljk4NTcxIDQuMzA1OCA5LjkyODU3IDQuMzY2NTIgOS45Mjg1NyA0LjQzOTczWk01Ljk0NDY0IDYuODA1OEgyLjYyNjc5QzIuNTU3MTQgNi44MDU4IDIuNSA2Ljg2NjUyIDIuNSA2LjkzOTczVjcuNzQzM0MyLjUgNy44MTY1MiAyLjU1NzE0IDcuODc3MjMgMi42MjY3OSA3Ljg3NzIzSDUuOTQyODZDNi4wMTI1IDcuODc3MjMgNi4wNjk2NCA3LjgxNjUyIDYuMDY5NjQgNy43NDMzVjYuOTM5NzNDNi4wNzE0MyA2Ljg2NjUyIDYuMDE0MjkgNi44MDU4IDUuOTQ0NjQgNi44MDU4Wk0xMy4zNzMyIDYuODA1OEgxMC4wNTU0QzkuOTg1NzEgNi44MDU4IDkuOTI4NTcgNi44NjY1MiA5LjkyODU3IDYuOTM5NzNWNy43NDMzQzkuOTI4NTcgNy44MTY1MiA5Ljk4NTcxIDcuODc3MjMgMTAuMDU1NCA3Ljg3NzIzSDEzLjM3MTRDMTMuNDQxMSA3Ljg3NzIzIDEzLjQ5ODIgNy44MTY1MiAxMy40OTgyIDcuNzQzM1Y2LjkzOTczQzEzLjUgNi44NjY1MiAxMy40NDI5IDYuODA1OCAxMy4zNzMyIDYuODA1OFoiICBzdHlsZT0iZmlsbC1vcGFjaXR5OjE7Ii8+Cjwvc3ZnPgo=');
}
&.qbold{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2213%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.021%2013h4c2.698%200%204.297-1.327%204.297-3.56%200-1.687-1.107-2.9-2.83-3.12v-.07C7.71%206.03%208.677%204.8%208.677%203.481c0-1.898-1.468-3.164-3.639-3.164H1.021c-.483%200-.79.317-.79.818v11.048c0%20.5.307.817.79.817zm.792-7.216v-4.07h2.865c1.538%200%202.4.695%202.4%201.952%200%201.371-1.02%202.118-2.892%202.118H1.813zm0%205.819V7.146h2.82c2.022%200%203.06.748%203.06%202.215%200%201.468-1.003%202.242-2.91%202.242h-2.97z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
}
......
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