summernote编辑器未打开（laravel 5.2）

Question

I am using summernote js in laravel 5.2. 我在laravel 5.2中使用summernote js。

In a form,when user clicks on edit button, summernote editor should open for the fields.Actually it was working for a single field but when i applied it for more than one field,its not working. 在一种形式中，当用户单击“编辑”按钮时，summernote编辑器应为这些字段打开。实际上，它只适用于单个字段，但是当我将其应用于多个字段时，则不起作用。

my view: 我的看法：

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

my script: 我的脚本：

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

EDIT 1: 编辑1：

I've found out that, after clicking on save button ( which results in null values in db)(everytime a user logins) , edit button starts working perfectly. 我发现，单击“保存”按钮（这会导致db中的值为空）（每次用户登录）后，“编辑”按钮将开始正常工作。

EDIT 2: 编辑2：

after placing all links and scripts in head tag , error: $ is not defined . 将所有链接和脚本放在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

I think you could have some asynchronous issues here, since it works sometimes, and sometimes not. 我认为您可能在这里遇到一些异步问题，因为它有时可以工作，有时不能工作。 You are setting the value of the textareas based on the values of the summernote fields. 您正在基于summernote字段的值设置文本区域的值。 You can't be sure though, that $estado.summernote('code') is already finished before using the value of the summernote field to set the value of textfield4 (same holds for $goodat.summernote('code') and textfield5 . 但是，您不能确定$estado.summernote('code')已经完成，然后再使用summernote字段的值来设置textfield4的值（对于$goodat.summernote('code')和textfield5 。

When you use callbacks for the summernote events, you can prevent this behaviour and have more control. 当将回调用于summernote事件时，可以防止此行为并具有更多控制权。

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

Read more here 在这里阅读更多

Another thing that could be causing trouble, is the foreach loop containing elements with hardcoded id's. 可能引起麻烦的另一件事是foreach循环，其中包含具有硬编码ID的元素。 Since id's have to be unique this can give some unexpected results. 由于ID必须是唯一的，因此可能会产生一些意外的结果。 Of course, when $user matches $account->user only once, everything is fine, but I usually don't take the risk. 当然，当$user匹配$account->user一次时，一切都很好，但是我通常不冒险。

UPDATE: added a jsfiddle here of a possible implementation. 更新：在此处添加了可能实现的jsfiddle。

Answer 2

You wanted multiple textareas with summernote? 您想使用summernote进行多个文本区域吗？

Take: (; 采取：（;

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

but after this You still cannot get the data that inside these textareas - so really something is wrong with Your blade template 但是之后，您仍然无法获得这些文本区域内的数据-因此刀片模板确实出了点问题

http://num8er.me/summernote.html 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