BookStack Code Mirror - bookstack/blob - resources/views/pages/form.blade.php

   1
   2
   3
   4 <div class="page-editor flex-fill flex">
   5
   6     {{ csrf_field() }}
   7     <div class="faded-small">
   8         <div class="container">
   9             <div class="row">
  10                 <div class="col-md-4 faded">
  11                     <div class="action-buttons text-left">
  12                         <a onclick="$('body>header').slideToggle();" class="text-button text-primary"><i class="zmdi zmdi-swap-vertical"></i>Toggle Header</a>
  13                     </div>
  14                 </div>
  15                 <div class="col-md-8 faded">
  16                     <div class="action-buttons">
  17                         <a href="{{ back()->getTargetUrl() }}" class="text-button text-primary"><i class="zmdi zmdi-close"></i>Cancel</a>
  18                         <button type="submit" class="text-button  text-pos"><i class="zmdi zmdi-floppy"></i>Save Page</button>
  19                     </div>
  20                 </div>
  21             </div>
  22         </div>
  23     </div>
  24
  25     <div class="title-input page-title clearfix">
  26         <div class="input">
  27             @include('form/text', ['name' => 'name', 'placeholder' => 'Page Title'])
  28         </div>
  29     </div>
  30     <div class="edit-area flex-fill flex">
  31         <textarea id="html" name="html" rows="5"
  32                   @if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
  33         @if($errors->has('html'))
  34             <div class="text-neg text-small">{{ $errors->first('html') }}</div>
  35         @endif
  36     </div>
  37 </div>
  38
  39
  40
  41
  42
  43 <script>
  44     $(function() {
  45         //ImageManager.show('#image-manager');
  46
  47         tinymce.init({
  48             selector: '.edit-area textarea',
  49             content_css: [
  50                 '/css/app.css',
  51                 '//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300italic,100,300'
  52             ],
  53             body_class: 'page-content',
  54             relative_urls: false,
  55             statusbar: false,
  56             menubar: false,
  57             //height: 700,
  58             extended_valid_elements: 'pre[*]',
  59             plugins: "image table textcolor paste link imagetools fullscreen code hr",
  60             toolbar: "code undo | styleselect | hr bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fullscreen",
  61             content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
  62             style_formats: [
  63                 {title: "Header 1", format: "h1"},
  64                 {title: "Header 2", format: "h2"},
  65                 {title: "Header 3", format: "h3"},
  66                 {title: "Header 4", format: "h4"},
  67                 {title: "Paragraph", format: "p"},
  68                 {title: "Blockquote", format: "blockquote"},
  69                 {title: "Code Block", icon: "code", format: "pre"}
  70             ],
  71             file_browser_callback: function(field_name, url, type, win) {
  72                 ImageManager.show(function(image) {
  73                     win.document.getElementById(field_name).value = image.url;
  74                     if ("createEvent" in document) {
  75                         var evt = document.createEvent("HTMLEvents");
  76                         evt.initEvent("change", false, true);
  77                         win.document.getElementById(field_name).dispatchEvent(evt);
  78                     } else {
  79                         win.document.getElementById(field_name).fireEvent("onchange");
  80                     }
  81                 });
  82             }
  83 //            setup: function(editor) {
  84 //                editor.addButton('full', {
  85 //                    title: 'Expand Editor',
  86 //                    icon: 'fullscreen',
  87 //                    onclick: function() {
  88 //                        var container = $(editor.getContainer()).toggleClass('fullscreen');
  89 //                        var isFull = container.hasClass('fullscreen');
  90 //                        var iframe = container.find('iframe').first();
  91 //                        var height = isFull ? $(window).height()-110 : 600;
  92 //                        iframe.css('height', height + 'px');
  93 //                    }
  94 //                });
  95 //            }
  96         });
  97
  98
  99
 100     });
 101 </script>
 102
 103 <image-manager></image-manager>