Summernote 编辑器未打开（laravel 5.2）
Posted
技术标签:
【中文标题】Summernote 编辑器未打开（laravel 5.2）【英文标题】：summernote editor not opening (laravel 5.2) 【发布时间】：2017-01-18 16:18:01 【问题描述】：我在 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：
我发现，在点击保存按钮（导致数据库中的空值）（每次用户登录）后，编辑按钮开始正常工作。
编辑 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>
【问题讨论】：
你将它应用于多个领域是什么意思？ 我的意思是之前我只为textfield4应用了它（它有效），现在我也想申请textfield5（现在两者都不起作用）（如图所示） 确保调用编辑函数 - 添加 console.log($estado, $goodat);到您的编辑功能并告诉我们控制台输出 $('#estado'); 的结果是什么？在你的控制台中？ 那么您的屏幕上根本没有该元素。你的循环似乎是错误的 【参考方案1】：您想要 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
【讨论】：
实际上我想要多个文本区域点击编辑按钮。 @YaShChaudhary 已修复 在 num8er nope :( ! 未捕获的类型错误：$estado.summernote 不是函数 :D 你甚至还没有将summernote.js 文件附加到模板中！看看它在我的示例中是否有效，即使我没有更改您的模板文件以使其与刀片一起使用。但是您没有将 Summernote 文件注入到模板中。【参考方案2】：我认为您可能会遇到一些异步问题，因为它有时有效，有时无效。您正在根据 Summernote 字段的值设置 textareas 的值。但是你不能确定$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
);
阅读更多here
另一件可能引起麻烦的事情是 foreach 循环包含带有硬编码 id 的元素。由于 id 必须是唯一的，这可能会产生一些意想不到的结果。当然，当$user 只匹配$account->user 一次时，一切都很好，但我通常不会冒险。
更新：添加了一个可能实现的 jsfiddle here。
【讨论】：
我在这里创建了一个 jsfiddle：jsfiddle.net/97tet4so 和一个实现。 为什么不呢？你得到一个错误或什么？一切都呈现在您的视图中了吗？ 我已经更新了 JSFiddle 并激活了编辑按钮。我希望这是理想的行为。 让我们continue this discussion in chat。以上是关于Summernote 编辑器未打开（laravel 5.2）的主要内容，如果未能解决你的问题，请参考以下文章
单击外部编辑器时，Angular js Summernote 下拉菜单未关闭
Summernote（数据未保存在数据库中）（laravel 5.2）
Summernote 显示在所有位置（Laravel 5.2）