quill.js 与 laravel 5.3 论坛站点的集成答案

【问题标题】：quill.js integration with laravel 5.3 forum sitequill.js 与 laravel 5.3 论坛站点的集成
【发布时间】：2017-03-04 20:24:51
【问题描述】：

我正在寻找一种将 quill.js 集成到我的网站中的方法，但他们提供的支持不存在或一清二楚。有人可以帮我吗？

以下是我的代码，目前所有代码都是内联的，以便于查看所有内容。我已经设法让 quill 在页面上运行，我可以用它编辑文本，但是当我提交表单时，它并没有按应有的方式提交编辑器的值......

编辑器应该将它的内容传递给隐藏的输入并提交它的内容，但是当我提交表单时，输入不会被填充。

如果有人知道我做错了什么，那么我会全神贯注，如果有人有更好的方法来尝试解决问题，那么我再次接受建议（顺便说一句，表单当前设置为 GET，因此我可以轻松检查正在传递，但已经编写的控制器处理正在发布的变量。

<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>

谢谢！

【问题讨论】：

标签： javascript forms laravel laravel-5 quill

【解决方案1】：

更新后发现我写得很粗，我用来将正文文本插入正文输入的方法与受保护的单词发生冲突，重新编写代码以省略任何此类冲突

【讨论】：