Summernote 所见即所得
Posted
技术标签:
【中文标题】Summernote 所见即所得【英文标题】：Summernote WYSIWYG 【发布时间】：2014-08-21 22:54:24 【问题描述】：我无法在我的应用程序中初始化summernote WYSIWYG editor，我不知道为什么它不起作用。
我开始导入 JS 和 CSS 文件，打开一个以“summernote”为 id 的 div 标签，并在底部插入 javascript 代码。源文件都指向正确。
我想渲染hackerwins.github.io/summernote 中显示的文本编辑器。它不显示编辑器。只是<div id="summernote"></div> 中的纯文本“use element”
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://localhost/projecto/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost/projecto/assets/css/animations.css">
<link rel="stylesheet" href="http://localhost/projecto/assets/css/main.css">
<link rel="stylesheet" href="http://localhost/projecto/assets/css/extras.css">
<script src="http://localhost/projecto/assets/js/vendor/modernizr-2.6.2.min.js"></script>
<link href="http://localhost/projecto/assets/css/summernote.css" rel="stylesheet">
<script src="http://localhost/projecto/assets/js/summernote.min.js"></script>
</head>
<body><div id="top"></div>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<section id="topline">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>ana.coelho@anacoelhoarq.com | <a href="http://localhost/projecto/index.php/admin/login/logout">Logout</a> </p>
</div>
</div>
</div>
</section>
<section id="header">
<div class="container"><div class="row">
<img class="navbar-brand" src="http://localhost/projecto/assets/img/logotipo.jpg" >
<div class="col-sm-12 mainmenu_wrap"><div class="main-menu-icon visible-xs"><span></span><span></span><span></span></div>
<ul id="mainmenu" class="nav menu sf-menu responsive-menu superfish">
<li class="active">
<a href="./">Dashboard</a>
</li>
<li class="dropdown">
<a href="./about.html">Projectos</a>
<ul class="nav dropdown-menu">
<li class="dropdown">
<a href="./blog.html">Inserir</a>
</li>
<li class="dropdown">
<a href="./blog.html">Consultar</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="./blog.html">Publicações</a>
<ul class="nav dropdown-menu">
<li class="">
<a href="./blog.html">Inserir</a>
</li>
<li class="">
<a href="./blog.html">Consultar</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="./blog.html">Newsletter</a>
<ul class="nav dropdown-menu">
<li class="">
<a href="./blog.html">Consultar inscriçóes</a>
</li>
</ul>
</li>
</ul>
</div>
</div></div>
</section><div class="container">
<div class="row">
<div id="summernote" class="summernote col-sm-12"><h4>use element</h4></div>
</div>
</div>
<footer id="footer" style="padding: 0px;" class="darkgrey_section">
<div class="container">
<div class="row">
<div class="col-sm-8">
<p style="color: #AAA;">© 2014 - anacoelhoarq.com Todos os direitos reservados</p>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</footer>
<script>$(document).ready(function()
$('.summernote').summernote();
);</script>
</body>
</html>
【问题讨论】：
什么不起作用？以什么方式？运行代码时会发生什么？你想发生什么？ 嗨，我想渲染hackerwins.github.io/summernote 中显示的文本编辑器它不显示编辑器。只是 中的纯文本 这样更好。当你提出问题时，永远记得说出你想得到什么，以及你最终得到什么。 【参考方案1】：检查the documentation。您需要包含jQuery、bootstrap 和fontawesome：
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
你需要像这样初始化 Summernote：
$(document).ready(function()
$('#summernote').summernote();
);
【讨论】：
是的，就是这样！忘记包括那些宝贵的资源。谢谢！以上是关于Summernote 所见即所得的主要内容，如果未能解决你的问题，请参考以下文章
CollectionFS、Meteor.js、Summernote（所见即所得）和文件上传
Summernote 所见即所得编辑器无法使用 Laravel 5.8 正确呈现数据