yavsc/Yavsc/Views/Blogspot/Edit.cshtml

@model BlogPost

@{
   ViewData["Title"] = SR["Blog post edition"];
}

@section header{

<link href="~/css/main/quill.snow.css" rel="stylesheet">
<link href="~/css/main/dropzone.css" rel="stylesheet">

<style>
 .box__dragndrop,
.box__uploading,
.box__success,
.box__error {
  display: none;
}
.box.has-advanced-upload {
  background-color: white;
  outline: 2px dashed black;
  outline-offset: -10px;
}
.box.has-advanced-upload .box__dragndrop {
  display: inline;
}
.box.is-dragover {
  background-color: grey;
}
.ql-snow.ql-toolbar {
    border: outset grey 2px;
}

</style>
<script src="~/js/dropzone.js"></script>
<script src="~/js/quill.js"></script>
<script src="~/js/to-markdown.js"></script>
<script>
 $(document).ready(function() {
    $(".mdcoding").addClass('hidden');

    var onchange = function(){
        var nv = $(this).val();
        var tid = $(this).data('from');
       $('#'+tid).html(htmlize(nv));
    };
    $("#Content").change(onchange);
    $("#Title").change(onchange);
    $('#vcbtn').change(function(){
        var vc = $(this).prop('checked');
        if (vc) {
            $("#contentview").addClass('hidden');
            $("#titleview").addClass('hidden');
            $(".mdcoding").removeClass('hidden');
        } else {
            $("#contentview").removeClass('hidden');
            $("#titleview").removeClass('hidden');
            $(".mdcoding").addClass('hidden');
        }
    });

    var initQuill = function() {
        var editortitre = new Quill('#titleview', {
            modules: { toolbar: '#Titletoolbar' },
            theme: 'snow'
        });
        var editorcontenu = new Quill('#contentview', {
            modules: { toolbar: '#contentbar' },
            theme: 'snow'
        });
        editortitre.on('selection-change', function(range) {
            if (range) {
                $('#contentbar').addClass('hidden');
                $('#Titletoolbar').removeClass('hidden');
            }
        });
        editortitre.on('text-change',function(delta,source){
            if (source=='user')
            {
                updateMD('Title',$('#ql-editor-1').html())
            }
        });
        editorcontenu.on('selection-change', function(range) {
            if (range) {
                $('#contentbar').removeClass('hidden');
                $('#Titletoolbar').addClass('hidden');
            }
        });
        editorcontenu.on('text-change',function(delta,source){
            if (source=='user')
            {
                updateMD('Content',$('#ql-editor-2').html())
            }
        });
    };
 initQuill();

 Dropzone.options.postfiles= {
  maxFilesize: 20, // MB   TODO: let sell it.
  autoProcessQueue: true,
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.")
    }
    else { done() }
  },
  success: function (file, response, ev) {
      console.log('response:');
      console.log(response);
      for(i=0;i<response.length;i++) {
          var file = response[i];
          console.log('response item:');
          console.log(file);

          $('<p><a href="/files/@User.GetUserName()/'+file.FileName+'">'+file.FileName+'</a></p>').appendTo('#ql-editor-2');
          updateMD('Content',$('#contentview').html())
      }
  },
  url: "/api/fs"
};

  });
</script>
    @Html.Partial("_ValidationScriptsPartial")
}
<h2 > @SR["Blog post edition"] </h2>
                <label><input type="checkbox" id="vcbtn" />Editer le code source Markdown</label>

<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>


<div id="Titletoolbar" class="hidden ql-snow ql-toolbar">
  <button class="ql-format-button ql-bold"></button>
  <button class="ql-format-button ql-italic"></button>
  <button class="ql-format-button ql-underline"></button>
  <button class="ql-format-button ql-strike"></button>
</div>


<img class="blogphoto" alt="" src="@Model.Photo" title="Photo associée au post">
<h2 title="Titre du post" class="blogtitle" id="titleview" ismarkdown>@Model.Title</h2>

<div id="contentbar" class="hidden ql-snow ql-toolbar">
<span class="ql-format-group">
  <button class="ql-format-button ql-bold"></button>
  <button class="ql-format-button ql-italic"></button>
  <button class="ql-format-button ql-underline"></button>
  <button class="ql-format-button ql-strike"></button>
  <environment names="Development">
  <button class="ql-format-button ql-link"></button>
  <button class="ql-format-button ql-image"></button>
  <button class="ql-format-button ql-video"></button>
  <button class="ql-format-button ql-file"></button>
  </environment>
 </span>
<span class="ql-format-group">
<span title="List" class="ql-format-button ql-list"></span>
<span class="ql-format-separator"></span>
<span title="Bullet" class="ql-format-button ql-bullet"></span>
<span class="ql-format-separator"></span>
<select title="Text Alignment" class="ql-align">
<option value="left" label="Left" selected=""></option>
<option value="center" label="Center"></option>
<option value="right" label="Right"></option>
<option value="justify" label="Justify"></option>
</select>
</span>
</div>

<div title="Contenu du post" id="contentview" markdown="@Model.Content"></div>

<hr>
<form asp-action="@ViewData["PostTarget"]">
    <div class="form-horizontal">

        <hr />
        <p class="text-success">@ViewData["StatusMessage"]</p>
        <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
        <input type="hidden" asp-for="Id" />
        <input type="hidden" asp-for="AuthorId" />
      

        <div class="form-group mdcoding">
            <label asp-for="Title" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="Title" class="form-control" data-from="titleview"/>
                <span asp-validation-for="Title" class="text-danger" >
                </span>
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Photo" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="Photo" class="form-control" />
                <span asp-validation-for="Photo" class="text-danger" >
                </span>
            </div>
        </div>
        <div class="form-group mdcoding">
            <label asp-for="Content" class="col-md-2 control-label" ></label>
            <div class="col-md-10">
                <textarea asp-for="Content" class="form-control" id="Content" data-from="contentview">
                </textarea>
                <span asp-validation-for="Content" class="text-danger" >
                </span>
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Visible" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                    <input asp-for="Visible" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label asp-for="ACL" class="col-md-2 control-label"></label>
            <div class="col-md-10">
               @Component.Invoke("CirclesControl",Model)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>
<div>
    
</div>
@await Component.InvokeAsync("Directory","")
<div >
    <form id="postfiles" class="dropzone" method="post" enctype="multipart/form-data">
  <div class="fallback">
    <input name="File[]" type="file" id="filesinput"/>
  </div>
    <input type="hidden" name="postId" value="@Model.Id" />
        @Html.AntiForgeryToken()
    </form>
   </div>
<div>
    <a asp-action="Index">Back to List</a>
</div>