[英]summernote editor not opening (laravel 5.2)
我在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>
我認為您可能在這里遇到一些異步問題,因為它有時可以工作,有時不能工作。 您正在基於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。
您想使用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>
但是之后,您仍然無法獲得這些文本區域內的數據-因此刀片模板確實出了點問題
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.