index.html 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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>Workspace App 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. <link rel="stylesheet" type="text/css" href="./dev/bootstrap-4.0.0-beta.css">
  11. </head>
  12. <body>
  13. <script src="./dev/jquery-3.2.1.js"></script>
  14. <script src="./dev/popper-1.12.3.js"></script>
  15. <script src="./dev/bootstrap-4.0.0-beta.2.js"></script>
  16. <script type="text/javascript" src="/asset/tinymce/js/tinymce/jquery.tinymce.min.js"></script>
  17. <script type="text/javascript" src="/asset/tinymce/js/tinymce/tinymce.min.js"></script>
  18. <div id='content'></div>
  19. <script type='text/javascript'>
  20. (function () {
  21. wysiwyg = function (selector, handleOnChange) {
  22. function base64EncodeAndTinyMceInsert (files) {
  23. for (var i = 0; i < files.length; i++) {
  24. if (files[i].size > 1000000)
  25. files[i].allowed = confirm(files[i].name + " fait plus de 1mo et peut prendre du temps à insérer, voulez-vous continuer ?")
  26. }
  27. for (var i = 0; i < files.length; i++) {
  28. if (files[i].allowed !== false && files[i].type.match('image.*')) {
  29. var img = document.createElement('img')
  30. var fr = new FileReader()
  31. fr.readAsDataURL(files[i])
  32. fr.onloadend = function (e) {
  33. img.src = e.target.result
  34. tinymce.activeEditor.execCommand('mceInsertContent', false, img.outerHTML)
  35. }
  36. }
  37. }
  38. }
  39. // HACK: The tiny mce source code modal contain a textarea, but we
  40. // can't edit it (like it's readonly). The following solution
  41. // solve the bug: https://stackoverflow.com/questions/36952148/tinymce-code-editor-is-readonly-in-jtable-grid
  42. $(document).on('focusin', function(e) {
  43. if ($(e.target).closest(".mce-window").length) {
  44. e.stopImmediatePropagation();
  45. }
  46. });
  47. tinymce.init({
  48. selector: selector,
  49. menubar: false,
  50. resize: false,
  51. skin: "lightgray",
  52. plugins:'advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table contextmenu paste code help',
  53. toolbar: 'insert | formatselect | bold italic underline strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | table | code ',
  54. content_style: "div {height: 100%;}",
  55. setup: function ($editor) {
  56. $editor.on('change', function(e) {
  57. handleOnChange({target: {value: $editor.getContent()}}) // target.value to emulate a js event so the react handler can expect one
  58. })
  59. //////////////////////////////////////////////
  60. // add custom btn to handle image by selecting them with system explorer
  61. $editor.addButton('customInsertImage', {
  62. icon: 'mce-ico mce-i-image',
  63. title: 'Image',
  64. onclick: function () {
  65. if ($('#hidden_tinymce_fileinput').length > 0) $('#hidden_tinymce_fileinput').remove()
  66. fileTag = document.createElement('input')
  67. fileTag.id = 'hidden_tinymce_fileinput'
  68. fileTag.type = 'file'
  69. $('body').append(fileTag)
  70. $('#hidden_tinymce_fileinput').on('change', function () {
  71. base64EncodeAndTinyMceInsert($(this)[0].files)
  72. })
  73. $('#hidden_tinymce_fileinput').click()
  74. }
  75. })
  76. //////////////////////////////////////////////
  77. // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
  78. $editor
  79. .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
  80. e.preventDefault()
  81. e.stopPropagation()
  82. })
  83. .on('drop', function(e) {
  84. base64EncodeAndTinyMceInsert(e.dataTransfer.files)
  85. })
  86. }
  87. })
  88. }
  89. })()
  90. </script>
  91. <script src='./workspace.app.dev.js'></script>
  92. </body>
  93. </html>