<!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/js/tinymce/jquery.tinymce.min.js"></script> <script type="text/javascript" src="/asset/tinymce/js/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, menubar: false, resize: false, skin: "lightgray", 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_style: "div {height: 100%;}", 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-document.app.dev.js'></script> </body> </html>