自动保存编写的文章

This commit is contained in:
augushong
2020-08-19 13:47:33 +08:00
parent ba4d69f416
commit 182dd118e3
3 changed files with 54 additions and 35 deletions

View File

@@ -41,6 +41,7 @@
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>名称</th> <th>名称</th>
<th>介绍</th>
<th>模板</th> <th>模板</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
@@ -51,6 +52,7 @@
<tr class="item" data-id="{$vo.id}"> <tr class="item" data-id="{$vo.id}">
<td>{$vo.id}</td> <td>{$vo.id}</td>
<td> {:str_repeat('|--',$vo.level)} {$vo.title}</td> <td> {:str_repeat('|--',$vo.level)} {$vo.title}</td>
<td>{$vo.desc}</td>
<td>{$vo.tpl_name}</td> <td>{$vo.tpl_name}</td>
<td> <td>
<div class="layui-btn-container"> <div class="layui-btn-container">

View File

@@ -15,11 +15,9 @@
</script> </script>
<style> <style>
#toolbar select {
#toolbar select{
display: none !important; display: none !important;
} }
</style> </style>
</head> </head>
@@ -177,7 +175,8 @@
</div> </div>
<div class="quick-input-item sm-quick-input-item" title="输入新标签,使用空格分隔可一次添加多个标签"> <div class="quick-input-item sm-quick-input-item" title="输入新标签,使用空格分隔可一次添加多个标签">
<div class=""> <div class="">
<input type="text" name="" placeholder="输入新标签" autocomplete="off" id="new-tags" class="layui-input"> <input type="text" name="" placeholder="输入新标签" autocomplete="off" id="new-tags"
class="layui-input">
<div class="layui-btn create-tags">新增</div> <div class="layui-btn create-tags">新增</div>
</div> </div>
</div> </div>
@@ -200,8 +199,7 @@
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-form-label">跳转按钮名称</div> <div class="layui-form-label">跳转按钮名称</div>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" name="jump_to_btn_title" value="立即跳转" <input type="text" name="jump_to_btn_title" value="立即跳转" class="layui-input">
class="layui-input">
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
@@ -254,15 +252,14 @@
</div> </div>
<script> <script>
layui.use(['form', 'upload', 'laydate'], function () {
layui.use(['form', 'upload','laydate'], function () {
var upload = layui.upload; var upload = layui.upload;
var form = layui.form; var form = layui.form;
var laydate = layui.laydate; var laydate = layui.laydate;
laydate.render({ laydate.render({
elem:'.publish-time', elem: '.publish-time',
type:'datetime' type: 'datetime'
}) })
var currentRange = { var currentRange = {
@@ -352,7 +349,7 @@
console.log(formData); console.log(formData);
$.post('{:url("save")}',formData,function(result){ $.post('{:url("save")}', formData, function (result) {
console.log(result); console.log(result);
layer.msg('添加成功') layer.msg('添加成功')
setTimeout(() => { setTimeout(() => {
@@ -374,7 +371,7 @@
function loadTags() { function loadTags() {
$.get('{:url("Tag/index")}', { $.get('{:url("Tag/index")}', {
page: tagPage, page: tagPage,
type:'{$Request.param.type}' type: '{$Request.param.type}'
}, function (result) { }, function (result) {
tagPage++; tagPage++;
result.data.data.forEach(tag => { result.data.data.forEach(tag => {
@@ -393,7 +390,7 @@
$('.create-tags').click(function () { $('.create-tags').click(function () {
var value = $.trim($('#new-tags').val()); var value = $.trim($('#new-tags').val());
if(value.length == 0){ if (value.length == 0) {
return false; return false;
} }
@@ -407,7 +404,7 @@
var categoryPage = 1; var categoryPage = 1;
initCategory(); initCategory();
function initCategory(){ function initCategory() {
$('.category-list').children().remove(); $('.category-list').children().remove();
$('.new-category-option-list').find('.new-category-item').remove(); $('.new-category-option-list').find('.new-category-item').remove();
$('.new-category-option-list').find('.layui-form-select').remove(); $('.new-category-option-list').find('.layui-form-select').remove();
@@ -417,28 +414,28 @@
} }
function loadCategory() { function loadCategory() {
$.get('{:url("Category/index")}',{ $.get('{:url("Category/index")}', {
type:'{$Request.param.type}' type: '{$Request.param.type}'
},function(result){ }, function (result) {
console.log(result); console.log(result);
result.data.forEach(category => { result.data.forEach(category => {
var prefix = ''; var prefix = '';
for (let prefixLevelIndex = 0; prefixLevelIndex < category.level; prefixLevelIndex++) { for (let prefixLevelIndex = 0; prefixLevelIndex < category.level; prefixLevelIndex++) {
prefix += '|--' prefix += '|--'
} }
var domCategory = $('.tpl .category-item').clone(); var domCategory = $('.tpl .category-item').clone();
domCategory.find('input').val(category.id) domCategory.find('input').val(category.id)
domCategory.find('input').attr('title', prefix+category.title) domCategory.find('input').attr('title', prefix + category.title)
domCategory.appendTo('.category-list') domCategory.appendTo('.category-list')
var domNewCategory = $('.tpl .new-category-item').clone(); var domNewCategory = $('.tpl .new-category-item').clone();
domNewCategory.text(prefix+category.title) domNewCategory.text(prefix + category.title)
domNewCategory.val(category.id) domNewCategory.val(category.id)
domNewCategory.attr('title',category.title) domNewCategory.attr('title', category.title)
domNewCategory.appendTo('.new-category-option-list select') domNewCategory.appendTo('.new-category-option-list select')
@@ -446,22 +443,22 @@
form.render() form.render()
}) })
} }
$('.create-category').click(function(){ $('.create-category').click(function () {
var pid = $('.new-category-option-list').find('select').val(); var pid = $('.new-category-option-list').find('select').val();
var title = $('#new-category').val() var title = $('#new-category').val()
$.post('{:url("Category/save")}',{ $.post('{:url("Category/save")}', {
title:title, title: title,
pid:pid pid: pid
},function(result){ }, function (result) {
if(result.code == 0){ if (result.code == 0) {
layer.msg('添加成功') layer.msg('添加成功')
initCategory(); initCategory();
}else{ } else {
layer.msg(result.msg) layer.msg(result.msg)
} }
}) })
}) })
}) })

View File

@@ -257,6 +257,12 @@
</div> </div>
<script> <script>
var lastUpdateSecond = 0;
var currentSecond = 0;
setInterval(() => {
currentSecond++
}, 1000);
var categoryList = JSON.parse('{:json_encode($post->categorys->column("category_id"))}') var categoryList = JSON.parse('{:json_encode($post->categorys->column("category_id"))}')
var tagList = JSON.parse('{:json_encode($post->tags->column("tag_id"))}') var tagList = JSON.parse('{:json_encode($post->tags->column("tag_id"))}')
@@ -301,18 +307,34 @@
} else { } else {
console.log('Cursor not in the editor'); console.log('Cursor not in the editor');
} }
}); });
quill.on('text-change', function (delta, oldDelta, source) { quill.on('text-change', function (delta, oldDelta, source) {
currentRange.index = delta.ops[0].retain
if (source == 'api') { if (source == 'api') {
console.log("An API call triggered this change."); console.log("An API call triggered this change.");
} else if (source == 'user') { } else if (source == 'user') {
console.log("A user action triggered this change."); console.log("A user action triggered this change.");
} }
if (currentSecond - lastUpdateSecond > 30) {
var formData = {
'id': '{$post.id}'
};
formData.content = quill.getContents().ops
formData.content_html = $('#editor .ql-editor').html()
$.post('{:url("update")}', formData, function (result) {
lastUpdateSecond = currentSecond
layer.msg('自动保存成功',{
offset: 't'
})
})
}
}); });
upload.render({ upload.render({
@@ -369,8 +391,6 @@
formData.content = quill.getContents().ops formData.content = quill.getContents().ops
formData.content_html = $('#editor .ql-editor').html() formData.content_html = $('#editor .ql-editor').html()
console.log(formData);
$.post('{:url("update")}', formData, function (result) { $.post('{:url("update")}', formData, function (result) {
layer.msg('保存成功') layer.msg('保存成功')