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

   1
   2 module.exports = {
   3     selector: '#html-editor',
   4     content_css: [
   5         '/css/styles.css',
   6         '//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300italic,100,300'
   7     ],
   8     body_class: 'page-content',
   9     relative_urls: false,
  10     statusbar: false,
  11     menubar: false,
  12     paste_data_images: false,
  13     //height: 700,
  14     extended_valid_elements: 'pre[*]',
  15     automatic_uploads: false,
  16     valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
  17     plugins: "image table textcolor paste link imagetools fullscreen code hr",
  18     toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link hr | code fullscreen",
  19     content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
  20     style_formats: [
  21         {title: "Header 1", format: "h1"},
  22         {title: "Header 2", format: "h2"},
  23         {title: "Header 3", format: "h3"},
  24         {title: "Header 4", format: "h4"},
  25         {title: "Paragraph", format: "p"},
  26         {title: "Blockquote", format: "blockquote"},
  27         {title: "Code Block", icon: "code", format: "pre"},
  28         {title: "Inline Code", icon: "code", inline: "code"}
  29     ],
  30     file_browser_callback: function(field_name, url, type, win) {
  31         ImageManager.show(function(image) {
  32             win.document.getElementById(field_name).value = image.url;
  33             if ("createEvent" in document) {
  34                 var evt = document.createEvent("HTMLEvents");
  35                 evt.initEvent("change", false, true);
  36                 win.document.getElementById(field_name).dispatchEvent(evt);
  37             } else {
  38                 win.document.getElementById(field_name).fireEvent("onchange");
  39             }
  40         });
  41     },
  42     paste_preprocess: function(plugin, args) {
  43         var content = args.content;
  44         if(content.indexOf('<img src="file://') !== -1) {
  45             args.content = '';
  46         }
  47     },
  48     setup: function(editor) {
  49         // Paste image-uploads
  50         editor.on('paste', function(e) {
  51             if(e.clipboardData) {
  52                 var items = e.clipboardData.items;
  53                 if (items){
  54                     for (var i = 0; i < items.length; i++) {
  55                         if (items[i].type.indexOf("image") !== -1) {
  56
  57                             var file = items[i].getAsFile();
  58                             var formData = new FormData();
  59                             var ext = 'png';
  60                             var xhr = new XMLHttpRequest();
  61
  62                             if (file.name) {
  63                                 var fileNameMatches = file.name.match(/\.(.+)$/);
  64                                 if (fileNameMatches) {
  65                                     ext = fileNameMatches[1];
  66                                 }
  67                             }
  68
  69                             var id = "image-" + Math.random().toString(16).slice(2);
  70                             editor.execCommand('mceInsertContent', false, '<img src="/loading.gif" id="'+id+'">');
  71
  72                             var remoteFilename = "image-" + Date.now() + "." + ext;
  73                             formData.append('file', file, remoteFilename);
  74                             formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
  75
  76                             xhr.open('POST', '/upload/image');
  77                             xhr.onload = function() {
  78                                 if (xhr.status === 200 || xhr.status === 201) {
  79                                     var result = JSON.parse(xhr.responseText);
  80                                     //var newImage =  editor.getDoc().getElementById(id);
  81                                     //newImage.setAttribute('src', result.url);
  82                                     editor.dom.setAttrib(id, 'src', result.url);
  83                                     console.log(result);
  84                                 } else {
  85                                     console.log('An error occured uploading the image');
  86                                     console.log(xhr.responseText);
  87                                 }
  88                             };
  89                             xhr.send(formData);
  90                         }
  91                     }
  92                 }
  93
  94             }
  95         });
  96     }
  97 };