quill.jsとlaravel 5.3の統合フォーラムサイト

-1

私は自分のサイトにquill.jsを統合する方法を探していますが、彼らの提供するサポートは存在しないか、泥だらけのものです。誰か助けてくれますか？quill.jsとlaravel 5.3の統合フォーラムサイト

以下は私のコードですが、現在すべてがインラインであり、すべてを見やすくしています。私はページ上で実行するquillを取得することができたし、私はそれを使用してエディタの値を提出しないフォームを提出するときに私はテキストを編集することができます...

エディタは、隠された入力に送信し、その内容を送信します。ただし、フォームを送信しているときに入力が入力されません。

私が間違っていることを知っている人なら、私はすべての耳であり、誰かが問題をやり直すためのより良い方法を持っているならば、私は提案に公開しています（フォームは現在GETに設定されています何が渡されているが、すでに書かれたコントローラは、POST-EDという変数を扱う。

<div class="row" style="margin-right: 0px; margin-left: 0px;"> 
<div class="col-md-6 col-md-offset-3"> 

    <!-- Title and First Post --> 
    <div class="jumbotron"> 

     <form method="get" action="/forum/create_post" id="create_post"> 
      @if (count($errors)) 
      <div style="padding: 10px;"> 
      <div class="container-fluid" style="background-color: white; padding: 10px;"> 
      <ul> 
       @foreach ($errors->all() as $error) 
        <li>{{ $error }}</li> 
       @endforeach 
      </ul> 
      </div> 
      </div> 
      @endif 
      {{ csrf_field() }} 
      <div style="padding: 10px;"> 
      <div class="container-fluid" style="background-color: white; padding: 10px;"> 
      <input name="title" type="hidden"> 
      <div id="editor-title">{{ old('title') }}</div> 
      </div> 
     </div> 
       <!--<h1><label for="Title">Title</label></h1> 
       <input class="form-control" name="title" type="text" placeholder="Your Title Here..."> 
      <h1><label for="body">Content</label></h1>--> 
      <div style="padding: 10px;"> 
      <div class="container-fluid" style="background-color: white; padding: 10px;"> 
      <input name="body" type="hidden"> 
      <div id="editor-body">{{ old('body') }}</div> 
      </div> 
     </div> 
      <button class="btn btn-primary" type="submit">Save Profile</button> 
     </form> 
    </div> 
    </div> 
</div> 

<script type="text/javascript"> 
var bodyquill = new Quill('#editor-body', { 
modules: { 
    toolbar: [ 
    ['bold', 'italic', 'underline'], 
    ['link', 'blockquote', 'code-block', 'image'], 
    [{ list: 'ordered' }, { list: 'bullet' }] 
    ] 
}, 
placeholder: 'Compose an epic post...', 
theme: 'snow' 
}); 
var titlequill = new Quill('#editor-title', { 
modules: { 
}, 
placeholder: 'Title Here...', 
theme: 'bubble' 
}); 

var form = document.querySelector('form'); 
form.onsubmit = function() { 
var title = document.querySelector('input[name=title]'); 
    title.value = JSON.stringify(titlequill.getContents()); 

var body = document.querySelector('input[name=body]'); 
    body.value = JSON.stringify(bodyquill.getContents()); 

    console.log("Submitted", $(form).serialize(), $(form).serializeArray()); 
// No back end to actually submit to! 
alert('Open the console to see the submit data!') 
return false; 
}; 
</script>

ありがとう！

出典

2016-10-22 Adam Waring