framedEditor.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="apple-mobile-web-app-capable" content="yes" />
  6. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  7. <meta name="theme-color" content="#ff9224">
  8. <script src="../script/jquery.min.js"></script>
  9. <!-- Editor -->
  10. <link href="script/suneditor/suneditor.min.css" rel="stylesheet">
  11. <script src="script/suneditor/suneditor.min.js"></script>
  12. <script src="script/suneditor/en.js"></script>
  13. <style>
  14. body{
  15. margin: 0px;
  16. }
  17. #editorWrapper{
  18. position: fixed;
  19. left: 0px;
  20. top: 0px;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. #maineditor{
  25. width: calc(100% - 10px);
  26. height: 300px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="editorWrapper">
  32. <textarea id="maineditor"></textarea>
  33. </div>
  34. <script>
  35. //Start a new editor if there is no file ported in
  36. var editor;
  37. if (parent.inputFiles == null){
  38. //New Editor
  39. initEditor();
  40. parent.handleWindowResize();
  41. }else{
  42. //Get the filepath and load it
  43. var file = parent.inputFiles;
  44. //Load the given file
  45. $.getJSON("../media?file=" + file.filepath, function(data){
  46. $("#maineditor").html(data.Content);
  47. $(parent.document).find("#title").val(data.Title);
  48. $(parent.document).find("#tags").val(data.Tags.join(", "));
  49. $(parent.document).find("#savepath").text(file.filepath);
  50. parent.editingFile = file.filepath;
  51. initEditor();
  52. parent.handleWindowResize();
  53. });
  54. }
  55. function getContent(){
  56. return editor.getContents();
  57. }
  58. function initEditor(){
  59. editor = SUNEDITOR.create(document.getElementById('maineditor'),
  60. {
  61. lang: SUNEDITOR_LANG['en'],
  62. buttonList: [
  63. ['undo', 'redo'],
  64. ['font', 'fontSize', 'formatBlock'],
  65. ['paragraphStyle', 'blockquote'],
  66. ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
  67. ['fontColor', 'hiliteColor'],
  68. ['removeFormat'],
  69. '/', // Line break
  70. ['outdent', 'indent'],
  71. ['align', 'horizontalRule', 'list', 'lineHeight'],
  72. ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
  73. /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
  74. ['showBlocks', 'codeView']
  75. ],
  76. "resizingBar": false,
  77. }
  78. );
  79. return editor;
  80. }
  81. </script>
  82. </body>
  83. </html>