BookStack Code Mirror - bookstack/blob - resources/assets/js/pages/page-form.js

   1 var mceOptions = module.exports = {
   2     selector: '#html-editor',
   3     content_css: [
   4         '/css/styles.css'
   5     ],
   6     body_class: 'page-content',
   7     relative_urls: false,
   8     statusbar: false,
   9     menubar: false,
  10     paste_data_images: false,
  11     extended_valid_elements: 'pre[*]',
  12     automatic_uploads: false,
  13     valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
  14     plugins: "image table textcolor paste link fullscreen imagetools code hr autosave lists",
  15     imagetools_toolbar: 'imageoptions',
  16     toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen",
  17     content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
  18     style_formats: [
  19         {title: "Header 1", format: "h1"},
  20         {title: "Header 2", format: "h2"},
  21         {title: "Header 3", format: "h3"},
  22         {title: "Paragraph", format: "p"},
  23         {title: "Blockquote", format: "blockquote"},
  24         {title: "Code Block", icon: "code", format: "pre"},
  25         {title: "Inline Code", icon: "code", inline: "code"}
  26     ],
  27     formats: {
  28         alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
  29         aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
  30         alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
  31     },
  32     file_browser_callback: function (field_name, url, type, win) {
  33         window.ImageManager.showExternal(function (image) {
  34             win.document.getElementById(field_name).value = image.url;
  35             if ("createEvent" in document) {
  36                 var evt = document.createEvent("HTMLEvents");
  37                 evt.initEvent("change", false, true);
  38                 win.document.getElementById(field_name).dispatchEvent(evt);
  39             } else {
  40                 win.document.getElementById(field_name).fireEvent("onchange");
  41             }
  42             var html = '<a href="' + image.url + '" target="_blank">';
  43             html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">';
  44             html += '</a>';
  45             win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
  46         });
  47     },
  48     paste_preprocess: function (plugin, args) {
  49         var content = args.content;
  50         if (content.indexOf('<img src="file://') !== -1) {
  51             args.content = '';
  52         }
  53     },
  54     extraSetups: [],
  55     setup: function (editor) {
  56
  57         for (var i = 0; i < mceOptions.extraSetups.length; i++) {
  58             mceOptions.extraSetups[i](editor);
  59         }
  60
  61         (function () {
  62             var wrap;
  63
  64             function hasTextContent(node) {
  65                 return node && !!( node.textContent || node.innerText );
  66             }
  67
  68             editor.on('dragstart', function () {
  69                 var node = editor.selection.getNode();
  70
  71                 if (node.nodeName === 'IMG') {
  72                     wrap = editor.dom.getParent(node, '.mceTemp');
  73
  74                     if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) {
  75                         wrap = node.parentNode;
  76                     }
  77                 }
  78             });
  79
  80             editor.on('drop', function (event) {
  81                 var dom = editor.dom,
  82                     rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
  83
  84                 // Don't allow anything to be dropped in a captioned image.
  85                 if (dom.getParent(rng.startContainer, '.mceTemp')) {
  86                     event.preventDefault();
  87                 } else if (wrap) {
  88                     event.preventDefault();
  89
  90                     editor.undoManager.transact(function () {
  91                         editor.selection.setRng(rng);
  92                         editor.selection.setNode(wrap);
  93                         dom.remove(wrap);
  94                     });
  95                 }
  96
  97                 wrap = null;
  98             });
  99         })();
 100
 101         // Image picker button
 102         editor.addButton('image-insert', {
 103             title: 'My title',
 104             icon: 'image',
 105             tooltip: 'Insert an image',
 106             onclick: function () {
 107                 window.ImageManager.showExternal(function (image) {
 108                     var html = '<a href="' + image.url + '" target="_blank">';
 109                     html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">';
 110                     html += '</a>';
 111                     editor.execCommand('mceInsertContent', false, html);
 112                 });
 113             }
 114         });
 115
 116         // Paste image-uploads
 117         editor.on('paste', function (e) {
 118             if (e.clipboardData) {
 119                 var items = e.clipboardData.items;
 120                 if (items) {
 121                     for (var i = 0; i < items.length; i++) {
 122                         if (items[i].type.indexOf("image") !== -1) {
 123
 124                             var file = items[i].getAsFile();
 125                             var formData = new FormData();
 126                             var ext = 'png';
 127                             var xhr = new XMLHttpRequest();
 128
 129                             if (file.name) {
 130                                 var fileNameMatches = file.name.match(/\.(.+)$/);
 131                                 if (fileNameMatches) {
 132                                     ext = fileNameMatches[1];
 133                                 }
 134                             }
 135
 136                             var id = "image-" + Math.random().toString(16).slice(2);
 137                             editor.execCommand('mceInsertContent', false, '<img src="/loading.gif" id="' + id + '">');
 138
 139                             var remoteFilename = "image-" + Date.now() + "." + ext;
 140                             formData.append('file', file, remoteFilename);
 141                             formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
 142
 143                             xhr.open('POST', '/images/gallery/upload');
 144                             xhr.onload = function () {
 145                                 if (xhr.status === 200 || xhr.status === 201) {
 146                                     var result = JSON.parse(xhr.responseText);
 147                                     editor.dom.setAttrib(id, 'src', result.url);
 148                                 } else {
 149                                     console.log('An error occured uploading the image');
 150                                     console.log(xhr.responseText);
 151                                     editor.dom.remove(id);
 152                                 }
 153                             };
 154                             xhr.send(formData);
 155                         }
 156                     }
 157                 }
 158
 159             }
 160         });
 161     }
 162 };