Skip to content

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

fix bug

parent 10d4b78a
Showing with 32 additions and 23 deletions
README.md
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
## Install ## Install
```bash ```bash
npm install --save https://gitlab.atma.company/lib/react-ag-qeditor.git npm install --save git+https://gitlab.atma.company/lib/react-ag-qeditor.git
``` ```
## Usage ## Usage
......
example/src/App.js
...@@ -6,7 +6,7 @@ import 'react-ag-qeditor/dist/index.css' ...@@ -6,7 +6,7 @@ import 'react-ag-qeditor/dist/index.css'
const App = () => { const App = () => {
return <div style={{padding:40}}> return <div style={{padding:40}}>
<QEditor value={'<p>asds</p>'} onChange={(value)=>{ <QEditor value={'<span style="font-size: 20px;">asds</span>'} onChange={(value)=>{
console.log('sads', value); console.log('sads', value);
}} /> }} />
</div> </div>
......
package.json
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "0.0.2", "version": "0.0.3",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/QEditor.jsx
...@@ -24,6 +24,7 @@ export default class QEditor extends React.Component { ...@@ -24,6 +24,7 @@ export default class QEditor extends React.Component {
Quill.register('formats/video', VideoBlot) Quill.register('formats/video', VideoBlot)
Quill.register('formats/videoLocal', VideoLocalBlot) Quill.register('formats/videoLocal', VideoLocalBlot)
} }
componentDidMount () { componentDidMount () {
...@@ -90,7 +91,7 @@ export default class QEditor extends React.Component { ...@@ -90,7 +91,7 @@ export default class QEditor extends React.Component {
<div className={'atma-editor-modal-action'}> <div className={'atma-editor-modal-action'}>
{ {
buttons.map((btn, i) => ( buttons.map((btn, i) => (
<button key={'mAction' + i} className={'atma-editor-btn' + btn.className} <button type={'button'} key={'mAction' + i} className={'atma-editor-btn' + btn.className}
onClick={btn.onClick}>{btn.title}</button> onClick={btn.onClick}>{btn.title}</button>
)) ))
} }
......
src/index.scss
...@@ -10,33 +10,41 @@ ...@@ -10,33 +10,41 @@
} }
} }
.ql-toolbar{ .ql{
&.ql-snow{ &-toolbar{
position: sticky; &.ql-snow{
top: 0; position: sticky;
z-index: 10; top: 0;
background-color: #fff; z-index: 10;
background-color: #fff;
.ql-videoLocal:after{ .ql-videoLocal:after{
content:''; content:'';
display: inline-block; display: inline-block;
width: 18px; width: 18px;
height: 18px; height: 18px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2249%22%20height%3D%2242%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M16.844%2024.038c.151%200%20.296-.026.435-.079.14-.053.29-.127.451-.221l8.66-5.015c.318-.181.541-.348.67-.5a.824.824%200%200%200%20.195-.551.827.827%200%200%200-.194-.548c-.13-.155-.353-.322-.671-.503l-8.66-5.014a3.08%203.08%200%200%200-.45-.222%201.21%201.21%200%200%200-.436-.08.876.876%200%200%200-.698.306c-.175.204-.263.48-.263.826v10.471c0%20.345.088.62.263.824a.876.876%200%200%200%20.698.306z%22%20fill%3D%22%23444%22%20fill-rule%3D%22nonzero%22%2F%3E%3Crect%20stroke%3D%22%23444%22%20stroke-width%3D%226%22%20x%3D%223%22%20y%3D%223%22%20width%3D%2236%22%20height%3D%2230%22%20rx%3D%223%22%2F%3E%3Ccircle%20stroke%3D%22%23FFF%22%20stroke-width%3D%222.2%22%20fill%3D%22%23444%22%20cx%3D%2239%22%20cy%3D%2232%22%20r%3D%228.9%22%2F%3E%3Cpath%20d%3D%22M34.917%2032.498a.959.959%200%200%200%20.704.291c.275%200%20.51-.097.703-.291l.433-.432%201.316-1.538-.1%204.844a.96.96%200%200%200%20.291.754c.208.208.462.315.764.322a.975.975%200%200%200%20.749-.317.974.974%200%200%200%20.296-.749l-.11-4.814%201.296%201.478.432.432a.97.97%200%200%200%20.699.296.935.935%200%200%200%20.698-.286.935.935%200%200%200%20.286-.699.97.97%200%200%200-.296-.698l-3.236-3.236c-.563-.563-1.122-.566-1.678-.01l-3.247%203.246a.959.959%200%200%200-.291.703c0%20.275.097.51.291.704z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2249%22%20height%3D%2242%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M16.844%2024.038c.151%200%20.296-.026.435-.079.14-.053.29-.127.451-.221l8.66-5.015c.318-.181.541-.348.67-.5a.824.824%200%200%200%20.195-.551.827.827%200%200%200-.194-.548c-.13-.155-.353-.322-.671-.503l-8.66-5.014a3.08%203.08%200%200%200-.45-.222%201.21%201.21%200%200%200-.436-.08.876.876%200%200%200-.698.306c-.175.204-.263.48-.263.826v10.471c0%20.345.088.62.263.824a.876.876%200%200%200%20.698.306z%22%20fill%3D%22%23444%22%20fill-rule%3D%22nonzero%22%2F%3E%3Crect%20stroke%3D%22%23444%22%20stroke-width%3D%226%22%20x%3D%223%22%20y%3D%223%22%20width%3D%2236%22%20height%3D%2230%22%20rx%3D%223%22%2F%3E%3Ccircle%20stroke%3D%22%23FFF%22%20stroke-width%3D%222.2%22%20fill%3D%22%23444%22%20cx%3D%2239%22%20cy%3D%2232%22%20r%3D%228.9%22%2F%3E%3Cpath%20d%3D%22M34.917%2032.498a.959.959%200%200%200%20.704.291c.275%200%20.51-.097.703-.291l.433-.432%201.316-1.538-.1%204.844a.96.96%200%200%200%20.291.754c.208.208.462.315.764.322a.975.975%200%200%200%20.749-.317.974.974%200%200%200%20.296-.749l-.11-4.814%201.296%201.478.432.432a.97.97%200%200%200%20.699.296.935.935%200%200%200%20.698-.286.935.935%200%200%200%20.286-.699.97.97%200%200%200-.296-.698l-3.236-3.236c-.563-.563-1.122-.566-1.678-.01l-3.247%203.246a.959.959%200%200%200-.291.703c0%20.275.097.51.291.704z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position: center center; background-position: center center;
}
} }
}
&-editor{
min-height: 350px;
max-height: 800px;
} }
}
.ql-editor{ &-container{
min-height: 350px; font-size: 16px;
max-height: 800px; }
} }
&-modal{ &-modal{
position: fixed; position: fixed;
top: 0; top: 0;
......
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