<!doctype html>
<?php
require_once "pdo.php";
session_start();
if ( isset($_SESSION['error']) ) {
echo '<p style="color:red">'.$_SESSION['error']."</p>\n";
unset($_SESSION['error']);
}
if (isset($_GET['article_id']) )
{
$stmt = $pdo->prepare('SELECT content, headline,user_id,public,category FROM article WHERE article_id = :article_id');
$stmt->execute(array( ':article_id' => $_GET["article_id"]));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if ( $row == false ) {
header('Location: index.php');
}
}
?>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/templatemo-style.css?t={{time()}}">
<link type="text/css" href="highlight/styles/a11y-light.css?t={{time()}}" rel="stylesheet">
<script src="highlight/highlight.pack.js"></script>
<script src="js/jquery.min.js"></script>
<script src="extra.js"></script>
<script src="js/setting.js"></script>
<script src="js/bootstrap.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="require.js" ></script>
<script>
/*require.config({
paths : {
"marked" : ["https://cdn.jsdelivr.net/npm/marked/marked.min"],
"highlight" : "highlight/highlight.pack"
}
})*/
function load()
{
$('#article_id').val(<?php if(isset($_GET['article_id'])){echo($_GET['article_id']);} ?>);
var str=<?=json_encode($row['content'])?>;
$('#article').val(str);
var str2=<?=json_encode($row['headline'])?>;
$('#title').val(str2);
$('#article_type').val(`<?php if(isset($_GET['article_id'])){echo($row['public']);} ?>`);
$('#category').val(`<?php if(isset($_GET['article_id'])){echo(htmlentities($row['category']));} ?>`);
}
</script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
#for_image{
background: url(image/image-4x.png) no-repeat;
}
#code{
background: url(image/code.svg) no-repeat;
background-size:2.3em 2.3em;
}
.nav-button{
vertical-align:middle;
background-attachment:fixed;
background-position:center!important;
background-size:2.3em 2.3em;
width:2.3em; height:5em;
border-style: none;
padding-top:2em;
margin-right:1em;
margin-left:1em;
filter: invert(100%);
}
.nav-button:hover{
color: #6C0500;
border-top:0.2em solid #6C0500;
}
#file-upload{
display:none;
}
#file-upload2{
display:none;
}
#article{
margin:1em;
width:100%;
height:46em;
}
#md_render{
margin:1em;
height:50em;
}
.nav-icon{
vertical-align:middle;
width:1em; height:1.5em;
border-style: none;
background: transparent;
color:#fff;
font-size: 3em;
font-weight: 400;
}
.nav-icon:hover{
color: #93FAFF;
border-top:0.1em solid #93FAFF;
}
h1{
text-align:center;
}
</style>
</head>
<body>
<div class="fixed-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<input id="file-upload" type="file" name="file" accept="image/*"/>
<button class="nav-button" id="for_image" onclick="imageupload()"></button>
<button onclick="bold()" class="nav-icon"><i>B</i></button>
<button onclick="titlee()" class="nav-icon"><i>T</i></button>
<input id="file-upload2" type="file" name="file2" accept="image/*"/>
<button onclick="ocr()" class="nav-icon"><i>O</i></button>
<button class="nav-button" id="code" onclick="code()"></button>
</div>
<nav class="main-menu">
<ul>
<li> <button class="btn2 dark-blue-btn2" onclick="save()">提交</button> </li>
<li><a href="index.php" class=" external">取消</a></li>
</ul>
</nav>
</div>
</div>
<div class="container-fluid">
<section class="col-md-12 content" >
<div class="col-lg-12 col-md-12 top" >
<form id="edit_finish" style="text-align:center;margin: 0 auto;" role="form" method="POST" action="save_article.php">
<input type="text" style="box-shadow: none; margin-right:1em; font-size: 16px;height: auto;" name="title" placeholder="标题" id="title">
<input type="text" style="box-shadow: none; margin-right:1em; font-size: 16px;height: auto;" name="category" placeholder="分类" id="category">
<input type="hidden" name="article_id" id="article_id" >
<select name="article_type" style="font-size: 16px; box-sizing:border-box;" id="article_type">
<option value="public">公开</option>
<option value="private">私密</option>
</select>
<br/>
<br/>
</div>
</section>
<section class="col-md-12 content">
<div class="row ">
<div class="col-lg-6 col-md-6 content-item content-item-2 ">
<textarea id="article" name="article" class="form-control" >
</textarea></form>
<?php
if (isset($_GET['article_id']) )
{
echo("
<script>
load();
</script>"
);
}
?>
</div>
<div class="col-lg-6 col-md-6 content-item content-item-2 ">
<pre id="md_render">
</pre>
<div>
</div>
</section>
<div class="text-center footer">
<div class="container"> NOTEBOOK</div>
</div>
</body>
</html>
<script>
require.config({
paths : {
"marked" : ["https://cdn.jsdelivr.net/npm/marked/marked.min"],
"highlight" : "highlight/highlight.pack"
}
})
function code(){
$('#article').val($('#article').val()+"\n"+"```"+"\n"+"\n"+"```");
}
require(["marked","highlight"], function (marked,highlight) {
var rendererMD = new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
marked.setOptions({
highlight: function (code) {
return highlight.highlightAuto(code).value;
}
});
$('#article').keyup(function(){
$('#md_render').html(marked($('#article').val()));
$('#md_render').html(marked($('#article').val()));
})
});
function imageupload(){
$("#file-upload").click();
}
function ocr(){
$("#file-upload2").click();
}
function save(){
article = document.getElementById('article').value;
title = document.getElementById('title').value;
type = document.getElementById('article_type').value;
category=document.getElementById('category').value;
if (article == null || article == "" || title == null || title == ""||type==null||category==null||category=="") {
alert("信息不能为空");
return false;
}
$("#edit_finish").submit();
}
function titlee(){
$("#article"). iAddFieldbefore("# ");
}
function bold(){
a=$("#article"). iGetFieldPos();
start=a[0];
end=a[1];
$("#article"). iAddFieldboth("**");
}
</script>
<script type="text/javascript">
/*var article=$("#article").html;
$.post( 'edit_article.php', { 'val': article },
function( data ) {
window.console && console.log(data);
}
).error( function() {
alert("Dang!");
});
$(document).ready(function (e) {*/
$("#file-upload").on('input', function () {
var file_data = $('#file-upload').prop('files')[0];
window.console && console.log(file_data);
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: 'test9.php', // point to server-side controller method
dataType: 'text', // what to expect back from the server
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (response) {
if(response)
{
var currentVal = $('#article').val();
$('textarea').val(currentVal + '<img src="'+response+'" width="50%" height="50%" />\n\n');
/* <img src='"+response+" '/>*/
}
//$('#msg').html(response); // display success response from the server
console.log(response);
},
error: function (response) {
$('#msg').html(response); // display error response from the server
}
});
//$('#img').attr('src',file_data);
});
$("#file-upload2").on('input', function () {
var file_data = $('#file-upload2').prop('files')[0];
window.console && console.log(file_data);
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: 'test10.php', // point to server-side controller method
dataType: 'text', // what to expect back from the server
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (response) {
if(response)
{
//var obj = eval('(' + response + ')');
var currentVal = $('#article').val();
$('textarea').val(currentVal + response);
/* <img src='"+response+" '/>*/
}
//$('#msg').html(response); // display success response from the server
console.log(response);
},
error: function (response) {
$('#msg').html(response); // display error response from the server
}
});
//$('#img').attr('src',file_data);
});
/* }
);*/
</script>