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