mde.html 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <html>
  2. <head>
  3. <title>Markdown Editor</title>
  4. <script src="../script/jquery.min.js"></script>
  5. <script src="../script/ao_module.js"></script>
  6. <link rel="stylesheet" href="script/SimpleMDE/simplemde.min.css">
  7. <script src="script/SimpleMDE/simplemde.min.js"></script>
  8. <style>
  9. html, body{
  10. background-color:white;
  11. height: calc(100% - 80px);
  12. }
  13. #maintext{
  14. height:100% !important;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <textarea id="maintext"></textarea>
  20. <script>
  21. var simplemde; //SimpleMDE editor object
  22. var filepath = ""; //Current editing filepath
  23. var files = ao_module_loadInputFiles();
  24. var originalTitle = "MDEditor";
  25. var lastSaveContent = ""; //Content for last saved content
  26. $(window).on("keydown",function(event) {
  27. if (event.which == 83 && event.ctrlKey){
  28. event.preventDefault();
  29. saveText();
  30. }else if (event.target.tagName == "TEXTAREA"){
  31. //Some wierd hack to make SimpleMDE to work with ArozOS IME API
  32. if (parent.window.ime){
  33. parent.window.ime.focus = event.target;
  34. if (parent.window.ime.handler != null){
  35. parent.window.ime.handler(event);
  36. }
  37. }
  38. }
  39. });
  40. if (files !== null && files.length > 0){
  41. //Set the window name
  42. ao_module_setWindowTitle("MDEditor - " + files[0].filename);
  43. originalTitle = "MDEditor - " + files[0].filename;
  44. //Check if there are more than 1 text files to be opened. If yes, open new windows.
  45. if (files.length > 1){
  46. for (var i = 1; i < files.length; i++){
  47. var thisFilelist = [{
  48. filename: files[i].filename,
  49. filepath: files[i].filepath
  50. }];
  51. thisFilelist = encodeURIComponent(JSON.stringify(thisFilelist));
  52. ao_module_newfw({
  53. url: "MDEditor/mde.html#" + thisFilelist,
  54. width: 1080,
  55. height: 580,
  56. appicon: "MDEditor/img/notebook.png",
  57. title: "MDEditor",
  58. });
  59. }
  60. }
  61. filepath = files[0].filepath;
  62. //Check if this is json. If yes, parse it to string before displaying to prevent the [object Object] bug
  63. var ext = filepath.split(".").pop();
  64. var isJson = false;
  65. if (ext == "json"){
  66. isJson = true;
  67. }
  68. //Load the file into the textarea
  69. $.get("../../media?file=" + files[0].filepath + "#" + Date.now(),function(data){
  70. if (isJson){
  71. data = JSON.stringify(data);
  72. }
  73. $("#maintext").text(data);
  74. lastSaveContent = data;
  75. //Load Markdown Editor
  76. simplemde = new SimpleMDE({
  77. autofocus: true,
  78. element: document.getElementById("maintext"),
  79. forceSync: true,
  80. insertTexts: {
  81. horizontalRule: ["", "\n\n-----\n\n"],
  82. image: ["![](http://", ")"],
  83. link: ["[", "](http://)"],
  84. table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
  85. },
  86. placeholder: "(Empty file)",
  87. //promptURLs: true,
  88. renderingConfig: {
  89. singleLineBreaks: true,
  90. codeSyntaxHighlighting: true,
  91. },
  92. toolbar: ["bold","italic","heading","|","code","quote","unordered-list","ordered-list","|","link","image","table","|","preview","side-by-side","fullscreen","|",
  93. {
  94. name: "savebtn",
  95. action: function(){
  96. saveText();
  97. },
  98. className: "fa fa-floppy-o",
  99. title: "Save",
  100. },"guide","|"],
  101. spellChecker: false,
  102. status: ["autosave", "lines", "words", "cursor"], // Optional usage
  103. });
  104. });
  105. }else{
  106. simplemde = new SimpleMDE({ element: document.getElementById("maintext") });
  107. }
  108. function handleNewFileSave(filedata){
  109. for (var i=0; i < filedata.length; i++){
  110. var thisFilename = filedata[i].filename;
  111. var thisFilepath = filedata[i].filepath;
  112. //Update the current editing filepath
  113. filepath = thisFilepath;
  114. ao_module_setWindowTitle("MDEditor - " + thisFilename);
  115. originalTitle = "MDEditor - " + thisFilename;
  116. }
  117. saveText();
  118. }
  119. function saveText(callback=undefined){
  120. if (filepath == ""){
  121. //This is a new file. Ask for save directory.
  122. ao_module_openFileSelector(handleNewFileSave, "user:/Desktop", "new",false, {
  123. defaultName: "Untitled.md"
  124. });
  125. return;
  126. }
  127. var newcontent = simplemde.value();
  128. ao_module_agirun("./MDEditor/filesaver.js", {
  129. filepath: filepath,
  130. content: newcontent
  131. }, function(data){
  132. console.log(data);
  133. if (data.error !== undefined){
  134. alert(data.error);
  135. }else{
  136. //Save succeed. Update last saved content
  137. lastSaveContent = newcontent;
  138. //Update the title as well
  139. ao_module_setWindowTitle(originalTitle);
  140. if (callback != undefined){
  141. callback();
  142. }
  143. }
  144. }, function(){
  145. alert("Save File Failed!")
  146. });
  147. }
  148. setInterval(function(){
  149. //Check if the content from last save matched the current value on simplemde
  150. if (!isSaved()){
  151. ao_module_setWindowTitle(originalTitle + " *");
  152. }else{
  153. //No new changes
  154. ao_module_setWindowTitle(originalTitle);
  155. }
  156. }, 1000);
  157. function isSaved(){
  158. var currentContent = simplemde.value();
  159. return (lastSaveContent == currentContent);
  160. }
  161. //Overwrite the ao_module_close function to allow
  162. if (!ao_module_virtualDesktop){
  163. window.onbeforeunload = function(){
  164. if (!isSaved()){
  165. return "Content is not saved. Confirm Exit?";
  166. }
  167. }
  168. }
  169. //Overwrite the close sequence
  170. function ao_module_close(){
  171. if (!isSaved()){
  172. //Not saved
  173. if (confirm("Some changes are not saved. Save before exit?")){
  174. saveText(function(){
  175. //Exit after save
  176. closeThisWindow();
  177. });
  178. }else{
  179. //User request not to save
  180. closeThisWindow();
  181. }
  182. }else{
  183. //Saved. Exit
  184. closeThisWindow();
  185. }
  186. }
  187. function closeThisWindow(){
  188. ao_module_closeHandler();
  189. }
  190. </script>
  191. </body>
  192. </html>