index.html 6.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <meta name="viewport" content="width=device-width, user-scalable=no">
  6. <title>Tracim</title>
  7. <link rel='shortcut icon' href='favicon.ico'>
  8. <link rel="stylesheet" type="text/css" href="./font/font-awesome-4.7.0/css/font-awesome.css">
  9. <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
  10. <!--
  11. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  12. -->
  13. <link rel="stylesheet" type="text/css" href="./dev/bootstrap-4.0.0-beta.css">
  14. </head>
  15. <body>
  16. <div id='content'></div>
  17. <script src='tracim.vendor.bundle.js'></script>
  18. <script src='tracim.app.entry.js'></script>
  19. <!--
  20. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  21. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  22. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  23. -->
  24. <script src='./plugin/pageHtml.plugin.js'></script>
  25. <script src="./dev/jquery-3.2.1.js"></script>
  26. <script src="./dev/popper-1.12.3.js"></script>
  27. <script src="./dev/bootstrap-4.0.0-beta.2.js"></script>
  28. <script type='text/javascript'>
  29. GLOBAL_renderPlugin = pluginName => {
  30. if (pluginName === 'PageHtml') {
  31. pluginPageHtml.renderPlugin('pluginContainer')
  32. console.log('plugin pagehtml rendered')
  33. }
  34. }
  35. GLOBAL_dispatchEvent = (data) => {
  36. var event = new CustomEvent('pluginCustomEvent', {detail: data})
  37. document.dispatchEvent(event)
  38. }
  39. GLOBAL_unmountPlugin = () => {
  40. console.log('btn close clicked')
  41. pluginPageHtml.hidePlugin('pluginContainer')
  42. }
  43. // only usefull if plugin doesn't handle fileContent himself
  44. GLOBAL_handleRequireRedraw = () => {
  45. var rez = pluginA.destroyPlugin('plugin')
  46. if (rez) GLOBAL_drawPlugin('redraw')
  47. else console.log('Erreur, failed at destroying plugin')
  48. }
  49. </script>
  50. <script type='text/javascript'>
  51. if (window.matchMedia("(min-width:1200px)").matches) {
  52. var jsScript = document.createElement("script");
  53. jsScript.type = "text/javascript";
  54. jsScript.src = "https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=dfdhxdokxj2wagzkbxfgysgh86d6rr9m3dln0172vo3shipc";
  55. jsScript.onload = function() {
  56. function base64EncodeAndTinyMceInsert (files) {
  57. for (var i = 0; i < files.length; i++) {
  58. if (files[i].size > 1000000)
  59. files[i].allowed = confirm(files[i].name + " fait plus de 1mo et peut prendre du temps à insérer, voulez-vous continuer ?")
  60. }
  61. for (var i = 0; i < files.length; i++) {
  62. if (files[i].allowed !== false && files[i].type.match('image.*')) {
  63. var img = document.createElement('img')
  64. var fr = new FileReader()
  65. fr.readAsDataURL(files[i])
  66. fr.onloadend = function (e) {
  67. img.src = e.target.result
  68. tinymce.activeEditor.execCommand('mceInsertContent', false, img.outerHTML)
  69. }
  70. }
  71. }
  72. }
  73. // HACK: The tiny mce source code modal contain a textarea, but we
  74. // can't edit it (like it's readonly). The following solution
  75. // solve the bug: https://stackoverflow.com/questions/36952148/tinymce-code-editor-is-readonly-in-jtable-grid
  76. $(document).on('focusin', function(e) {
  77. if ($(e.target).closest(".mce-window").length) {
  78. e.stopImmediatePropagation();
  79. }
  80. });
  81. tinymce.init({
  82. selector: 'textarea',
  83. height: 130,
  84. // width: 530,
  85. menubar: false,
  86. resize: false,
  87. plugins: [
  88. 'advlist autolink lists link image charmap print preview anchor textcolor',
  89. 'searchreplace visualblocks code fullscreen',
  90. 'insertdatetime media table contextmenu paste code help'
  91. ],
  92. toolbar: 'insert | formatselect | bold italic underline strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | table | code ',
  93. content_css: [
  94. '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
  95. '//www.tinymce.com/css/codepen.min.css'
  96. ],
  97. setup: function ($editor) {
  98. //////////////////////////////////////////////
  99. // add custom btn to handle image by selecting them with system explorer
  100. $editor.addButton('customInsertImage', {
  101. icon: 'mce-ico mce-i-image',
  102. title: 'Image',
  103. onclick: function () {
  104. var hiddenTinyMceInput = $('#hidden_tinymce_fileinput')
  105. if (hiddenTinyMceInput.length > 0) hiddenTinyMceInput.remove()
  106. fileTag = document.createElement('input')
  107. fileTag.id = 'hidden_tinymce_fileinput'
  108. fileTag.type = 'file'
  109. $('body').append(fileTag)
  110. hiddenTinyMceInput.on('change', function () {
  111. base64EncodeAndTinyMceInsert($(this)[0].files)
  112. })
  113. hiddenTinyMceInput.click()
  114. }
  115. })
  116. //////////////////////////////////////////////
  117. // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
  118. $editor
  119. .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
  120. e.preventDefault()
  121. e.stopPropagation()
  122. })
  123. .on('drop', function(e) {
  124. base64EncodeAndTinyMceInsert(e.dataTransfer.files)
  125. })
  126. }
  127. });
  128. }
  129. document.getElementsByTagName("body")[0].appendChild(jsScript);
  130. }
  131. </script>
  132. </body>
  133. </html>