editor_keditor.html
1 <#macro initEditor fsubmit='form-editor'>
2 <#--
3 Macro @initEditor :
4 Parameters
5 - fsubmit : Default value: 'form-editor' default name for Blog forms in both update and create features
6 The fsubmit parameter to set the form id which is POST in content validation
7
8 -------------------------------
9 Add Keditor to Blog Plugin
10 -------------------------------
11 KEditor - Kademi content editor
12 copyright: Kademi (http://kademi.co)
13 author: Kademi (http://kademi.co)
14 version: 1.1.5
15 dependencies: $, $.fn.draggable, $.fn.droppable, $.fn.sortable, Bootstrap (optional), FontAwesome (optional)
16 -->
17 <!-- Replace textarea -->
18 <div id="keditor-set-content"></div>
19 <!-- Config Files -->
20 <link rel="stylesheet" type="text/css" href="${webapp_url}js/editors/keditor/css/keditor-1.1.5.min.css">
21 <link rel="stylesheet" type="text/css" href="${webapp_url}js/jquery/plugins/spectrum-1.8.0/spectrum.css" />
22 <script src="${webapp_url}js/jquery/plugins/jquery-ui-1.11.4/jquery-ui.min.js"></script>
23 <script src="${webapp_url}js/jquery/plugins/jquery.nicescroll-3.6.6/jquery.nicescroll.min.js"></script>
24 <script src="${webapp_url}js/editors/keditor/js/ckeditor/ckeditor.js"></script>
25 <script src="${webapp_url}js/editors/keditor/js/ckeditor/adapters/jquery.js"></script>
26 <script src="${webapp_url}js/editors/keditor/js/keditor-1.1.5.min.js"></script>
27 <script src="${webapp_url}js/editors/keditor/js/keditor-component-text-1.1.5.min.js"></script>
28 <script src="${webapp_url}js/editors/keditor/js/keditor-component-photo-1.1.5.min.js"></script>
29 <script src="${webapp_url}js/editors/keditor/js/keditor-component-youtube-1.1.5.min.js"></script>
30 <script src="${webapp_url}js/editors/keditor/js/keditor-component-googlemap-1.1.5.min.js"></script>
31 <script src="${webapp_url}js/editors/keditor/js/keditor-component-audio-1.1.5-correction.js"></script>
32 <script src="${webapp_url}js/editors/keditor/js/keditor-component-vimeo-1.1.5.min.js"></script>
33 <script src="${webapp_url}js/jquery/plugins/spectrum-1.8.0/spectrum.js"></script>
34 <!--
35 <script src="${webapp_url}js/editors/keditor/dist/js/keditor-components-1.1.5.min.js"></script>
36 -->
37
38
39 <!-- BS Modal for Keditor -->
40 <div class="modal fade" id="keditorModal" tabindex="-1" role="dialog" aria-labelledby="keditorModalLabel">
41 <div class="modal-dialog modal-lg" role="document">
42 <div class="modal-content">
43 <div class="modal-header">
44 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
45 <h4 class="modal-title" id="keditorModalLabel">Keditor</h4>
46 </div>
47 <div class="modal-body">
48 <iframe style="width:100%;height:80vh;border:0" frameborder="0" id="keditorModalFrame" src="" ></iframe>
49 </div>
50 <div class="modal-footer">
51 <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
52 </div>
53 </div>
54 </div>
55 </div>
56
57
58 <!-- Styles for Iframe Mode = true -->
59 <!-- Admin Keditor styles -->
60 <div data-type="keditor-style" data-href="${webapp_url}js/editors/keditor/css/keditor-1.1.5.min.css"></div>
61 <div data-type="keditor-style" data-href="${webapp_url}js/editors/keditor/css/keditor-component-1.1.5.min.css"></div>
62 <div data-type="keditor-style" data-href="${webapp_url}js/jquery/plugins/jquery-ui-1.11.4/jquery-ui.min.css"></div>
63 <style data-type="keditor-style" type="text/css">.keditor-content-area{padding: 15px 0 0 45px !important };</style>
64 <!-- Front styles for content in Keditor -->
65 <div data-type="keditor-style" data-href="${webapp_url}css/bootstrap.min.css"></div>
66 <div data-type="keditor-style" data-href="${webapp_url}css/bootstrap.theme.min.css"></div>
67 <div data-type="keditor-style" data-href="${webapp_url}css/font-awesome.min.css"></div>
68 <div data-type="keditor-style" data-href="${webapp_url}css/page_template_styles.css"></div>
69 <div data-type="keditor-style" data-href="${webapp_url}js/jquery/plugins/spectrum-1.8.0/spectrum.css"></div>
70
71 <!-- Var for Lutece in Keditor -->
72 <script type="text/javascript">
73 var _baseUrl = "${webapp_url!}";
74 /* Plugin document : Documents Spaces id for Images and Files */
75 var _imgSpaceId = '#dskey{library.img.defaultSpace.id!'6'}', _pdfSpaceId = '#dskey{library.pdf.defaultSpace.id!'8'}';
76
77 /* The form id for validate and set content in Lutece - Default: "#form-editor" */
78 var myForm = '#${fsubmit!}';
79
80 /* Keditor init config */
81 var bsTooltip = $.fn.tooltip;
82 var bsButton = $.fn.button;
83 $.widget.bridge('uibutton', $.ui.button);
84 $.widget.bridge('uitooltip', $.ui.tooltip);
85 $.fn.tooltip = bsTooltip;
86 $.fn.button = bsButton;
87
88 $( function(){
89 /* lutece step to hide textarea and set content in div for Keditor */
90 $('#html_content').hide();
91 $('#keditor-set-content').html( $('#html_content').val() );
92
93 /* Keditor init */
94 $('#keditor-set-content').keditor({
95 snippetsUrl: '${webapp_url!}js/editors/keditor/snippets/default/snippets.html',
96 iframeMode: true,
97 containerSettingEnabled: true,
98 containerSettingInitFunction: function (form, keditor) {
99 // Add control for settings form
100 form.append(
101 '<div class="form-horizontal">' +
102 ' <div class="form-group">' +
103 ' <div class="col-sm-12">' +
104 ' <label>Background color</label>' +
105 ' <input type="text" id="showPalette"/>' +
106 ' </div>' +
107 ' </div>' +
108 '</div>'
109 );
110
111 // Add event handle for background color textbox
112 form.find('#showPalette').on('change', function () {
113 // Get current setting container
114 var container = keditor.getSettingContainer();
115 // Find '.row' for setting background color
116 // Note: Make sure you have a div for setting background color
117 var row = container.find('.row');
118 // Set background color with value of textbox
119 row.css('background-color', this.value);
120 });
121 },
122 containerSettingShowFunction: function (form, container, keditor) {
123 // Find '.row' div
124 // Note: Make sure you have a div for setting background color
125 var row = container.find('.row');
126 // User "prop()" method to get properties of HTML element
127 var backgroundColor = row.prop('style').backgroundColor || '';
128 // User 'backgroundColor' for value of background color textbox
129 form.find('#showPalette').val(backgroundColor);
130
131 form.find('#showPalette').spectrum({
132 showPalette: true,
133 color: backgroundColor,
134 showButtons: false,
135 appendTo: 'parent',
136 palette: [
137 ['black', 'white'],
138 ['rgb(223, 34, 90);', 'rgb(21, 127, 236);', 'rgb(127, 173, 83);', 'rgb(160, 160, 160);']
139 ]
140 });
141 },
142 containerSettingHideFunction: function (form, keditor) {
143 // Clean value of background color textbox when hiding settings form
144 form.find('#showPalette').prop('color', '');
145 }
146 });
147
148 /* Lutece form validation set Keditor content to textarea */
149 $( myForm ).submit( function(){
150 var kcontent = $('#keditor-set-content').keditor('getContent');
151 $("#html_content").val( kcontent );
152 });
153 });
154
155 /* Modal with Lutece and Keditor - Load Iframe with url param */
156 function loadKModalUrl( url ) {
157 var ifr = document.getElementById('keditorModalFrame');
158 ifr.setAttribute('src', url);
159 ifr.onload = function () {
160 return true;
161 }
162 }
163 </script>
164 </#macro>