editor_keditor.html
1 <#macro initEditor fsubmit='form-keditor' >
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 - mode : Default value: 'modify'
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-wait-message" class="jumbotron">
19 <h1 class="text-center"><i class="fa fa-refresh fa-spin fa-2x"></i></h1>
20 <p>...</p>
21 </div>
22 <div id="keditor-set-content"></div>
23 <!-- Var for Lutece in Keditor -->
24 <!--
25 _baseUrl -> base url pour lien
26 _imgSpaceId -> Espace de document image par défaut - plugin document
27 _pdfSpaceId -> Espace de document fichiers par défaut - plugin document
28 _phraseaVideoId -> Identifiant player video - plugin Phraseanet
29 _phraseaAudioId -> Identifiant player audio - plugin Phraseanet
30 -->
31 <script type="text/javascript">
32 var _baseUrl = "${webapp_url!}",
33 _imgSpaceId = #dskey{library.img.defaultSpace.id},
34 _pdfSpaceId = #dskey{library.pdf.defaultSpace.id},
35 _phraseaVideoId = #dskey{phraseanet.defaultVideoPlayer.id},
36 _phraseaAudioId = #dskey{phraseanet.defaultAudioPlayer.id};
37 </script>
38
39 <!-- Config Files -->
40 <link rel="stylesheet" type="text/css" href="${webapp_url}js/editors/keditor/css/keditor-1.1.5.css">
41 <link rel="stylesheet" type="text/css" href="${webapp_url}js/jquery/plugins/spectrum-1.8.0/spectrum.css" />
42
43 <script src="${webapp_url}js/editors/keditor/plugins/jquery-ui-1.11.4/jquery-ui.min.js"></script>
44 <script src="${webapp_url}js/editors/keditor/js/ckeditor/ckeditor.js"></script>
45 <script src="${webapp_url}js/editors/keditor/js/ckeditor/adapters/jquery.js"></script>
46 <script src="${webapp_url}js/jquery/plugins/featherlight-1.7.9/featherlight.min.js"></script>
47 <script src="${webapp_url}js/jquery/plugins/fancybox/jquery.fancybox.min.js"></script>
48 <script src="${webapp_url}js/jquery/plugins/spectrum-1.8.0/spectrum.js"></script>
49
50 <script src="${webapp_url}js/editors/keditor/js/keditor-1.1.5.min.js"></script>
51 <script src="${webapp_url}js/editors/keditor/js/keditor-component-text-1.1.5-intraparis.js"></script>
52 <script src="${webapp_url}js/editors/keditor/js/keditor-component-photo-1.1.5-intraparis.js"></script>
53 <script src="${webapp_url}js/editors/keditor/js/keditor-component-photoslider-1.1.5-intraparis.js"></script>
54 <script src="${webapp_url}js/editors/keditor/js/keditor-component-phraseanet-1.1.5-intraparis.js"></script>
55 <script src="${webapp_url}js/editors/keditor/js/keditor-component-audio-1.1.5-intraparis.js"></script>
56 <script src="${webapp_url}js/editors/keditor/js/keditor-component-gallery-1.1.5-intraparis.js"></script>
57 <script src="${webapp_url}js/editors/keditor/js/keditor-component-files-1.1.5-intraparis.js"></script>
58 <script src="${webapp_url}js/editors/keditor/js/keditor-component-youtube-1.1.5-intraparis.js"></script>
59 <script src="${webapp_url}js/editors/keditor/js/keditor-component-vimeo-1.1.5-intraparis.js"></script>
60 <script src="${webapp_url}js/editors/keditor/js/keditor-component-dailymotion-1.1.5-intraparis.js"></script>
61 <!-- <script src="${webapp_url}js/editors/keditor/js/keditor-component-googlemap-1.1.5.min.js"></script> -->
62
63 <!-- BS Modal for Keditor -->
64 <div class="modal fade" id="keditorModal" tabindex="-1" role="dialog" aria-labelledby="keditorModalLabel">
65 <div class="modal-dialog modal-lg" role="document">
66 <div class="modal-content">
67 <div class="modal-header">
68 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
69 <h4 class="modal-title" id="keditorModalLabel">Keditor</h4>
70 </div>
71 <div class="modal-body">
72 <iframe style="width:100%;height:80vh;border:0" frameborder="0" id="keditorModalFrame" src="" ></iframe>
73 </div>
74 <div class="modal-footer">
75 <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
76 </div>
77 </div>
78 </div>
79 </div>
80 <style>
81 /* Sidebar toggle button skin*/
82 .btn-sidebar{z-index:99;position:fixed;width: 25px;height: 30px;background: #f0f0f0;text-align: center;line-height: 30px;border: 1px solid #ddd; border-left: 0; cursor: pointer;border-radius: 3px 0 0 3px; color: #666; margin-left: -1px;}
83 .btn-sidebar:hover,.btn-sidebar:visited,.btn-sidebar:focus,.btn-sidebar:active { color: #666;}
84 .btn-sidebar.expanded{ right: 1px; border-left: initial; border-right: 0; }
85 </style>
86 <!-- Styles for Iframe Mode = true -->
87 <!-- Admin Keditor styles -->
88 <div data-type="keditor-style" data-href="${webapp_url}js/editors/keditor/css/keditor-1.1.5.css"></div>
89 <div data-type="keditor-style" data-href="${webapp_url}js/editors/keditor/css/keditor-components-1.1.5.css"></div>
90 <div data-type="keditor-style" data-href="${webapp_url}js/editors/keditor/plugins/jquery-ui-1.11.4/jquery-ui.min.css"></div>
91 <style data-type="keditor-style" type="text/css">
92 @font-face {font-family: "Ubuntu";src: url("${webapp_url}fonts/ubuntu-webfont.eot?") format("eot"), url("${webapp_url}fonts/ubuntu-webfont.woff2") format("woff2"), url("${webapp_url}fonts/ubuntu-webfont.woff") format("woff"), url("${webapp_url}fonts/ubuntu-webfont.ttf") format("truetype"), url("${webapp_url}fonts/ubuntu-webfont.svg#Ubuntu") format("svg")}
93 @font-face {font-family: "UbuntuLight";src: url("${webapp_url}fonts/Ubuntu-Light.eot?") format("eot"), url("${webapp_url}fonts/Ubuntu-Light.woff2") format("woff2"), url("${webapp_url}fonts/Ubuntu-Light.woff") format("woff"), url("${webapp_url}fonts/Ubuntu-Light.ttf") format("truetype"), url("${webapp_url}fonts/Ubuntu-Light.svg#UbuntuLight") format("svg")}
94 @font-face {font-family: "UbuntuRegular";src: url("${webapp_url}fonts/Ubuntu-Regular.eot?") format("eot"), url("${webapp_url}fonts/Ubuntu-Regular.woff2") format("woff2"), url("${webapp_url}fonts/Ubuntu-Regular.woff") format("woff"), url("${webapp_url}fonts/Ubuntu-Regular.ttf") format("truetype"), url("${webapp_url}fonts/Ubuntu-Regular.svg#UbuntuRegular") format("svg")}
95 @font-face {font-family: "Montserrat";src: url("${webapp_url}fonts/Montserrat-Regular-webfont.eot?") format("eot"), url("${webapp_url}fonts/Montserrat-Regular-webfont.woff2") format("woff2"), url("${webapp_url}fonts/Montserrat-Regular-webfont.woff") format("woff"), url("${webapp_url}fonts/Montserrat-Regular-webfont.ttf") format("truetype"), url("${webapp_url}fonts/Montserrat-Regular-webfont.svg#Montserrat") format("svg")}
96 @font-face {font-family: "MontserratLight";src: url("${webapp_url}fonts/Montserrat-Light-webfont.eot?") format("eot"), url("${webapp_url}fonts/Montserrat-Light-webfont.woff2") format("woff2"), url("${webapp_url}fonts/Montserrat-Light-webfont.woff") format("woff"), url("${webapp_url}fonts/Montserrat-Light-webfont.ttf") format("truetype"), url("${webapp_url}fonts/Montserrat-Light-webfont.svg#MontserratLight") format("svg")}
97 @font-face {font-family: "Nucleo Outline";src: url("${webapp_url}fonts/nucleo-outline.eot?") format("eot"), url("${webapp_url}fonts/nucleo-outline.woff2") format("woff2"), url("${webapp_url}fonts/nucleo-outline.woff") format("woff"), url("${webapp_url}fonts/nucleo-outline.ttf") format("truetype"), url("${webapp_url}fonts/nucleo-outline.svg#Nucleo_Outline") format("svg")}
98 .keditor-content-area{padding: 15px 0 0 45px !important };
99 #tags{ margin: 2px }
100 .btn-removetag{ border: 1px solid #3C8DBC; border-radius: 5px }
101 .btn-removetag a, .btn-removetag a i{ color: #3C8DBC; text-decoration: none }
102 .btn-removetag:hover{ border-color:#b50000; color:#b50000; }
103 #keditorModal .modal-lg{ width: 1170px;}
104 /* Blip button */
105 .btn-blip { border: none; border-radius: 3px; color: #fff; padding: 1rem 1.6rem; font-size: 22px; font-weight: 600; letter-spacing: .03em; position: relative; -webkit-animation: button-bounce 2200ms forwards 3 cubic-bezier(0.165, 0.84, 0.44, 1); -moz-animation: button-bounce 2200ms forwards 3 cubic-bezier(0.165, 0.84, 0.44, 1); animation: button-bounce 2200ms forwards 3 cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; transition: background-color 0.3s ease; /*&:before */ /*&:hover:before,*/}
106 .btn-blip:focus { outline: none;}
107 .btn-blip:hover { background-color: #608ca5;}
108 .btn-blip:after { background-color: #3C8DBC; content: ""; position: absolute; left: 0px; top: 0px; height: 100%; border-radius: 5px; -webkit-animation: button-blip 2200ms forwards 3 cubic-bezier(0.215, 0.61, 0.355, 1); -moz-animation: button-blip 2200ms forwards 3 cubic-bezier(0.215, 0.61, 0.355, 1); animation: button-blip 2200ms forwards 3 cubic-bezier(0.215, 0.61, 0.355, 1);}
109 .btn-blip :hover:after { border-color: transparent;}
110 #files-list .list-group-item:hover{ cursor: move;}
111 @-webkit-keyframes button-bounce { 0% { transform: scale(1); } 10% { transform: scale(0.96); } 20% { transform: scale(1.04); } 52%, 100% { transform: scale(1); }}
112 @-moz-keyframes button-bounce {0% { transform: scale(1); } 10% { transform: scale(0.96);}20% { transform: scale(1.04); } 52%, 100% { transform: scale(1); }}
113 @keyframes button-bounce { 0% { transform: scale(1); } 10% { transform: scale(0.96); } 20% { transform: scale(1.04); } 52%, 100% { transform: scale(1); }}
114 @-webkit-keyframes button-blip { 0% { transform: scaleX(1) scaleY(1); opacity: 0;} 10% { transform: scaleX(1) scaleY(1);opacity: .7;}30%, 99% { transform: scaleX(1.08) scaleY(1.35); opacity: 0; }100% { transform: scaleX(1) scaleY(1); opacity: 0; }}
115 @-moz-keyframes button-blip { 0% { transform: scaleX(1) scaleY(1); opacity: 0;}10% { transform: scaleX(1) scaleY(1); opacity: .7; }30%, 99% { transform: scaleX(1.08) scaleY(1.35); opacity: 0; } 100% { transform: scaleX(1) scaleY(1); opacity: 0; }}
116 @keyframes button-blip { 0% { transform: scaleX(1) scaleY(1); opacity: 0; } 10% { transform: scaleX(1) scaleY(1); opacity: .7; } 30%, 99% { transform: scaleX(1.08) scaleY(1.35); opacity: 0;} 100% { transform: scaleX(1) scaleY(1); opacity: 0; }}
117 </style>
118 <!-- Front styles for content in Keditor -->
119 <div data-type="keditor-style" data-href="${webapp_url}css/bootstrap.min.css"></div>
120 <div data-type="keditor-style" data-href="${webapp_url}css/font-awesome.min.css"></div>
121 <div data-type="keditor-style" data-href="${webapp_url}css/page_template_styles.css"></div>
122
123 <div data-type="keditor-style" data-href="${webapp_url}js/jquery/plugins/featherlight-1.7.9/featherlight.min.css"></div>
124 <div data-type="keditor-style" data-href="${webapp_url}js/jquery/plugins/featherlight-1.7.9/featherlight.gallery.min.css"></div>
125
126 <div data-type="keditor-style" data-href="${webapp_url}js/jquery/plugins/fancybox/jquery.fancybox.min.css"></div>
127 <div data-type="keditor-style" data-href="${webapp_url}js/jquery/plugins/spectrum-1.8.0/spectrum.css"></div>
128
129 <!-- Var for Lutece in Keditor -->
130 <script type="text/javascript">
131 /* The form id for validate and set content in Lutece - Default: "#form-editor" */
132 var myForm = '#${fsubmit!}', myContentArea=null;
133
134 /* Keditor init config */
135 var bsTooltip = $.fn.tooltip;
136 var bsButton = $.fn.button;
137
138 $.widget.bridge('uibutton', $.ui.button);
139 $.widget.bridge('uitooltip', $.ui.tooltip);
140 $.fn.tooltip = bsTooltip;
141 $.fn.button = bsButton;
142
143 $( function(){
144 /* Recupère barre outil CKeditor */
145 var keditoToolbar = $('#top-keditor-toolbar');
146
147 /* Masque barre outil CKeditor */
148 keditoToolbar.hide();
149
150 /* Step to hide textarea and set content in div for Keditor */
151 $('#html_content').hide();
152 $('#keditor-set-content').html( $('#html_content').val() );
153
154 /* Keditor init */
155 $('#keditor-set-content').keditor(
156 {
157 debug : false,
158 snippetsUrl: '${webapp_url!}js/editors/keditor/snippets/intraparis/snippets.html',
159 iframeMode: true,
160 tabContainersText: 'Gabarits',
161 tabContainersTitle: 'Gabarits',
162 tabComponentsText: 'Composants',
163 tabComponentsTitle: 'Composants',
164 nestedContainerEnabled: false,
165 contentStyles: ['${webapp_url!}css/page_template_styles.css'],
166 onInitFrame: function (frame, frameHead, frameBody) {
167 // Ajoute base url dans le head de l'iframe
168 frameHead.append('<base href="${webapp_url}">');
169 // Ajoute class "article-blog" pour bénéficier style css du template front "blog"
170 frameBody.addClass('article-blog');
171 // Ajoute id "keditor-article"
172 frameBody.attr('id','keditor-article');
173
174 // Ajoute bouton pour toggle sidebar
175 // Récupre la position
176 var p = $('.keditor-frame').position();
177 var pt = p.top + 15;
178 // Ajoute le bouton
179 $('.keditor-frame').after( '<a id="btn-sidebar" href="#" class="btn-sidebar"><i class="fa fa-chevron-right"></i></a>' );
180 // Récupère les objets bouton et icone du bouton
181 var bsidebar = $("#form-keditor").find("#btn-sidebar"), iconsidebar=$("#form-keditor").find("#btn-sidebar i");
182 // Sur le click toggle sidebar
183 bsidebar.click( function(e){
184 e.preventDefault();
185 $("aside").toggle();
186 $("article").toggleClass("col-sm-10").toggleClass("col-sm-12");
187 iconsidebar.toggleClass("fa-chevron-right").toggleClass("fa-chevron-left");
188 bsidebar.toggleClass( 'expanded');
189 })
190 },
191
192 onComponentSelected: function (event, selectedComponent, contentArea) {
193 // Si de contenu est texte affiche la barre d'outil CKeditor sinon elle la masque
194 var dataType = selectedComponent.attr('data-type');
195 if( dataType == 'component-text' ){
196 keditoToolbar.show();
197 } else {
198 keditoToolbar.hide();
199 }
200 },
201
202 containerSettingEnabled: true,
203 containerSettingInitFunction: function (form, keditor) {
204 // Add control for settings form
205 form.append(
206 '<div class="form-horizontal">' +
207 ' <div class="form-group">' +
208 ' <div class="col-sm-12">' +
209 ' <label>Couleur de fond:</label>' +
210 ' <input type="text" id="showPalette"/>' +
211 ' </div>' +
212 ' </div>' +
213 '</div>'
214 );
215
216 // Add event handle for background color textbox
217 form.find('#showPalette').on('change', function () {
218 // Get current setting container
219 var container = keditor.getSettingContainer();
220 // Find '.row' for setting background color
221 // Note: Make sure you have a div for setting background color
222 var row = container.find('.row');
223 // Set background color with value of textbox
224 row.css('background-color', this.value);
225 });
226 },
227 containerSettingShowFunction: function (form, container, keditor) {
228 //Change title
229 form.parents('#keditor-setting-panel').find('#keditor-setting-title').html('Gabarit');
230 // Find '.row' div
231 // Note: Make sure you have a div for setting background color
232 var row = container.find('.row');
233 // User "prop()" method to get properties of HTML element
234 var backgroundColor = row.prop('style').backgroundColor || 'white';
235 // User 'backgroundColor' for value of background color textbox
236 form.find('#showPalette').spectrum({
237 showPalette: true,
238 showPaletteOnly: true,
239 color: backgroundColor,
240 showButtons: false,
241 appendTo: 'parent',
242 palette: [
243 ['black', 'white', 'rgb(223, 34, 90);', 'rgb(21, 127, 236);'],
244 ['rgb(127, 173, 83);', 'rgb(160, 160, 160);', 'rgb(96, 99, 204);', 'rgb(58, 67, 100);'],
245 ['rgb(131, 143, 169);', 'rgb(139, 145, 167);', 'rgb(90, 105, 162);', 'rgb(29, 184, 189);'],
246 ['rgb(250, 82, 108);', 'rgb(93, 109, 135);', 'rgb(70, 80, 115);', 'rgb(25, 206, 15);'],
247 ['rgb(44, 168, 254);', 'rgb(255, 178, 54);', 'rgb(254, 54, 54);']
248 ]
249 });
250 },
251 containerSettingHideFunction: function (form, keditor) {
252 // Clean value of background color textbox when hiding settings form
253 form.find('#showPalette').prop('color', '');
254 },
255
256 onReady: function () {
257 $("#keditor-wait-message").hide();
258 }
259 });
260
261 /* Form validation set Keditor content to textarea */
262 $( myForm ).submit( function(){
263 // Get Content
264 var kcontent = $('#keditor-set-content').keditor('getContent');
265 // Add sanitizing img url if url is not conform
266 var rgx = /,DanaInfo=intraparis.*\.mdp,SSL\+/gi;
267 var sanitKcontent = kcontent.replace( rgx, '' );
268 console.log( sanitKcontent );
269 $("#html_content").val( sanitKcontent );
270 localStorage.clear();
271 });
272
273 $('#keditorModal').on('hidden.bs.modal', function (e) {
274 $('#keditorModalFrame').attr('src','');
275 })
276
277 $('#keditorModal').on('show.bs.modal', function (e) {
278 $('#keditorModal .modal-body').prepend('<p class="spinner text-center"><i class="fa fa-spinner fa-5x" aria-hidden="true"></i></p>');
279 })
280
281 $('#keditorModal').on('shown.bs.modal', function (e) {
282 $('#keditorModal .modal-body .spinner').remove();
283 })
284
285 });
286 </script>
287 </#macro>