YaWK  24.1
Yet another WebKit
Static Public Member Functions | List of all members
YAWK\editor Class Reference

Load editor settings, required javascript and html markup. More...

Static Public Member Functions

static getEditor ($db)
 load the editor and set it's settings More...
 
static loadJavascript ($editorSettings)
 load all required javascript and css files More...
 
static setEditorSettings ($editorSettings)
 output a html script area with all editor options More...
 
static setEditorSettingsForCustomHtmlWidget ($editorSettings)
 output a html script area with all editor options More...
 
static setEditorSettingsForReplyBox ($editorSettings)
 outputs a html script area with all editor options More...
 

Detailed Description

Load editor settings, required javascript and html markup.

Author
Daniel Retzl danie.nosp@m.lret.nosp@m.zl@gm.nosp@m.ail..nosp@m.com
Copyright
2019 Daniel Retzl http://www.yawk.io @license https://opensource.org/licenses/MIT
Version
1.0.0/

Load summernote editor + codemirror + settings

Definition at line 11 of file editor.php.

Member Function Documentation

◆ getEditor()

static YAWK\editor::getEditor (   $db)
static

load the editor and set it's settings

Parameters
object$dbDatabase object
Returns
array|bool

Definition at line 18 of file editor.php.

19  {
20  $editorSettings = \YAWK\settings::getEditorSettings($db, 14);
21  self::loadJavascript($editorSettings);
22  self::setEditorSettings($editorSettings);
23  return null;
24  }
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\settings\getEditorSettings
static getEditorSettings($db, $typeID=0)
Returns an associative array containing the editor settings.
Definition: settings.php:377
$editorSettings
if($page->alias==="index") $editorSettings
Definition: page-edit.php:156

References $db, $editorSettings, YAWK\settings\getEditorSettings(), YAWK\editor\loadJavascript(), and YAWK\editor\setEditorSettings().

◆ loadJavascript()

static YAWK\editor::loadJavascript (   $editorSettings)
static

load all required javascript and css files

Parameters
array$editorSettingsthe editor theme

Definition at line 30 of file editor.php.

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  }

Referenced by YAWK\editor\getEditor().

◆ setEditorSettings()

static YAWK\editor::setEditorSettings (   $editorSettings)
static

output a html script area with all editor options

Parameters
$editorSettings

Definition at line 50 of file editor.php.

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  }

Referenced by YAWK\editor\getEditor().

◆ setEditorSettingsForCustomHtmlWidget()

static YAWK\editor::setEditorSettingsForCustomHtmlWidget (   $editorSettings)
static

output a html script area with all editor options

Parameters
$editorSettings

Definition at line 177 of file editor.php.

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  }

◆ setEditorSettingsForReplyBox()

static YAWK\editor::setEditorSettingsForReplyBox (   $editorSettings)
static

outputs a html script area with all editor options

Parameters
$editorSettings

Definition at line 275 of file editor.php.

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  }
The documentation for this class was generated from the following file: