bux
/
tracim_v2


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <title>Html-documents App Tracim</title>
  <link rel='shortcut icon' href='favicon.ico'>

  <link rel="stylesheet" type="text/css" href="./font/font-awesome-4.7.0/css/font-awesome.css">
  <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="./dev/bootstrap-4.0.0-beta.css">
</head>
<body>
  <script src="./dev/jquery-3.2.1.js"></script>
  <script src="./dev/popper-1.12.3.js"></script>
  <script src="./dev/bootstrap-4.0.0-beta.2.js"></script>

  <script type="text/javascript" src="/asset/tinymce/jquery.tinymce.min.js"></script>
  <script type="text/javascript" src="/asset/tinymce/tinymce.min.js"></script>

  <div id='content'></div>

  <script type='text/javascript'>
    (function () {
      wysiwyg = function (selector, handleOnChange) {
        function base64EncodeAndTinyMceInsert (files) {
          for (var i = 0; i < files.length; i++) {
            if (files[i].size > 1000000)
              files[i].allowed = confirm(files[i].name + " fait plus de 1mo et peut prendre du temps à insérer, voulez-vous continuer ?")
          }

          for (var i = 0; i < files.length; i++) {
            if (files[i].allowed !== false && files[i].type.match('image.*')) {
              var img = document.createElement('img')

              var fr = new FileReader()

              fr.readAsDataURL(files[i])

              fr.onloadend = function (e) {
                img.src = e.target.result
                tinymce.activeEditor.execCommand('mceInsertContent', false, img.outerHTML)
              }
            }
          }
        }

        // HACK: The tiny mce source code modal contain a textarea, but we
        // can't edit it (like it's readonly). The following solution
        // solve the bug: https://stackoverflow.com/questions/36952148/tinymce-code-editor-is-readonly-in-jtable-grid
        $(document).on('focusin', function(e) {
          if ($(e.target).closest(".mce-window").length) {
            e.stopImmediatePropagation();
          }
        });

        tinymce.init({
          selector: selector,
          // height: 130,
          // width: 530,
          menubar: false,
          resize: false,
          plugins: [
            'advlist autolink lists link image charmap print preview anchor textcolor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code help'
          ],
          toolbar: 'insert | formatselect | bold italic underline strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | table | code ',
          content_css: [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tinymce.com/css/codepen.min.css'
          ],
          setup: function ($editor) {
            $editor.on('change', function(e) {
              handleOnChange({target: {value: $editor.getContent()}}) // target.value to emulate a js event so the react handler can expect one
            })

            //////////////////////////////////////////////
            // add custom btn to handle image by selecting them with system explorer
            $editor.addButton('customInsertImage', {
              icon: 'mce-ico mce-i-image',
              title: 'Image',
              onclick: function () {
                if ($('#hidden_tinymce_fileinput').length > 0) $('#hidden_tinymce_fileinput').remove()

                fileTag = document.createElement('input')
                fileTag.id = 'hidden_tinymce_fileinput'
                fileTag.type = 'file'
                $('body').append(fileTag)

                $('#hidden_tinymce_fileinput').on('change', function () {
                  base64EncodeAndTinyMceInsert($(this)[0].files)
                })

                $('#hidden_tinymce_fileinput').click()
              }
            })

            //////////////////////////////////////////////
            // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
            $editor
              .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
                e.preventDefault()
                e.stopPropagation()
              })
              .on('drop', function(e) {
                base64EncodeAndTinyMceInsert(e.dataTransfer.files)
              })
          }
        })
      }
    })()
  </script>

  <script src='./html-documents.app.dev.js'></script>
</body>
</html>