YaWK  24.1
Yet another WebKit
editor.php
Go to the documentation of this file.
1 <?php
2 namespace YAWK {
3  /**
4  * @brief Load editor settings, required javascript and html markup
5  * @author Daniel Retzl <[email protected]>
6  * @copyright 2019 Daniel Retzl http://www.yawk.io
7  * @license https://opensource.org/licenses/MIT
8  * @version 1.0.0/
9  * @details Load summernote editor + codemirror + settings
10  */
11  class editor
12  {
13  /**
14  * @brief load the editor and set it's settings
15  * @param object $db Database object
16  * @return array|bool
17  */
18  static function getEditor($db)
19  {
20  $editorSettings = \YAWK\settings::getEditorSettings($db, 14);
21  self::loadJavascript($editorSettings);
22  self::setEditorSettings($editorSettings);
23  return null;
24  }
25 
26  /**
27  * @brief load all required javascript and css files
28  * @param array $editorSettings the editor theme
29  */
30  static function loadJavascript($editorSettings)
31  { // returns the JS include HTML
32  echo "<!-- include codemirror) -->
33  <link rel=\"stylesheet\" type=\"text/css\" href=\"../system/engines/codemirror/codemirror.min.css\">
34  <link rel=\"stylesheet\" type=\"text/css\" href=\"../system/engines/codemirror/themes/".$editorSettings['editorTheme'].".css\">
35  <link rel=\"stylesheet\" type=\"text/css\" href=\"../system/engines/codemirror/show-hint.min.css\">
36  <script type=\"text/javascript\" src=\"../system/engines/codemirror/codemirror-compressed.js\"></script>
37 
38  <!-- SUMMERNOTE -->
39  <link href=\"../system/engines/summernote/dist/summernote.css\" rel=\"stylesheet\">
40  <script src=\"../system/engines/summernote/dist/summernote.min.js\"></script>
41  <script src=\"../system/engines/summernote/dist/summernote-cleaner.js\"></script>
42  <script src=\"../system/engines/summernote/dist/summernote-image-attributes.js\"></script>
43  <script src=\"../system/engines/summernote/dist/summernote-floats-bs.js\"></script>";
44  }
45 
46  /**
47  * @brief output a html script area with all editor options
48  * @param $editorSettings
49  */
50  static function setEditorSettings($editorSettings)
51  { // returns the editor HTML
52  echo "
53 <script type=\"text/javascript\">
54  function saveHotkey() {
55  // simply disables save event for chrome
56  $(window).keypress(function (event) {
57  if (!(event.which === 115 && (navigator.platform.match(\"Mac\") ? event.metaKey : event.ctrlKey)) && !(event.which == 19)) return true;
58  event.preventDefault();
59  formmodified=0; // do not warn user, just save.
60  return false;
61  });
62  // used to process the cmd+s and ctrl+s events
63  $(document).keydown(function (event) {
64  if (event.which === 83 && (navigator.platform.match(\"Mac\") ? event.metaKey : event.ctrlKey)) {
65  event.preventDefault();
66  $('#savebutton').click(); // SAVE FORM AFTER PRESSING STRG-S hotkey
67  formmodified=0; // do not warn user, just save.
68  // save(event);
69  return false;
70  }
71  });
72  }
73  saveHotkey();
74 $(document).ready(function() {
75  // textarea that will be transformed into editor
76  var editor = ('textarea#summernote');
77  var savebutton = ('#savebutton');
78  var savebuttonIcon = ('#savebuttonIcon');
79  // ok, lets go...
80  // we need to check if user clicked on save button
81  $( \"#savebutton\" ).click(function() {
82  $(savebutton).removeClass('btn btn-success').addClass('btn btn-warning');
83  $(savebuttonIcon).removeClass('fa fa-check').addClass('fa fa-spinner fa-spin fa-fw');
84  // to save, even if the editor is currently opened in code view
85  // we need to check if codeview is currently active:
86  if ($(editor).summernote('codeview.isActivated')) {
87  // if so, turn it off.
88  $(editor).summernote('codeview.deactivate');
89  }
90  // to display images in frontend correctly, we need to change the path of every image.
91  // to do that, the current value of textarea will be read into var text and search/replaced
92  // and written back into the textarea. utf-8 encoding/decoding happens in php, before saving into db.
93  // get the value of summernote textarea
94  var text = $(editor).val();
95  // search for <img> tags and revert src ../ to set correct path for frontend
96  var frontend = text.replace(/<img src=\\\"..\/media/g,\"<img src=\\\"media\");
97  // put the new string back into <textarea>
98  $(editor).val(frontend); // to make sure that saving works
99  });
100 
101  // BEFORE SUMMERNOTE loads: 3 important lines of code!
102  // to display images in backend correctly, we need to change the path of every image.
103  // procedure is the same as above (see #savebutton.click)
104  // get the value of summernote textarea
105  var text = $(editor).val();
106  // search for <img> tags and update src ../ to get images viewed in summernote
107  var backend = text.replace(/<img src=\\\"media/g,\"<img src=\\\"../media\");
108  // put the new string back into <textarea>
109  $(editor).val(backend); // set new value into textarea
110 
111  // INIT SUMMERNOTE EDITOR
112  $('#summernote').summernote({ // set editor itself
113  height: $editorSettings[editorHeight], // set editor height
114  minHeight: null, // set minimum height of editor
115  maxHeight: null, // set maximum height of editor
116  focus: true, // set focus to editable area after initializing summernote
117  dialogsInBody: true,
118 
119  // popover tooltips
120  popover: {
121  image: [
122  ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
123  /* ['float', ['floatLeft', 'floatRight', 'floatNone']], // those are the old regular float buttons */
124  ['floatBS', ['floatBSLeft', 'floatBSNone', 'floatBSRight']], // bootstrap class buttons (float/pull)
125  ['custom', ['imageAttributes', 'imageShape']], // forked plugin: image-attributes.js
126  ['remove', ['removeMedia']]
127  ]
128  },
129  // language for plugin image-attributes.js
130  lang: 'de-DE',
131 
132  // powerup the codeview with codemirror theme
133  codemirror: { // codemirror options
134  theme: '$editorSettings[editorTheme]', // codeview theme
135  lineNumbers: $editorSettings[editorLineNumbers], // display lineNumbers true|false
136  undoDepth: $editorSettings[editorUndoDepth], // how many undo steps should be saved? (default: 200)
137  smartIndent: $editorSettings[editorSmartIndent], // better indent
138  indentUnit: $editorSettings[editorIndentUnit], // how many spaces auto indent? (default: 2)
139  scrollbarStyle: null, // styling of the scrollbars
140  matchBrackets: $editorSettings[editorMatchBrackets], // highlight corresponding brackets
141  autoCloseBrackets: $editorSettings[editorCloseBrackets], // auto insert close brackets
142  autoCloseTags: $editorSettings[editorCloseTags], // auto insert close tags after opening
143  value: \"<html>\\n \" + document.documentElement.innerHTML + \"\\n</html>\", // all html
144  mode: \"htmlmixed\", // editor mode
145  matchTags: {bothTags: $editorSettings[editorMatchTags] }, // hightlight matching tags: both
146  extraKeys: {\"Ctrl-J\": \"toMatchingTag\", \"Ctrl-Space\": \"autocomplete\"}, // press ctrl-j to jump to next matching tab
147  styleActiveLine: $editorSettings[editorActiveLine] // highlight the active line (where the cursor is)
148  },
149 
150  // plugin: summernote-cleaner.js
151  // this allows to copy/paste from word, browsers etc.
152  cleaner: { // does the job well: no messy code anymore!
153  action: \"both\", // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
154  newline: \"<br>\" // Summernote's default is to use '<p><br></p>'
155 
156  // silent mode:
157  // from my pov it is not necessary to notify the user about the code cleaning process.
158  // it throws just a useless, annoying bubble everytime you hit the save button.
159  // BUT: if you need this notification, you can enable it by uncommenting the following 3 lines
160  // notTime:2400, // Time to display notifications.
161  // notStyle:'position:absolute;bottom:0;left:2px', // Position of notification
162  // icon:'<i class=\"note-icon\">[Your Button]</i>' // Display an icon
163  }
164  }); // end summernote
165 
166 
167 }); // end document ready
168 </script>";
169  }
170 
171 
172  /**
173  *
174  * @brief output a html script area with all editor options
175  * @param $editorSettings
176  */
177  static function setEditorSettingsForCustomHtmlWidget($editorSettings)
178  { // returns the editor HTML
179  echo "
180 <script type=\"text/javascript\">
181 
182 $(document).ready(function() {
183 
184  // textarea that will be transformed into editor
185  var editor = ('textarea#customHtmlCode');
186  // ok, lets go...
187 
188  // we need to check if user clicked on save button
189  $( \"#savebutton\" ).click(function() {
190  // to save, even if the editor is currently opened in code view
191  // we need to check if codeview is currently active:
192  if ($(editor).summernote('codeview.isActivated')) {
193  // if so, turn it off.
194  $(editor).summernote('codeview.deactivate');
195  }
196  // to display images in frontend correctly, we need to change the path of every image.
197  // to do that, the current value of textarea will be read into var text and search/replaced
198  // and written back into the textarea. utf-8 encoding/decoding happens in php, before saving into db.
199  // get the value of summernote textarea
200  var text = $(editor).val();
201  // search for <img> tags and revert src ../ to set correct path for frontend
202  var frontend = text.replace(/<img src=\\\"..\/media/g,\"<img src=\\\"media\");
203  // put the new string back into <textarea>
204  $(editor).val(frontend); // to make sure that saving works
205  });
206  // BEFORE SUMMERNOTE loads: 3 important lines of code!
207  // to display images in backend correctly, we need to change the path of every image.
208  // procedure is the same as above (see #savebutton.click)
209  // get the value of summernote textarea
210  var text = $(editor).val();
211  // search for <img> tags and update src ../ to get images viewed in summernote
212  var backend = text.replace(/<img src=\\\"media/g,\"<img src=\\\"../media\");
213  // put the new string back into <textarea>
214  $(editor).val(backend); // set new value into textarea
215 
216  $(editor).on('summernote.init', function() {
217  // toggle editor to codeview
218  $(editor).summernote('codeview.toggle');
219  });
220 
221  // INIT SUMMERNOTE EDITOR
222  $(editor).summernote({ // set editor itself
223  height: $editorSettings[editorHeight], // set editor height
224  minHeight: null, // set minimum height of editor
225  maxHeight: null, // set maximum height of editor
226  focus: true, // set focus to editable area after initializing summernote
227 
228 
229  // language for plugin image-attributes.js
230  lang: 'de-DE',
231 
232  // powerup the codeview with codemirror theme
233  codemirror: { // codemirror options
234  theme: '$editorSettings[editorTheme]', // codeview theme
235  lineNumbers: $editorSettings[editorLineNumbers], // display lineNumbers true|false
236  undoDepth: $editorSettings[editorUndoDepth], // how many undo steps should be saved? (default: 200)
237  smartIndent: $editorSettings[editorSmartIndent], // better indent
238  indentUnit: $editorSettings[editorIndentUnit], // how many spaces auto indent? (default: 2)
239  scrollbarStyle: null, // styling of the scrollbars
240  matchBrackets: $editorSettings[editorMatchBrackets], // highlight corresponding brackets
241  autoCloseBrackets: $editorSettings[editorCloseBrackets], // auto insert close brackets
242  autoCloseTags: $editorSettings[editorCloseTags], // auto insert close tags after opening
243  value: \"<html>\\n \" + document.documentElement.innerHTML + \"\\n</html>\", // all html
244  mode: \"htmlmixed\", // editor mode
245  matchTags: {bothTags: $editorSettings[editorMatchTags] }, // hightlight matching tags: both
246  extraKeys: {\"Ctrl-J\": \"toMatchingTag\", \"Ctrl-Space\": \"autocomplete\"}, // press ctrl-j to jump to next matching tab
247  styleActiveLine: $editorSettings[editorActiveLine] // highlight the active line (where the cursor is)
248  },
249 
250  // plugin: summernote-cleaner.js
251  // this allows to copy/paste from word, browsers etc.
252  cleaner: { // does the job well: no messy code anymore!
253  action: \"both\", // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
254  newline: \"<br>\" // Summernote's default is to use '<p><br></p>'
255 
256  // silent mode:
257  // from my pov it is not necessary to notify the user about the code cleaning process.
258  // it throws just a useless, annoying bubble everytime you hit the save button.
259  // BUT: if you need this notification, you can enable it by uncommenting the following 3 lines
260  // notTime:2400, // Time to display notifications.
261  // notStyle:'position:absolute;bottom:0;left:2px', // Position of notification
262  // icon:'<i class=\"note-icon\">[Your Button]</i>' // Display an icon
263  }
264  }); // end summernote
265 
266 }); // end document ready
267 </script>";
268  }
269 
270  /**
271  *
272  * @brief outputs a html script area with all editor options
273  * @param $editorSettings
274  */
275  static function setEditorSettingsForReplyBox($editorSettings)
276  { // returns the editor HTML
277  echo "
278 <script type=\"text/javascript\">
279  function saveHotkey() {
280  // simply disables save event for chrome
281  $(window).keypress(function (event) {
282  if (!(event.which === 115 && (navigator.platform.match(\"Mac\") ? event.metaKey : event.ctrlKey)) && !(event.which == 19)) return true;
283  event.preventDefault();
284  formmodified=0; // do not warn user, just save.
285  return false;
286  });
287  // used to process the cmd+s and ctrl+s events
288  $(document).keydown(function (event) {
289  if (event.which === 83 && (navigator.platform.match(\"Mac\") ? event.metaKey : event.ctrlKey)) {
290  event.preventDefault();
291  $('#savebutton').click(); // SAVE FORM AFTER PRESSING STRG-S hotkey
292  formmodified=0; // do not warn user, just save.
293  // save(event);
294  return false;
295  }
296  });
297  }
298  saveHotkey();
299 $(document).ready(function() {
300  // textarea that will be transformed into editor
301  var editor = ('textarea#replyTextArea');
302  var savebutton = ('#savebutton');
303  var savebuttonIcon = ('#savebuttonIcon');
304  // ok, lets go...
305  // we need to check if user clicked on save button
306  $( \"#savebutton\" ).click(function() {
307  $(savebutton).removeClass('btn btn-success').addClass('btn btn-warning');
308  $(savebuttonIcon).removeClass('fa fa-check').addClass('fa fa-spinner fa-spin fa-fw');
309  // to save, even if the editor is currently opened in code view
310  // we need to check if codeview is currently active:
311  if ($(editor).summernote('codeview.isActivated')) {
312  // if so, turn it off.
313  $(editor).summernote('codeview.deactivate');
314  }
315  // to display images in frontend correctly, we need to change the path of every image.
316  // to do that, the current value of textarea will be read into var text and search/replaced
317  // and written back into the textarea. utf-8 encoding/decoding happens in php, before saving into db.
318  // get the value of summernote textarea
319  var text = $(editor).val();
320  // search for <img> tags and revert src ../ to set correct path for frontend
321  var frontend = text.replace(/<img src=\\\"..\/media/g,\"<img src=\\\"media\");
322  // put the new string back into <textarea>
323  $(editor).val(frontend); // to make sure that saving works
324  });
325 
326  // BEFORE SUMMERNOTE loads: 3 important lines of code!
327  // to display images in backend correctly, we need to change the path of every image.
328  // procedure is the same as above (see #savebutton.click)
329  // get the value of summernote textarea
330  var text = $(editor).val();
331  // search for <img> tags and update src ../ to get images viewed in summernote
332  var backend = text.replace(/<img src=\\\"media/g,\"<img src=\\\"../media\");
333  // put the new string back into <textarea>
334  $(editor).val(backend); // set new value into textarea
335 
336  // INIT SUMMERNOTE EDITOR
337  $('#summernote').summernote({ // set editor itself
338  height: $editorSettings[editorHeight], // set editor height
339  minHeight: null, // set minimum height of editor
340  maxHeight: null, // set maximum height of editor
341  focus: true, // set focus to editable area after initializing summernote
342  dialogsInBody: true,
343 
344  // popover tooltips
345  popover: {
346  image: [
347  ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
348  /* ['float', ['floatLeft', 'floatRight', 'floatNone']], // those are the old regular float buttons */
349  ['floatBS', ['floatBSLeft', 'floatBSNone', 'floatBSRight']], // bootstrap class buttons (float/pull)
350  ['custom', ['imageAttributes', 'imageShape']], // forked plugin: image-attributes.js
351  ['remove', ['removeMedia']]
352  ]
353  },
354  // language for plugin image-attributes.js
355  lang: 'de-DE',
356 
357  // powerup the codeview with codemirror theme
358  codemirror: { // codemirror options
359  theme: '$editorSettings[editorTheme]', // codeview theme
360  lineNumbers: $editorSettings[editorLineNumbers], // display lineNumbers true|false
361  undoDepth: $editorSettings[editorUndoDepth], // how many undo steps should be saved? (default: 200)
362  smartIndent: $editorSettings[editorSmartIndent], // better indent
363  indentUnit: $editorSettings[editorIndentUnit], // how many spaces auto indent? (default: 2)
364  scrollbarStyle: null, // styling of the scrollbars
365  matchBrackets: $editorSettings[editorMatchBrackets], // highlight corresponding brackets
366  autoCloseBrackets: $editorSettings[editorCloseBrackets], // auto insert close brackets
367  autoCloseTags: $editorSettings[editorCloseTags], // auto insert close tags after opening
368  value: \"<html>\\n \" + document.documentElement.innerHTML + \"\\n</html>\", // all html
369  mode: \"htmlmixed\", // editor mode
370  matchTags: {bothTags: $editorSettings[editorMatchTags] }, // hightlight matching tags: both
371  extraKeys: {\"Ctrl-J\": \"toMatchingTag\", \"Ctrl-Space\": \"autocomplete\"}, // press ctrl-j to jump to next matching tab
372  styleActiveLine: $editorSettings[editorActiveLine] // highlight the active line (where the cursor is)
373  },
374 
375  // plugin: summernote-cleaner.js
376  // this allows to copy/paste from word, browsers etc.
377  cleaner: { // does the job well: no messy code anymore!
378  action: \"both\", // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
379  newline: \"<br>\" // Summernote's default is to use '<p><br></p>'
380 
381  // silent mode:
382  // from my pov it is not necessary to notify the user about the code cleaning process.
383  // it throws just a useless, annoying bubble everytime you hit the save button.
384  // BUT: if you need this notification, you can enable it by uncommenting the following 3 lines
385  // notTime:2400, // Time to display notifications.
386  // notStyle:'position:absolute;bottom:0;left:2px', // Position of notification
387  // icon:'<i class=\"note-icon\">[Your Button]</i>' // Display an icon
388  }
389  }); // end summernote
390 
391 
392 }); // end document ready
393 </script>";
394  }
395 
396  } // end class editor
397 } // end namespace
398 
YAWK\editor
Load editor settings, required javascript and html markup.
Definition: editor.php:12
YAWK\editor\getEditor
static getEditor($db)
load the editor and set it's settings
Definition: editor.php:18
YAWK\editor\setEditorSettingsForCustomHtmlWidget
static setEditorSettingsForCustomHtmlWidget($editorSettings)
output a html script area with all editor options
Definition: editor.php:177
YAWK\editor\setEditorSettings
static setEditorSettings($editorSettings)
output a html script area with all editor options
Definition: editor.php:50
YAWK\editor\loadJavascript
static loadJavascript($editorSettings)
load all required javascript and css files
Definition: editor.php:30
YAWK\editor\setEditorSettingsForReplyBox
static setEditorSettingsForReplyBox($editorSettings)
outputs a html script area with all editor options
Definition: editor.php:275
YAWK\settings\getEditorSettings
static getEditorSettings($db, $typeID=0)
Returns an associative array containing the editor settings.
Definition: settings.php:377
YAWK
This class serves methods to create backup from files.
Definition: AdminLTE.php:2
$editorSettings
if($page->alias==="index") $editorSettings
Definition: page-edit.php:156