dongpai1942 2016-09-10 19:22
浏览 90

summernote编辑器未开启（laravel 5.2）

I am using summernote js in laravel 5.2.

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.

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:

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.

EDIT 2:

after placing all links and scripts in head tag ,error: $ is not defined .

     <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>
  • 写回答

2条回答 默认 最新

  • drqn5418 2016-09-18 19:35
    关注

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

    When you use callbacks for the summernote events, you can prevent this behaviour and have more control.

    $('#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. Since id's have to be unique this can give some unexpected results. Of course, when $user matches $account->user only once, everything is fine, but I usually don't take the risk.

    UPDATE: added a jsfiddle here of a possible implementation.

    评论

报告相同问题？

悬赏问题

  • ¥20 求个正点原子stm32f407开发版的贪吃蛇游戏
  • ¥15 正弦信号发生器串并联电路电阻无法保持同步怎么办
  • ¥15 划分vlan后，链路不通了？
  • ¥20 求各位懂行的人，注册表能不能看到usb使用得具体信息，干了什么，传输了什么数据
  • ¥15 个人网站被恶意大量访问，怎么办
  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 Centos / PETGEM
  • ¥15 划分vlan后不通了
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询（拒绝大模型回答）