summernote编辑器未打开（laravel 5.2）

Question

我在laravel 5.2中使用summernote js。

在一种形式中，当用户单击“编辑”按钮时，summernote编辑器应为这些字段打开。实际上，它只适用于单个字段，但是当我将其应用于多个字段时，则不起作用。

我的看法：

 <form action="{{route('account')}}" id="acc" class="ac" method="post">
  <div class="col-lg-3"><label>Estado</label>
  @foreach($accounts as $account)
  @if($user== $account->user)
  {!! $account->estado !!}



  <textarea  style="display:none;" name="textfield4" id="textfield4"></textarea>


  <div class="col-lg-2 estado " id="estado"></div>
  @endif
  @endforeach



</div>
  <div class="col-lg-4"></div>
</div>
<div class="row">
  <section class="col-lg-3 "><label for="textfield5">I'm Good At:</label>
  @foreach($accounts as $account)
  @if($user== $account->user)
  {!! $account->goodat !!}





   <textarea  style="display:none;" name="textfield5" id="textfield5"></textarea>
  <div class="col-lg-2 col-md-2 es" id="goodat"></div>

  @endif
  @endforeach

<br /><div><button type="button" class="btn btn-info edit">Edit</button>
    <button type="submit" class="btn btn-success" id="btn-send-message" >Save</button>
    <input type="hidden" value="{{Session::token()}}" name="_token">
    </div>


  </form>

我的脚本：

  <script>
$(document).ready(function() { 
var $estado = $('#estado'); 
var $goodat = $('#goodat'); 

var edit = function() { 
$estado.summernote({focus: true}); 
$goodat.summernote({focus: true}); 
}; 

$('.edit').on('click', edit); 

$("#acc").on('submit', function(e) { 
e.preventDefault(); 
var self = this; 

// lets check some stuff 
console.log($estado); 
console.log($estado.summernote('code')); 
console.log($('#textfield4')); 
console.log($('#textfield4').val()); 
console.log($('#textfield4').text()); 

var estado = $estado.summernote('code'); 
$("#textfield4").val(estado); //populate text area 

var goodat = $goodat.summernote('code'); 
$("#textfield5").val(goodat); //populate text area 

self.submit(); 
return false; 
});
});


</script>

编辑1：

我发现，单击“保存”按钮（这会导致db中的值为空）（每次用户登录）后，“编辑”按钮将开始正常工作。

编辑2：

将所有链接和脚本放在head标签中后， 错误： $未定义。

     <head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="_token" content="{{ csrf_token() }}">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/crush.css')}}">
    <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/groups.css')}}">
    <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/Untitled-2.css')}}">
        <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/font-awesome.css')}}">

        <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/style.css')}}">





<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script   src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" ></script>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
   <script src="/src/js/myplace.js"></script>
   <script src="{{URL::asset('src/js/script.js')}}"></script>

</head>

Answer 1

我认为您可能在这里遇到一些异步问题，因为它有时可以工作，有时不能工作。 您正在基于summernote字段的值设置文本区域的值。 但是，您不能确定$estado.summernote('code')已经完成，然后再使用summernote字段的值来设置textfield4的值（对于$goodat.summernote('code')和textfield5 。

当将回调用于summernote事件时，可以防止此行为并具有更多控制权。

$('#estado').summernote({
  callbacks: {
    onChange: function(contents, $editable) {
      console.log('onChange:', contents, $editable);
      $("#textfield4").val(contents); //populate text area
    }
  } 
});

在这里阅读更多

可能引起麻烦的另一件事是foreach循环，其中包含具有硬编码ID的元素。 由于ID必须是唯一的，因此可能会产生一些意外的结果。 当然，当$user匹配$account->user一次时，一切都很好，但是我通常不冒险。

更新：在此处添加了可能实现的jsfiddle。

Answer 2

您想使用summernote进行多个文本区域吗？

采取：（;

 $(function() { var $estado = $('#estado'); var $goodat = $('#goodat'); var isEditorsActive = false; function activateEditors() { $estado.summernote({ focus: true }); $goodat.summernote({ focus: true }); isEditorsActive = true; } function deactivateEditors() { $estado.summernote('destroy'); $goodat.summernote('destroy'); isEditorsActive = false; } $('button.edit').click(function(e){ e.preventDefault(); (isEditorsActive)? deactivateEditors() : activateEditors(); }); $("form#ac").submit(function(e) { e.preventDefault(); var $this = $(this); if(isEditorsActive) { var estado = $estado.summernote('code'); var goodat = $goodat.summernote('code'); $('#data-estado').html(estado); $('#data-goodat').html(goodat); } return false; }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <!-- include summernote css/js--> <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script> <form action="{{route('account')}}" id="ac" class="ac" method="post"> <div class="row"> <div class="col-lg-3"> <label>Estado</label> @foreach($accounts as $account) @if($user== $account->user) <div class="estado" id="estado" style="width:100%"> {!! $account->estado !!} </div> @endif @endforeach </div> <div class="col-lg-3"></div> <div class="col-lg-3"> <label>I'm Good At:</label> @foreach($accounts as $account) @if($user==$account->user) <div class="goodat" id="goodat" style="width:100%"> {!! $account->goodat !!} </div> @endif @endforeach </div> </div> <button type="submit" class="btn btn-success save">Save</button> <button class="btn btn-default edit">Edit</button> </form> ESTADO: <div id="data-estado"> </div> GOOD AT: <div id="data-goodat"> </div>

但是之后，您仍然无法获得这些文本区域内的数据-因此刀片模板确实出了点问题

http://num8er.me/summernote.html

summernote编辑器未打开（laravel 5.2）

问题描述

2 个解决方案

解决方案1
1 2016-09-18 19:35:58

解决方案2
1 2016-09-22 15:02:55

summernote编辑器未打开（laravel 5.2）

问题描述

2 个解决方案

解决方案1 1 2016-09-18 19:35:58

解决方案2 1 2016-09-22 15:02:55

解决方案1
1 2016-09-18 19:35:58

解决方案2
1 2016-09-22 15:02:55