All4DK
/
wikipoints
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD редактирование, как в Ghost - параллельное пролистывание, показ отформатированного марк-даун текста с небольшой задержкой (300мс)

This commit is contained in:
Krivchikov Dmitry 2015-09-12 10:36:41 +03:00
parent f84a9c3d0f
commit 39e0643c63
2 changed files with 56 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ground/controllers/ArticlesController.php
View File

@ -76,7 +76,7 @@ class ArticlesController extends Controller
$title = strip_tags($_POST['title']); $title = strip_tags($_POST['title']);
$text = str_replace(array('<','>'), array('&lt;','&gt;'), $_POST['text']); $text = str_replace(array('<','>'), array('&lt;','&gt;'), $_POST['text']);
$html = strip_tags($_POST['text']); $html = strip_tags($_POST['text']);
$html = str_replace(array('<','>',"'"), array('&lt;','&gt;','&prime;'), $html); $html = str_replace(array('<','>',"'"), array('&lt;','&gt;','&prime;'), $html);
$html = Markdown::processing($html); $html = Markdown::processing($html);
$html = nl2br($html); $html = nl2br($html);
@ -103,4 +103,19 @@ class ArticlesController extends Controller
App::redirect('/articles'); App::redirect('/articles');
} }
static function actionMarkdown()
{
if (isset($_POST['text']) ){
$html = strip_tags($_POST['text']);
$html = str_replace(array('<','>',"'"), array('&lt;','&gt;','&prime;'), $html);
$html = Markdown::processing($html);
$html = nl2br($html);
$html = Helper::replaceLinks($html, 'html');
$html = Helper::replaceImgs($html, 'html');
print $html;
}
die;
}
} }

43
ground/views/articles/edit.php
View File

@ -47,7 +47,7 @@
</script> </script>
<div id="pageSmoothBackground" style="background-image: url(<?= $randomPoint->getImg('middle') ?>);"></div> <div id="pageSmoothBackground" style="background-image: url(<?= $randomPoint->getImg('middle') ?>);"></div>
<div class="container" style="background-color: rgba(255,255,255, 0.8);margin-top: -10px;padding-bottom: 30px;"> <div class="container" style="background-color: rgba(255,255,255, 0.8);margin-top: -10px;padding-bottom: 30px; width: 100%;">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h1 style="text-align: right;">Редактирование статьи</h1> <h1 style="text-align: right;">Редактирование статьи</h1>
@ -64,8 +64,18 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="articleText">Текст статьи</label> <table class="col-md-12" >
<textarea name="text" id="articleText" class="form-control" rows="10"><?= $article->text ?></textarea> <tr>
<td style="width: 50%;">
<label for="articleText">Текст статьи</label>
<textarea name="text" id="articleText" class="form-control" onscroll="monitor.scrollTop=scrollTop" style="height: 500px; resize: none;" ><?= $article->text ?></textarea>
</td>
<td style="width: 50%;">
<div id="monitor" style="height: 500px; width: 100%; background-color: white; margin-top: 25px; overflow-y: scroll;"></div>
</td>
</tr>
</table>
<i>*текст*</i> <b>**текст**</b> <b><i>***текст***</i></b> <a href="#">http://ссылка.ру</a> # заголвок1 ## заголовк2 ### заголовк3 [#512|ссылка на точку 512] <i>*текст*</i> <b>**текст**</b> <b><i>***текст***</i></b> <a href="#">http://ссылка.ру</a> # заголвок1 ## заголовк2 ### заголовк3 [#512|ссылка на точку 512]
</div> </div>
@ -98,3 +108,30 @@
<iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px" onload="updatePhotobank()"></iframe> <iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px" onload="updatePhotobank()"></iframe>
</div> </div>
</div> </div>
<script>
var monitorTimeout;
$('#articleText').keyup(function () {
clearTimeout(monitorTimeout);
monitorTimeout = setTimeout(function () {
$.post('/articles/markdown', {text: $('#articleText').val()}, function (data) {
$('#monitor').html(data);
});
}, 300);
}).keydown(function () {
clearTimeout(monitorTimeout)
}).scroll(function () {
monH = document.getElementById('monitor').scrollHeight - document.getElementById('monitor').clientHeight;
areH = document.getElementById('articleText').scrollHeight - document.getElementById('articleText').clientHeight;
areS = $('#articleText').scrollTop();
monS = Math.round((areS / areH) * monH);
$('#monitor').scrollTop(monS);
});
$(document).ready(function(){
$.post('/articles/markdown', {text: $('#articleText').val()}, function (data) {
$('#monitor').html(data);
});
});
</script>