framedEditor.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  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 rel="stylesheet" href="../script/semantic/semantic.min.css">
  11. <link href="script/suneditor/suneditor.min.css" rel="stylesheet">
  12. <script src="script/suneditor/suneditor.min.js"></script>
  13. <script src="script/suneditor/en.js"></script>
  14. <style>
  15. body{
  16. margin: 0px;
  17. }
  18. #editorWrapper{
  19. position: fixed;
  20. left: 0px;
  21. top: 0px;
  22. width: 100%;
  23. height: 100%;
  24. }
  25. #maineditor{
  26. width: calc(100% - 10px);
  27. height: 300px;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="editorWrapper">
  33. <textarea id="maineditor"></textarea>
  34. </div>
  35. <script>
  36. //Start a new editor if there is no file ported in
  37. var editor;
  38. if (parent.inputFiles == null){
  39. //New Editor
  40. initEditor();
  41. parent.handleWindowResize();
  42. }else{
  43. //Get the filepath and load it
  44. var file = parent.inputFiles;
  45. //Load the given file
  46. $.ajax({
  47. url: "../media?file=" + file.filepath,
  48. success: function(data){
  49. var body = data.substring(data.indexOf("<body>")+6,data.indexOf("</body>"));
  50. //Check if the html include title. If yes, grab it as well
  51. if (data.includes("<title>") && data.includes("</title>")){
  52. var title = data.substring(data.indexOf("<title>")+7,data.indexOf("</title>"));
  53. parent.updateTitle(title);
  54. }
  55. $("#maineditor").html(body);
  56. parent.editingFile = file.filepath;
  57. initEditor();
  58. parent.handleWindowResize();
  59. }
  60. });
  61. }
  62. function getContent(){
  63. return editor.getContents();
  64. }
  65. function initEditor(){
  66. editor = SUNEDITOR.create(document.getElementById('maineditor'),
  67. {
  68. lang: SUNEDITOR_LANG['en'],
  69. buttonList: [
  70. ['undo', 'redo', 'save', 'preview'],
  71. ['font', 'fontSize', 'formatBlock'],
  72. ['paragraphStyle', 'blockquote'],
  73. ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
  74. ['fontColor', 'hiliteColor'],
  75. ['removeFormat'],
  76. '/', // Line break
  77. ['outdent', 'indent'],
  78. ['align', 'horizontalRule', 'list', 'lineHeight'],
  79. ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
  80. /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
  81. ['showBlocks', 'codeView']
  82. ],
  83. paragraphStyles : [
  84. {
  85. name: 'Segment',
  86. class: '__se__ ui segment',
  87. },
  88. {
  89. name: 'Red Segment',
  90. class: '__se__ ui red segment',
  91. },
  92. {
  93. name: 'Blue Segment',
  94. class: '__se__ ui blue segment',
  95. },
  96. {
  97. name: 'Green Segment',
  98. class: '__se__ ui green segment',
  99. },
  100. {
  101. name: 'Message',
  102. class: '__se__ ui message',
  103. },
  104. {
  105. name: 'Red Message',
  106. class: '__se__ ui red message',
  107. },
  108. {
  109. name: 'Blue Message',
  110. class: '__se__ ui blue message',
  111. },
  112. {
  113. name: 'Green Message',
  114. class: '__se__ ui green message',
  115. }
  116. ],
  117. "resizingBar": false,
  118. callBackSave : function (contents, isChanged) {
  119. parent.handleSavefile(contents);
  120. return false;
  121. }
  122. }
  123. );
  124. return editor;
  125. }
  126. </script>
  127. </body>
  128. </html>