NoteOnMe博客平台搭建
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

363 lines
11 KiB

3 years ago
  1. <!doctype html>
  2. <?php
  3. require_once "pdo.php";
  4. session_start();
  5. if ( isset($_SESSION['error']) ) {
  6. echo '<p style="color:red">'.$_SESSION['error']."</p>\n";
  7. unset($_SESSION['error']);
  8. }
  9. if (isset($_GET['article_id']) )
  10. {
  11. $stmt = $pdo->prepare('SELECT content, headline,user_id,public,category FROM article WHERE article_id = :article_id');
  12. $stmt->execute(array( ':article_id' => $_GET["article_id"]));
  13. $row = $stmt->fetch(PDO::FETCH_ASSOC);
  14. if ( $row == false ) {
  15. header('Location: index.php');
  16. }
  17. }
  18. ?>
  19. <html>
  20. <head>
  21. <meta charset="utf-8"/>
  22. <link rel="stylesheet" type="text/css" href="css/templatemo-style.css?t={{time()}}">
  23. <link type="text/css" href="highlight/styles/a11y-light.css?t={{time()}}" rel="stylesheet">
  24. <script src="highlight/highlight.pack.js"></script>
  25. <script src="js/jquery.min.js"></script>
  26. <script src="extra.js"></script>
  27. <script src="js/setting.js"></script>
  28. <script src="js/bootstrap.min.js"></script>
  29. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  30. <meta name="viewport" content="width=device-width, initial-scale=1">
  31. <script src="js/jquery.singlePageNav.min.js"></script>
  32. <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  33. <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  34. <script src="require.js" ></script>
  35. <script>
  36. /*require.config({
  37. paths : {
  38. "marked" : ["https://cdn.jsdelivr.net/npm/marked/marked.min"],
  39. "highlight" : "highlight/highlight.pack"
  40. }
  41. })*/
  42. function load()
  43. {
  44. $('#article_id').val(<?php if(isset($_GET['article_id'])){echo($_GET['article_id']);} ?>);
  45. var str=<?=json_encode($row['content'])?>;
  46. $('#article').val(str);
  47. var str2=<?=json_encode($row['headline'])?>;
  48. $('#title').val(str2);
  49. $('#article_type').val(`<?php if(isset($_GET['article_id'])){echo($row['public']);} ?>`);
  50. $('#category').val(`<?php if(isset($_GET['article_id'])){echo(htmlentities($row['category']));} ?>`);
  51. }
  52. </script>
  53. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  54. <style type="text/css">
  55. #for_image{
  56. background: url(image/image-4x.png) no-repeat;
  57. }
  58. #code{
  59. background: url(image/code.svg) no-repeat;
  60. background-size:2.3em 2.3em;
  61. }
  62. .nav-button{
  63. vertical-align:middle;
  64. background-attachment:fixed;
  65. background-position:center!important;
  66. background-size:2.3em 2.3em;
  67. width:2.3em; height:5em;
  68. border-style: none;
  69. padding-top:2em;
  70. margin-right:1em;
  71. margin-left:1em;
  72. filter: invert(100%);
  73. }
  74. .nav-button:hover{
  75. color: #6C0500;
  76. border-top:0.2em solid #6C0500;
  77. }
  78. #file-upload{
  79. display:none;
  80. }
  81. #file-upload2{
  82. display:none;
  83. }
  84. #article{
  85. margin:1em;
  86. width:100%;
  87. height:46em;
  88. }
  89. #md_render{
  90. margin:1em;
  91. height:50em;
  92. }
  93. .nav-icon{
  94. vertical-align:middle;
  95. width:1em; height:1.5em;
  96. border-style: none;
  97. background: transparent;
  98. color:#fff;
  99. font-size: 3em;
  100. font-weight: 400;
  101. }
  102. .nav-icon:hover{
  103. color: #93FAFF;
  104. border-top:0.1em solid #93FAFF;
  105. }
  106. h1{
  107. text-align:center;
  108. }
  109. </style>
  110. </head>
  111. <body>
  112. <div class="fixed-header">
  113. <div class="container">
  114. <div class="navbar-header">
  115. <button type="button" class="navbar-toggle">
  116. <span class="icon-bar"></span>
  117. <span class="icon-bar"></span>
  118. <span class="icon-bar"></span>
  119. </button>
  120. <input id="file-upload" type="file" name="file" accept="image/*"/>
  121. <button class="nav-button" id="for_image" onclick="imageupload()"></button>
  122. <button onclick="bold()" class="nav-icon"><i>B</i></button>
  123. <button onclick="titlee()" class="nav-icon"><i>T</i></button>
  124. <input id="file-upload2" type="file" name="file2" accept="image/*"/>
  125. <button onclick="ocr()" class="nav-icon"><i>O</i></button>
  126. <button class="nav-button" id="code" onclick="code()"></button>
  127. </div>
  128. <nav class="main-menu">
  129. <ul>
  130. <li> <button class="btn2 dark-blue-btn2" onclick="save()">提交</button> </li>
  131. <li><a href="index.php" class=" external">取消</a></li>
  132. </ul>
  133. </nav>
  134. </div>
  135. </div>
  136. <div class="container-fluid">
  137. <section class="col-md-12 content" >
  138. <div class="col-lg-12 col-md-12 top" >
  139. <form id="edit_finish" style="text-align:center;margin: 0 auto;" role="form" method="POST" action="save_article.php">
  140. <input type="text" style="box-shadow: none; margin-right:1em; font-size: 16px;height: auto;" name="title" placeholder="标题" id="title">
  141. <input type="text" style="box-shadow: none; margin-right:1em; font-size: 16px;height: auto;" name="category" placeholder="分类" id="category">
  142. <input type="hidden" name="article_id" id="article_id" >
  143. <select name="article_type" style="font-size: 16px; box-sizing:border-box;" id="article_type">
  144. <option value="public">公开</option>
  145. <option value="private">私密</option>
  146. </select>
  147. <br/>
  148. <br/>
  149. </div>
  150. </section>
  151. <section class="col-md-12 content">
  152. <div class="row ">
  153. <div class="col-lg-6 col-md-6 content-item content-item-2 ">
  154. <textarea id="article" name="article" class="form-control" >
  155. </textarea></form>
  156. <?php
  157. if (isset($_GET['article_id']) )
  158. {
  159. echo("
  160. <script>
  161. load();
  162. </script>"
  163. );
  164. }
  165. ?>
  166. </div>
  167. <div class="col-lg-6 col-md-6 content-item content-item-2 ">
  168. <pre id="md_render">
  169. </pre>
  170. <div>
  171. </div>
  172. </section>
  173. <div class="text-center footer">
  174. <div class="container"> NOTEBOOK</div>
  175. </div>
  176. </body>
  177. </html>
  178. <script>
  179. require.config({
  180. paths : {
  181. "marked" : ["https://cdn.jsdelivr.net/npm/marked/marked.min"],
  182. "highlight" : "highlight/highlight.pack"
  183. }
  184. })
  185. function code(){
  186. $('#article').val($('#article').val()+"\n"+"```"+"\n"+"\n"+"```");
  187. }
  188. require(["marked","highlight"], function (marked,highlight) {
  189. var rendererMD = new marked.Renderer();
  190. marked.setOptions({
  191. renderer: rendererMD,
  192. gfm: true,
  193. tables: true,
  194. breaks: false,
  195. pedantic: false,
  196. sanitize: false,
  197. smartLists: true,
  198. smartypants: false
  199. });
  200. marked.setOptions({
  201. highlight: function (code) {
  202. return highlight.highlightAuto(code).value;
  203. }
  204. });
  205. $('#article').keyup(function(){
  206. $('#md_render').html(marked($('#article').val()));
  207. $('#md_render').html(marked($('#article').val()));
  208. })
  209. });
  210. function imageupload(){
  211. $("#file-upload").click();
  212. }
  213. function ocr(){
  214. $("#file-upload2").click();
  215. }
  216. function save(){
  217. article = document.getElementById('article').value;
  218. title = document.getElementById('title').value;
  219. type = document.getElementById('article_type').value;
  220. category=document.getElementById('category').value;
  221. if (article == null || article == "" || title == null || title == ""||type==null||category==null||category=="") {
  222. alert("信息不能为空");
  223. return false;
  224. }
  225. $("#edit_finish").submit();
  226. }
  227. function titlee(){
  228. $("#article"). iAddFieldbefore("# ");
  229. }
  230. function bold(){
  231. a=$("#article"). iGetFieldPos();
  232. start=a[0];
  233. end=a[1];
  234. $("#article"). iAddFieldboth("**");
  235. }
  236. </script>
  237. <script type="text/javascript">
  238. /*var article=$("#article").html;
  239. $.post( 'edit_article.php', { 'val': article },
  240. function( data ) {
  241. window.console && console.log(data);
  242. }
  243. ).error( function() {
  244. alert("Dang!");
  245. });
  246. $(document).ready(function (e) {*/
  247. $("#file-upload").on('input', function () {
  248. var file_data = $('#file-upload').prop('files')[0];
  249. window.console && console.log(file_data);
  250. var form_data = new FormData();
  251. form_data.append('file', file_data);
  252. $.ajax({
  253. url: 'test9.php', // point to server-side controller method
  254. dataType: 'text', // what to expect back from the server
  255. cache: false,
  256. contentType: false,
  257. processData: false,
  258. data: form_data,
  259. type: 'post',
  260. success: function (response) {
  261. if(response)
  262. {
  263. var currentVal = $('#article').val();
  264. $('textarea').val(currentVal + '<img src="'+response+'" width="50%" height="50%" />\n\n');
  265. /* <img src='"+response+" '/>*/
  266. }
  267. //$('#msg').html(response); // display success response from the server
  268. console.log(response);
  269. },
  270. error: function (response) {
  271. $('#msg').html(response); // display error response from the server
  272. }
  273. });
  274. //$('#img').attr('src',file_data);
  275. });
  276. $("#file-upload2").on('input', function () {
  277. var file_data = $('#file-upload2').prop('files')[0];
  278. window.console && console.log(file_data);
  279. var form_data = new FormData();
  280. form_data.append('file', file_data);
  281. $.ajax({
  282. url: 'test10.php', // point to server-side controller method
  283. dataType: 'text', // what to expect back from the server
  284. cache: false,
  285. contentType: false,
  286. processData: false,
  287. data: form_data,
  288. type: 'post',
  289. success: function (response) {
  290. if(response)
  291. {
  292. //var obj = eval('(' + response + ')');
  293. var currentVal = $('#article').val();
  294. $('textarea').val(currentVal + response);
  295. /* <img src='"+response+" '/>*/
  296. }
  297. //$('#msg').html(response); // display success response from the server
  298. console.log(response);
  299. },
  300. error: function (response) {
  301. $('#msg').html(response); // display error response from the server
  302. }
  303. });
  304. //$('#img').attr('src',file_data);
  305. });
  306. /* }
  307. );*/
  308. </script>