mirror of
https://github.com/codex-team/editor.js
synced 2024-06-19 22:25:23 +02:00
quotes plugin is ready
This commit is contained in:
khaydarov
parent
19e8fd1e40
commit
29cb83dfc4
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="plugins/ceditor-tool-link.css" />
|
||||
<link rel="stylesheet" href="plugins/ceditor-tool-quote.css" />
|
||||
<link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
|
||||
</head>
|
||||
<body style="padding: 100px">
|
||||
|
||||
|
|
@ -268,4 +268,4 @@
|
|||
</script>
|
||||
|
||||
<script src="plugins/ceditor-tool-link.js"></script>
|
||||
<script src="plugins/ceditor-tool-quote.js"></script>
|
||||
<script src="plugins/ceditor-tool-quote/ceditor-tool-quote.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
/** Quote - settings */
|
||||
|
||||
.ce_plugin_quote--settings{
|
||||
white-space: nowrap;
|
||||
/*padding-right: 10px; */
|
||||
|
|
@ -37,10 +36,16 @@
|
|||
|
||||
}
|
||||
|
||||
.quoteStyle-withCaption--blockquote:focus, .quoteStyle-withCaption--author:focus {
|
||||
.quoteStyle-withCaption--blockquote:focus,
|
||||
.quoteStyle-withCaption--author:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/** Quote with photo */
|
||||
.ce_redactor .quoteStyle-withPhoto--wrapper {
|
||||
margin: 0px !important;
|
||||
padding: 4.5em 6.5em !important;
|
||||
}
|
||||
.quoteStyle-withPhoto--photo {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
|
|
@ -50,20 +55,31 @@
|
|||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.quoteStyle-withPhoto--author, .quoteStyle-withPhoto--position {
|
||||
overflow: hidden;
|
||||
.quoteStyle-withPhoto--author {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
line-height: 1.5em;
|
||||
/*border-bottom: 1px solid black;*/
|
||||
border: 0px;
|
||||
color: #000;
|
||||
letter-spacing: 0px;
|
||||
outline: none;
|
||||
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
.quoteStyle-withPhoto--job {
|
||||
font-weight: regular;
|
||||
font-size: 19px;
|
||||
color: #818BA1;
|
||||
letter-spacing: 0px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quoteStyle-withPhoto--quote {
|
||||
margin-top: 15px;
|
||||
margin-top: 30px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quoteStyle-withPhoto--authorWrapper {
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
|
|
@ -56,6 +56,7 @@ var quoteTools = {
|
|||
style : parsedblock.style,
|
||||
text : parsedblock.quote,
|
||||
author : parsedblock.author,
|
||||
job : parsedblock.job,
|
||||
photo : parsedblock.photo,
|
||||
};
|
||||
|
||||
|
|
@ -196,7 +197,7 @@ var quoteTools = {
|
|||
var wrapper = quoteTools.ui.blockquote();
|
||||
photo = quoteTools.ui.makeBlock('IMG', ['quoteStyle-withPhoto--photo']),
|
||||
author = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--author', 'ce_quote--author']),
|
||||
job = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--position', 'ce_quote--position']),
|
||||
job = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--job', 'ce_quote--job']),
|
||||
quote = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--quote', 'ce_quote--text'])
|
||||
|
||||
/* Default Image src */
|
||||
|
|
@ -211,12 +212,12 @@ var quoteTools = {
|
|||
|
||||
/* Author's position and job */
|
||||
job.contentEditable = 'true';
|
||||
job.textContent = data.position || quoteTools.jobPlacaholder;
|
||||
job.textContent = data.job || quoteTools.jobPlacaholder;
|
||||
|
||||
quoteTools.ui.mousedown(job, quoteTools.jobPlacaholder);
|
||||
quoteTools.ui.keyPressed(job, quoteTools.jobPlacaholder);
|
||||
|
||||
var authorsWrapper = quoteTools.ui.makeBlock('DIV');
|
||||
var authorsWrapper = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--authorWrapper']);
|
||||
authorsWrapper.appendChild(author);
|
||||
authorsWrapper.appendChild(job);
|
||||
|
||||
|
|
@ -224,6 +225,7 @@ var quoteTools = {
|
|||
quote.contentEditable = 'true';
|
||||
quote.innerHTML = data.text;
|
||||
|
||||
wrapper.classList.add('quoteStyle-withPhoto--wrapper');
|
||||
wrapper.dataset.quoteStyle = 'withPhoto';
|
||||
|
||||
wrapper.appendChild(photo);
|
||||
|
|
@ -238,7 +240,7 @@ var quoteTools = {
|
|||
var currentNode = block || cEditor.content.currentNode,
|
||||
photo = currentNode.getElementsByTagName('img')[0],
|
||||
author = currentNode.querySelector('.ce_quote--author'),
|
||||
position = currentNode.querySelector('.ce_quote--position'),
|
||||
job = currentNode.querySelector('.ce_quote--job'),
|
||||
quote ;
|
||||
|
||||
/** Simple quote text placed in Blockquote tag*/
|
||||
|
|
@ -247,8 +249,8 @@ var quoteTools = {
|
|||
else
|
||||
quote = currentNode.querySelector('.ce_quote--text').textContent;
|
||||
|
||||
if (position)
|
||||
position = position.textContent;
|
||||
if (job)
|
||||
job = job.textContent;
|
||||
|
||||
if (author)
|
||||
author = author.textContent;
|
||||
|
|
@ -257,9 +259,10 @@ var quoteTools = {
|
|||
photo = photo.src;
|
||||
|
||||
var data = {
|
||||
style : currentNode.dataset.quoteStyle,
|
||||
text : quote,
|
||||
author : author,
|
||||
position : position,
|
||||
job : job,
|
||||
photo : photo,
|
||||
};
|
||||
|
||||
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
Loading…
Reference in a new issue