-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (92 loc) · 3.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinyMCE + elFinder</title>
<!-- jQuery and jQuery UI (REQUIRED) -->
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- bootstrap for modal box -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- elFinder CSS (REQUIRED) -->
<link rel="stylesheet" type="text/css" href="css/elfinder.min.css"> <!--Change path with your elFinder path-->
<link rel="stylesheet" type="text/css" href="css/theme.css"> <!--Change path with your elFinder path-->
<!-- elFinder with TinyMCE -->
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<!-- elFinder JS (REQUIRED) -->
<script src="js/elfinder.min.js"></script> <!--Change path with your elFinder path-->
<!-- elFinder translation (OPTIONAL) -->
<script src="js/i18n/elfinder.ru.js"></script> <!--Change path with your elFinder path-->
</head>
<body>
<h1>TinyMCE + elFinder Integration</h1>
<!-- Modal TinyMCE-->
<textarea id="editor1"></textarea>
</body>
</html>
<script>
// Start tinymce integration
function elFinderBrowser (callback, value, meta) {
elfNode = $('<div \>');
elfNode.dialog({
modal: true,
width: '80%',
title: 'File Browser',
create: function (event, ui) {
elfinderInstance = $(this).elfinder({
resizable: false,
width: '100%',
url: 'php/connector.minimal.php', // change path with your elFinder connector path
getFileCallback: function (file,fm) {
// Make file info
info = file.name + ' (' + fm.formatSize(file.size) + ')';
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
//callback(file.url, {text: info, title: info});
callback(file.url, {title: info});
}
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
callback(file.url , {alt: info});
}
// Provide alternative source and posted for the media dialog
if (meta.filetype == 'media') {
callback(file.url);
}
elfNode.dialog('close');
elfinderInstance.disable();
}
}).elfinder('instance');
}
}).parent().css({'zIndex':'100000'});
}
// TinyMCE init
tinymce.init({
selector: "#editor1",
height : 300,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: [
'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css'
],
relative_urls: false,
remove_script_host: false,
file_picker_callback : elFinderBrowser
});
</script>