我有一个
HTML页面.在该页面中,我试图添加一个所见即所得的编辑器.我决定使用
this one.我已经在我的应用程序中工作了.但是,我似乎无法按照我想要的方式得到它的风格.我相信问题是因为我正在使用
this theme.我真的希望能够将工具栏漂浮在控件的上方,在文本框标签的右侧.同时,我想保持纸张看起来而不是庞大的盒子.
在这一点上,我已经尝试了this fiddle的内容.但是,造型是错误的.主要代码如下所示：
<div class="container">
<div class="form-group label-static is-empty">
<div class="row">
<div class="col-xs-3"><label class="control-label" for="Description">Description</label> </div>
<div class="col-xs-9">
<div id="toolbar" class="pull-right" style="vertical-align:top; margin-top:0; padding-top:0;">[toolbar]</div>
</div>
</div>
<input class="form-control" rows="3" id="Description" name="Description" onfocus="setMode('rich');" onblur="setMode(null);"></div>
</div>
当我使用以下JavaScript时：
$(function () {
$.material.init();
});
function setMode(name) {
if (name === 'rich') {
$('#Description').summernote({ focus: true });
} else {
$('#Description').summernote('destroy');
}
}
任何帮助是赞赏.这真的令人沮丧.
解决方法
编辑：
V2：
我创建了另一个版本,使得标签更改颜色,当夏季提示存在时,通常将在材料设计中.此外,我还添加了一些动画来跟进物质动议.
JSFIDDLE VERSION 2
CODE SNIPPET V2：
$(document).ready(function() {
$(function() {
$.material.init();
});
var mySummernote = $("#Description"),labelStatic = $(".label-static");
mySummernote
.on("click",function() {
setTimeout(function() {
mySummernote.summernote({
focus: true
});
$('.note-toolbar.panel-heading').appendTo('#toolbar');
labelStatic.addClass("is-focused");
},250);
});
$(document).mouseup(function(el) {
var summernoteContainer = $("#summernote-container");
if (!summernoteContainer.is(el.target) && summernoteContainer.has(el.target).length === 0) {
mySummernote.summernote("destroy");
$('.note-toolbar.panel-heading').remove();
labelStatic.removeClass("is-focused");
}
});
});
.mytoolbar {
position: relative;
top: -30px;
z-index: 9;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0,0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#summernote-container .note-editor.note-frame.panel.panel-default {
animation: fadeInDown .8s;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#summernote-container .note-toolbar.panel-heading {
opacity: 0;
animation: fadeIn .8s .8s both;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.min.js"></script>
<div class="container">
<div class="form-group label-static is-empty" id="summernote-container">
<div class="row">
<div class="col-xs-2">
<label class="control-label" for="Description">Description</label>
</div>
<div class="col-xs-10">
<div id="toolbar" class="mytoolbar"></div>
</div>
</div>
<input class="form-control" rows="3" id="Description" name="Description">
</div>
</div>
解：
首先,您需要在文档准备就绪时调用函数,方法如下：
$("document").ready(function(){
//Your JS functions here
});
然后从内容中删除onfocus和onblur.
按照SoC(分离问题),我们将在JS文件中添加这个逻辑,我们将使用on()jQuery方法.
在这种情况下,我们有以下逻辑：
$("#summernoteTrigger").on("click",function() {
//When the user clicks the input stuff here
//Separate Toolbar from Summernote and show it next to label
});
当用户点击输入时,我们将初始化Summernote并使用焦点选项：
$(this).summernote({
focus: true
});
当Summernote初始化时,我们希望将工具栏放在标签旁边,所以我们将把它附加到我们选择的容器中：
$('.note-toolbar.panel-heading').appendTo('#toolbar');
另一件我们想要做的就是摧毁Summernote,如果用户停止对其进行聚焦.为此,我们不能使用$(‘#summernoteTrigger’).on(‘summernote.blur’,function(){});因为点击工具栏会触发此回调.相反,我们可以使用以下方法：
$(document).mouseup(function(el) {
var summernoteContainer = $("#summernote-container");
if (!summernoteContainer.is(el.target) && summernoteContainer.has(el.target).length === 0) {
//Add logic here if you want to save what the user typed
$("#summernoteTrigger").summernote("destroy");
$('.note-toolbar.panel-heading').remove();
}
});
});
最后我们把所有东西放在一起,如果需要的话添加一些风格
JSFIDDLE
代码：
$(document).ready(function() {
$(function() {
$.material.init();
});
var mySummernote = $("#Description");
mySummernote
.on("click",function() {
$(this).summernote({
focus: true
});
$('.note-toolbar.panel-heading').appendTo('#toolbar');
});
$(document).mouseup(function(el) {
var summernoteContainer = $("#summernote-container");
if (!summernoteContainer.is(el.target) && summernoteContainer.has(el.target).length === 0) {
mySummernote.summernote("destroy");
$('.note-toolbar.panel-heading').remove();
}
});
});
.mytoolbar {
position: relative;
top: -30px;
z-index: 9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.min.js"></script>
<div class="container">
<div class="form-group label-static is-empty" id="summernote-container">
<div class="row">
<div class="col-xs-2">
<label class="control-label" for="Description">Description</label>
</div>
<div class="col-xs-10">
<div id="toolbar" class="mytoolbar"></div>
</div>
</div>
<input class="form-control" rows="3" id="Description" name="Description">
</div>
</div>