Skip to content

R
react-ag-qeditor
Commit 9e2943fd by Рамис
Options

bug fix highlight and text color

parent a0574a8d
Showing with 69 additions and 13 deletions
example/src/App.js
...@@ -7,7 +7,7 @@ import 'react-ag-qeditor/dist/index.css' ...@@ -7,7 +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={'<table><tbody><tr><td colspan="1" rowspan="1"><p><img src="https://picsum.photos/200"></p></td><td colspan="1" rowspan="1"><p><img src="https://picsum.photos/200"></p></td></tr></tbody></table><p><strong>Наш принцип №4 - Непрерывно улучшать процессы</strong></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><ul><li><p><span style="color: rgb(255, 78, 68)">Мы следим за современными</span> тенденциями рынка и идём в ногу со временем</p></li><li><p>Мы изобретаем новые эффективные <mark class="highlight" data-color="#9B9B9B" style="background-color: #9B9B9B">способы</mark> <mark class="highlight" data-color="#CCCCCC" style="background-color: #CCCCCC">решения</mark> задач</p></li><li><p><mark class="highlight" data-color="#9ee191" style="background-color: #9ee191">Мы</mark> <mark class="highlight" data-color="#43e7bf" style="background-color: #43e7bf">приветствуем</mark> <mark class="highlight" data-color="#4fb7ff" style="background-color: #4fb7ff">и</mark> <mark class="highlight" data-color="#6d9ef5" style="background-color: #6d9ef5">поощряем</mark> <mark class="highlight" data-color="#cd92e8" style="background-color: #cd92e8">инициативу</mark> <mark class="highlight" data-color="#f597bc" style="background-color: #f597bc">каждого</mark> <mark class="highlight" data-color="#f597bc" style="background-color: #f597bc">сотрудника</mark> <mark class="highlight" data-color="#fa9084" style="background-color: #fa9084">компании</mark></p></li><li><p><mark class="highlight" data-color="#dea75b" style="background-color: #dea75b">Мы</mark> <mark class="highlight" data-color="#ffe672" style="background-color: #ffe672">устраняем</mark> проблемы и ошибки в процессах</p></li><li><p>Мы используем непрерывный цикл Планируй-Делай-Контролируй-Корректируй для улучшения наших процессов</p></li><li><p>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</p></li><li><p>Мы замечаем проблемы и <a href="https://ya.ru">ошибки в процессах и говорим</a> о нихd</p></li></ul><p><a href="https://cdn.atmaguru.online/2/test/3/D/3DyXyHbZOu2bTesZVqk3fHp3Wpk1Hg8R2kyUSVnfQbd4Eh40J4GYAygATHk5L5sl.pdf" download data-size="200 КБ">Название файла</a></p>'} value={'<table><tbody><tr><td colspan="1" rowspan="1"><p><img src="https://picsum.photos/200"></p></td><td colspan="1" rowspan="1"><p><img src="https://picsum.photos/200"></p></td></tr></tbody></table><p><strong>Наш принцип №4 - Непрерывно улучшать процессы</strong></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><ul><li><p><span style="color: rgb(255, 78, 68)">Мы следим за современными</span> тенденциями рынка и идём в ногу со временем</p></li><li><p>Мы изобретаем новые эффективные <mark class="highlight" data-color="#9B9B9B" style="background-color: #9B9B9B">способы</mark> <mark class="highlight" data-color="#CCCCCC" style="background-color: #CCCCCC">решения</mark> задач</p></li><li><p><mark class="highlight" data-color="#9ee191" style="background-color: #9ee191">Мы</mark> <mark class="highlight" data-color="#43e7bf" style="background-color: #43e7bf">приветствуем</mark> <mark class="highlight" data-color="#4fb7ff" style="background-color: #4fb7ff">и</mark> <mark class="highlight" data-color="#6d9ef5" style="background-color: #6d9ef5">поощряем</mark> <mark class="highlight" data-color="#cd92e8" style="background-color: #cd92e8">инициативу</mark> <mark class="highlight" data-color="#f597bc" style="background-color: #f597bc">каждого</mark> <mark class="highlight" data-color="#f597bc" style="background-color: #f597bc">сотрудника</mark> <mark class="highlight" data-color="#fa9084" style="background-color: #fa9084">компании</mark></p></li><li><p><mark class="highlight" data-color="#dea75b" style="background-color: #dea75b">Мы</mark> <mark class="highlight" data-color="#ffe672" style="background-color: #ffe672">устраняем</mark> проблемы и ошибки в процессах</p></li><li><p>Мы используем непрерывный цикл Планируй-Делай-Контролируй-Корректируй для улучшения наших процессов</p></li><li><p>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</p></li><li><p>Мы замечаем проблемы и <a href="https://ya.ru">ошибки в процессах и говорим</a> о нихd</p></li></ul><p></p>'}
onChange={(value)=>{ onChange={(value)=>{
console.log('sads', value); console.log('sads', value);
}} }}
......
package.json
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.0.7", "version": "1.0.8",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
"deploy": "gh-pages -d example/build" "deploy": "gh-pages -d example/build"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.0.0" "react": "^17.0.2"
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
"@tiptap/starter-kit": "^2.0.0-beta.185", "@tiptap/starter-kit": "^2.0.0-beta.185",
"katex": "^0.15.3", "katex": "^0.15.3",
"rc-upload": "^4.3.3", "rc-upload": "^4.3.3",
"react": "^16.0.0", "react": "^17.0.2",
"sass": "^1.49.9" "sass": "^1.49.9"
} }
} }
src/QEditor.jsx
...@@ -42,7 +42,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -42,7 +42,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
return result ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})` : null; return result ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})` : null;
} }
const modalOpener = (type, title) => { const modalOpener = (type, title) => {
setModalTitle(title); setModalTitle(title);
setInnerModalType(type); setInnerModalType(type);
...@@ -60,7 +59,8 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -60,7 +59,8 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
'#fa9084', '#fa9084',
'#ef9558', '#ef9558',
'#dea75b', '#dea75b',
'#ffe672']; '#ffe672'
];
const toolsLib = { const toolsLib = {
link: { link: {
...@@ -268,7 +268,10 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -268,7 +268,10 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
Highlight.configure({ Highlight.configure({
multicolor: true multicolor: true
}), }),
CustomLink CustomLink.configure({
linkOnPaste: false,
openOnClick: false
})
], ],
content: value, content: value,
onUpdate: ({editor}) => onChange(editor.getHTML()) onUpdate: ({editor}) => onChange(editor.getHTML())
...@@ -589,6 +592,22 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -589,6 +592,22 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
editor.chain().focus().setIframe({ src: _url }).run(); editor.chain().focus().setIframe({ src: _url }).run();
break break
case 'file':
console.log('file');
uploadedPaths.map((file, i) => {
editor
.chain().focus()
.extendMarkRange('link').setLink({
href: file.path,
target: '_blank',
download: true,
'data-size': '100 кб'
})
.insertContent('Example Text')
.run();
});
break
} }
setUploaderUid(`uid${new Date()}`); setUploaderUid(`uid${new Date()}`);
......
src/components/ToolBar.js
...@@ -45,7 +45,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -45,7 +45,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
type: 'g', type: 'g',
items: [ items: [
'link', 'link',
// 'file', 'file',
'image', 'image',
'video', 'video',
'iframe', 'iframe',
......
src/extensions/CustomLink.js
...@@ -10,6 +10,21 @@ const CustomLink = Link.extend({ ...@@ -10,6 +10,21 @@ const CustomLink = Link.extend({
] ]
}, },
addOptions() {
return {
openOnClick: true,
linkOnPaste: true,
autolink: true,
HTMLAttributes: {
target: '_blank',
rel: 'noopener noreferrer nofollow',
class: null,
download: true
},
validate: undefined,
}
},
addAttributes() { addAttributes() {
return { return {
href: { href: {
...@@ -32,7 +47,7 @@ const CustomLink = Link.extend({ ...@@ -32,7 +47,7 @@ const CustomLink = Link.extend({
renderHTML({ HTMLAttributes }){ renderHTML({ HTMLAttributes }){
return ['a', HTMLAttributes, 0] return ['a', HTMLAttributes, 0]
} },
}) })
......
src/index.scss
...@@ -141,15 +141,34 @@ body{ ...@@ -141,15 +141,34 @@ body{
} }
a[download]{ a[download]{
&[href*='.pdf']{ display: block;
color: #1790FF;
position: relative;
margin-left: 20px;
&:before{ &:before{
content: 'pdf' content: '';
} display: inline-block;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2213%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.712%2012.6H8.86c.17%200%20.31-.057.422-.17a.588.588%200%200%200%20.167-.43.588.588%200%200%200-.167-.43.567.567%200%200%200-.422-.17H3.713a.567.567%200%200%200-.423.17.588.588%200%200%200-.167.43c0%20.173.056.317.167.43.111.113.252.17.422.17zm0-3.4H8.86c.17%200%20.31-.057.422-.17a.588.588%200%200%200%20.167-.43.588.588%200%200%200-.167-.43A.567.567%200%200%200%208.86%208H3.713a.567.567%200%200%200-.423.17.588.588%200%200%200-.167.43c0%20.173.056.317.167.43.111.113.252.17.422.17zM1.18%2016c-.315%200-.59-.12-.825-.36A1.161%201.161%200%200%201%200%2014.8V1.2C0%20.88.118.6.354.36.589.12.864%200%201.179%200h6.6a1.164%201.164%200%200%201%20.844.36l3.595%203.66a1.214%201.214%200%200%201%20.353.86v9.92c0%20.32-.117.6-.353.84s-.51.36-.825.36H1.179zM7.68%201.2H1.18v13.6h10.214V4.92H8.27a.567.567%200%200%201-.423-.17.588.588%200%200%201-.167-.43V1.2zm-6.501%200v3.72V1.2%2014.8%201.2z%22%20fill%3D%22%231790FF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
width: 13px;
height: 16px;
position: absolute;
top: 1px;
left: -20px;
} }
//&[href*='.pdf']{
// &:before{
// content: 'pdf'
// }
//}
&:after{ &:after{
content: attr(data-size); content: attr(data-size);
color: tomato; display: inline-block;
color: #AAB2BD;
font-size: 13px;
margin-left: 6px;
} }
} }
...@@ -590,6 +609,9 @@ body{ ...@@ -590,6 +609,9 @@ body{
&.qhighlight{ &.qhighlight{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%28.136%20.136%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.2%22%20transform%3D%22rotate%2845%206.364%206.364%29%22%20x%3D%222.464%22%20y%3D%222.464%22%20width%3D%227.8%22%20height%3D%227.8%22%20rx%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.2%22%20d%3D%22M1.52%206.364h9.714%22%2F%3E%3Cpath%20d%3D%22M13.34%2015.063c1.665%200%202.774-1.086%202.774-2.71%200-.794-.316-1.61-.598-2.216-.414-.91-1.09-1.898-1.68-2.8-.136-.211-.308-.317-.495-.317-.192%200-.364.106-.5.317-.594.91-1.278%201.91-1.692%202.832-.273.59-.586%201.398-.586%202.183%200%201.625%201.11%202.711%202.778%202.711z%22%20fill%3D%22%231F1E1D%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%28.136%20.136%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.2%22%20transform%3D%22rotate%2845%206.364%206.364%29%22%20x%3D%222.464%22%20y%3D%222.464%22%20width%3D%227.8%22%20height%3D%227.8%22%20rx%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.2%22%20d%3D%22M1.52%206.364h9.714%22%2F%3E%3Cpath%20d%3D%22M13.34%2015.063c1.665%200%202.774-1.086%202.774-2.71%200-.794-.316-1.61-.598-2.216-.414-.91-1.09-1.898-1.68-2.8-.136-.211-.308-.317-.495-.317-.192%200-.364.106-.5.317-.594.91-1.278%201.91-1.692%202.832-.273.59-.586%201.398-.586%202.183%200%201.625%201.11%202.711%202.778%202.711z%22%20fill%3D%22%231F1E1D%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
} }
&.qfile{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%229%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.85%2015c-1.062%200-1.969-.365-2.721-1.094C1.376%2013.177%201%2012.282%201%2011.22V3.695c0-.747.265-1.382.796-1.908A2.627%202.627%200%200%201%203.713%201c.758%200%201.4.262%201.925.787.524.526.787%201.167.787%201.926v6.894c0%20.444-.152.82-.455%201.13-.303.308-.677.463-1.12.463-.443%200-.817-.166-1.12-.499a1.694%201.694%200%200%201-.455-1.181V4.01c0-.093.035-.175.105-.245a.336.336%200%200%201%20.49%200c.07.07.105.152.105.245v6.562c0%20.257.085.476.254.657.169.18.376.271.621.271a.83.83%200%200%200%20.621-.262.874.874%200%200%200%20.254-.63V3.694c0-.56-.195-1.033-.586-1.417A1.956%201.956%200%200%200%203.713%201.7c-.56%200-1.036.193-1.427.578-.39.384-.586.857-.586%201.417v7.56c0%20.852.31%201.572.928%202.161.618.59%201.359.884%202.222.884.875%200%201.619-.298%202.231-.893.613-.595.919-1.324.919-2.187V4.01c0-.093.035-.175.105-.245a.336.336%200%200%201%20.49%200c.07.07.105.152.105.245v7.192c0%201.062-.376%201.96-1.129%202.696C6.82%2014.632%205.911%2015%204.85%2015z%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%22.5%22%2F%3E%3C%2Fsvg%3E');
}
} }
.qcolors{ .qcolors{
......
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
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