我有一个 HTML 页面。在该页面中，我试图添加一个 WYSIWYG 编辑器。我决定使用 this one .我让它在我的应用程序中工作。但是，我似乎无法按照我想要的方式设置它的样式。我相信问题是因为我正在使用 this theme .我真的很希望能够让 toolbar float 在控件上方，在文本框标签的右侧。同时，我想保持纸的外观而不是笨重的盒子。
此时，我已经尝试了 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:
我创建了另一个版本，当 summernote 出现时标签会改变颜色，就像在 Material Design 中一样。我还添加了一些动画来跟进 Material 运动。
代码片段 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, -100%, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 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();
}
});
});
最后，我们将所有内容放在一起，并根据需要添加一些样式。
代码片段:
$(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>
关于javascript - 样式所见即所得编辑器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38726290/
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。 最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
编辑:我稍微更改了规范，以更好地符合我的想象。好吧，我真的不想伪造C#属性，我想将它们合而为一并支持AOP。给定程序:classObjectdefObject.profile#magiccodehereendendclassFoo#Thisisthefakeattribute,itprofilesasinglemethod.profiledefbar(b)putsbenddefbarbar(b)puts(b)endcomment("thisreallyshouldbefixed")defsnafu(b)endendFoo.new.bar("test")Foo.new.barbar("t
尝试使用bundleopen命令打开gem源代码，accordingtoofficialdocumentationandinstruction.因此，我在.profile中导出编辑器:exportBUNDLER_EDITOR=viexportEDITOR=vi并尝试打开例如rails使用控制台的源代码:bundleopenrails出现错误CouldnotlocaleGemfile[ruby-2.1.1][~/]$:rails-vRails4.0.3[ruby-2.1.1][~/]$:bundle-vBundlerversion1.5.3[ruby-2.1.1][~/]$:bundle
我有一个存储JSON数据的列。当它处于编辑状态时，我不知道如何显示它。serialize:value,JSON=f.fields_for:valuedo|ff|.form-group=ff.label:short=ff.text_field:short,class:'form-control'.form-group=ff.label:long=ff.text_field:long,class:'form-control' 最佳答案 代替=f.fields_for:valuedo|ff|请使用以下代码:=f.fields_for:va