<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>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" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
-->
<link rel="stylesheet" type="text/css" href="./dev/bootstrap-4.0.0-beta.css">
</head>
<body>
<div id='content'></div>
<script src='tracim.vendor.bundle.js'></script>
<script src='tracim.app.entry.js'></script>
<!--
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
-->
<!-- script src='./plugin/pageHtml.plugin.js'></script -->
<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'>
function GLOBAL_renderPlugin () {
pluginPageHtml.renderPlugin('pluginContainer')
}
function GLOBAL_dispatchEvent (data) {
var event = new CustomEvent('pluginCustomEvent', {detail: data})
document.dispatchEvent(event)
}
</script>
<script type='text/javascript'>
if (window.matchMedia("(min-width:1200px)").matches) {
var jsScript = document.createElement("script");
jsScript.type = "text/javascript";
jsScript.src = "https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=dfdhxdokxj2wagzkbxfgysgh86d6rr9m3dln0172vo3shipc";
jsScript.onload = function() {
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: 'textarea',
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) {
//////////////////////////////////////////////
// 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 () {
var hiddenTinyMceInput = $('#hidden_tinymce_fileinput')
if (hiddenTinyMceInput.length > 0) hiddenTinyMceInput.remove()
fileTag = document.createElement('input')
fileTag.id = 'hidden_tinymce_fileinput'
fileTag.type = 'file'
$('body').append(fileTag)
hiddenTinyMceInput.on('change', function () {
base64EncodeAndTinyMceInsert($(this)[0].files)
})
hiddenTinyMceInput.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)
})
}
});
}
document.getElementsByTagName("body")[0].appendChild(jsScript);
}
</script>
</body>
</html>