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 | removeformat 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     formats : {
  31         alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'align-left'},
  32         aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'align-center'},
  33         alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'align-right'},
  34     },
  35     file_browser_callback: function(field_name, url, type, win) {
  36         ImageManager.show(function(image) {
  37             win.document.getElementById(field_name).value = image.url;
  38             if ("createEvent" in document) {
  39                 var evt = document.createEvent("HTMLEvents");
  40                 evt.initEvent("change", false, true);
  41                 win.document.getElementById(field_name).dispatchEvent(evt);
  42             } else {
  43                 win.document.getElementById(field_name).fireEvent("onchange");
  44             }
  45         });
  46     },
  47     paste_preprocess: function(plugin, args) {
  48         var content = args.content;
  49         if(content.indexOf('<img src="file://') !== -1) {
  50             args.content = '';
  51         }
  52     },
  53     setup: function(editor) {
  54         // Paste image-uploads
  55         editor.on('paste', function(e) {
  56             if(e.clipboardData) {
  57                 var items = e.clipboardData.items;
  58                 if (items){
  59                     for (var i = 0; i < items.length; i++) {
  60                         if (items[i].type.indexOf("image") !== -1) {
  61
  62                             var file = items[i].getAsFile();
  63                             var formData = new FormData();
  64                             var ext = 'png';
  65                             var xhr = new XMLHttpRequest();
  66
  67                             if (file.name) {
  68                                 var fileNameMatches = file.name.match(/\.(.+)$/);
  69                                 if (fileNameMatches) {
  70                                     ext = fileNameMatches[1];
  71                                 }
  72                             }
  73
  74                             var id = "image-" + Math.random().toString(16).slice(2);
  75                             editor.execCommand('mceInsertContent', false, '<img src="/loading.gif" id="'+id+'">');
  76
  77                             var remoteFilename = "image-" + Date.now() + "." + ext;
  78                             formData.append('file', file, remoteFilename);
  79                             formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
  80
  81                             xhr.open('POST', '/upload/image');
  82                             xhr.onload = function() {
  83                                 if (xhr.status === 200 || xhr.status === 201) {
  84                                     var result = JSON.parse(xhr.responseText);
  85                                     //var newImage =  editor.getDoc().getElementById(id);
  86                                     //newImage.setAttribute('src', result.url);
  87                                     editor.dom.setAttrib(id, 'src', result.url);
  88                                     console.log(result);
  89                                 } else {
  90                                     console.log('An error occured uploading the image');
  91                                     console.log(xhr.responseText);
  92                                 }
  93                             };
  94                             xhr.send(formData);
  95                         }
  96                     }
  97                 }
  98
  99             }
 100         });
 101     }
 102 };