edit/page.js

   1 CKEDITOR.plugins.add('inlinesave', {
   2         init: function(editor) {
   3                 editor.addCommand( 'inlinesave', {
   4                         exec: function (editor) {
   5                                 var pagename = window.location.pathname.replace(/\/$/, '/index');
   6                                 var body = editor.getData();
   7                                 // empty line is equivalent to a paragraph break
   8                                 body = body.replace(/<br \/>\s*<br \/>/g, '<p>');
   9                                 // wrap long line after each sentence
  10                                 body = body.replace(/^(\t*).{73,}/mg, function (line, indent) {
  11                                         var dots = '(?:.{24,72}|.{73,}?)'; // chars before punctuation
  12                                         var wrap = new RegExp('('+dots+'[.:!?]) (?=[A-Z(<])', 'g'); // separate lines
  13                                         return line.replace(wrap, '$1\n'+indent+'\t');
  14                                 });
  15                                 // treat standalone placeholders as block elements
  16                                 body = body.replace(/<p>(\[\[.*\]\])<\/p>/g, '$1');
  17
  18                                 var data = 'body='+encodeURIComponent(body);
  19                                 var ajaxpost = new XMLHttpRequest();
  20                                 ajaxpost.open('POST', '/edit/page'+pagename, true);
  21                                 ajaxpost.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  22                                 ajaxpost.onreadystatechange = function () {
  23                                         if (ajaxpost.readyState != 4)
  24                                                 return; // not done yet
  25                                         if (ajaxpost.status == 200) {
  26                                                 editor.resetDirty();
  27                                                 new CKEDITOR.plugins.notification(editor, {
  28                                                         message: 'Pagina is succesvol opgeslagen',
  29                                                         type: 'success',
  30                                                 }).show();
  31                                         }
  32                                         else {
  33                                                 new CKEDITOR.plugins.notification(editor, {
  34                                                         message: 'Foutcode '+ajaxpost.status+' bij opslaan: '+ajaxpost.responseText,
  35                                                         type: 'warning',
  36                                                 }).show();
  37                                         }
  38                                 };
  39                                 ajaxpost.send(data);
  40                         },
  41                 });
  42                 editor.ui.addButton( 'Inlinesave', {
  43                         command: 'inlinesave',
  44                         label: editor.lang.save.toolbar,
  45                         icon: 'save',
  46                 });
  47         }
  48 });
  49
  50 CKEDITOR.on('dialogDefinition', function (event) {
  51         switch (event.data.name) {
  52         case 'table':
  53                 // override initial attribute values
  54                 var infoTab = event.data.definition.getContents('info');
  55                 infoTab.get('txtWidth').default = '';
  56                 infoTab.get('txtBorder').default = '0';
  57                 infoTab.get('txtCellSpace').default = '';
  58                 infoTab.get('txtCellPad').default = '';
  59                 break;
  60         case 'link':
  61                 // hide unneeded widgets from the Link Info tab
  62                 event.data.definition.getContents('info').get('linkType').hidden = true;
  63                 let linktarget = event.data.definition.getContents('target').get('linkTargetType');
  64                 linktarget.items = [ linktarget.items[0], linktarget.items[3] ]; // only _blank
  65                 break;
  66         }
  67 });
  68
  69 CKEDITOR.on('instanceCreated', function (event) {
  70         var editor = event.editor;
  71         var pastefilter = 'h2 h3 p ul ol li blockquote em i strong b; a[!href]; img[alt,!src]';
  72
  73         editor.on('paste', function (e) {
  74                 var html = e.data.dataValue;
  75                 if (!/<[^>]* style="/.test(html) && !/<font/.test(html)) return;
  76
  77                 // force pasteFilter on contents containing styling attributes
  78                 var filter = new CKEDITOR.filter(pastefilter),
  79                         fragment = CKEDITOR.htmlParser.fragment.fromHtml(html),
  80                         writer = new CKEDITOR.htmlParser.basicWriter();
  81                 filter.applyTo(fragment);
  82                 fragment.writeHtml(writer);
  83                 e.data.dataValue = writer.getHtml();
  84         });
  85
  86         editor.on('configLoaded', function () {
  87                 var config = editor.config;
  88                 config.language = 'nl';
  89                 config.extraPlugins = 'inlinesave,placeholder,image2,uploadimage';
  90                 config.format_tags = 'h2;h3;h4;p';
  91                 config.allowedContent = true;
  92                 config.entities = false; // keep unicode
  93                 config.filebrowserImageUploadUrl = '/edit/page?output=ckescript';
  94                 config.uploadUrl = '/edit/page?output=ckjson';
  95                 config.image2_alignClasses = ['left', 'center', 'right'];
  96                 config.image2_disableResizer = true;
  97                 config.stylesSet = [
  98                         { name: 'Kolom', element: 'div', attributes: { 'class': 'col' } },
  99                         { name: 'Rechts', element: 'div', attributes: { 'class': 'right' } },
 100                 ];
 101                 config.pasteFilter = pastefilter;
 102                 config.contentsCss = document.styleSheets[0].href;
 103                 config.toolbar = [
 104                         ['Inlinesave', '-', 'Undo', 'Redo'],
 105                         ['Format'],
 106                         ['Bold', 'Italic', 'Link'],
 107                         ['BulletedList', 'NumberedList', 'Blockquote'],
 108                         ['Table', 'CreateDiv'],
 109                         ['Image', 'HorizontalRule', 'CreatePlaceholder'],
 110 //                      ['Sourcedialog'],
 111                         ['closebtn'],
 112                 ];
 113                 config.toolbarCanCollapse = true;
 114                 config.floatSpacePreferRight = true;
 115                 config.floatSpaceDockedOffsetY = 0;
 116                 config.startupFocus = true;
 117
 118                 config.disableObjectResizing = true;
 119                 document.execCommand('enableObjectResizing', false, false); // workaround in inline mode; ff bug?
 120         });
 121
 122         window.onbeforeunload = function () {
 123                 if (editor.checkDirty()) {
 124                         return 'Pagina verlaten zonder wijzigingen op te slaan?'; // message ignored in modern browsers
 125                 }
 126         };
 127 });
 128
 129         CKEDITOR.disableAutoInline = true;
 130
 131 // add edit link to menu
 132 var pagebody = document.getElementsByClassName('static')[0];
 133 if (pagebody) {
 134         var editlink = document.querySelector('a[href="#edit"]');
 135         if (editlink)
 136         editlink.onclick = function (e) {
 137                 editlink.style.fontWeight = 'bold';
 138                 editlink.href = '';
 139                 editlink.onclick = undefined;
 140                 pagebody.setAttribute('contenteditable', true);
 141                 pagebody.innerHTML = pagebody.innerHTML
 142                         .replace(/<!--BLOCK:(.*?)-->[^]*?<!--\/-->/g, '$1');
 143                 CKEDITOR.inline(pagebody, { customConfig: '' });
 144                 document.body.className = 'edit';
 145                 return false;
 146         };
 147         if (window.location.hash == '#edit') {
 148                 editlink.onclick();
 149         }
 150 }
 151