尝试将summernote editor实现为使用jquery steps的向导表单并获取第二个文本区域。 我不擅长js,可能是任何脚本冲突吗?
答案 0 :(得分:1)
实际上非常简单。使用此代码:
$(document).ready(function() {
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
$('#summernote').summernote({
height: 300,
minHeight: null,
maxHeight: null,
focus: true
});
});
.wizard,.tabcontrol {
display: block;
width: 100%;
overflow: hidden
}
.wizard a,.tabcontrol a {
outline: 0
}
.wizard ul,.tabcontrol ul {
list-style: none!important;
padding: 0;
margin: 0
}
.wizard ul>li,.tabcontrol ul>li {
display: block;
padding: 0
}
.wizard>.steps .current-info,.tabcontrol>.steps .current-info {
position: absolute;
left: -999em
}
.wizard>.content>.title,.tabcontrol>.content>.title {
position: absolute;
left: -999em
}
.wizard>.steps {
position: relative;
display: block;
width: 100%
}
.wizard.vertical>.steps {
display: inline;
float: left;
width: 30%
}
.wizard>.steps .number {
font-size: 1.429em
}
.wizard>.steps>ul>li {
width: 25%
}
.wizard>.steps>ul>li,.wizard>.actions>ul>li {
float: left
}
.wizard.vertical>.steps>ul>li {
float: none;
width: 100%
}
.wizard>.steps a,.wizard>.steps a:hover,.wizard>.steps a:active {
display: block;
width: auto;
margin: 0 .5em .5em;
padding: 1em 1em;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px
}
.wizard>.steps .disabled a,.wizard>.steps .disabled a:hover,.wizard>.steps .disabled a:active {
background: #eee;
color: #aaa;
cursor: default
}
.wizard>.steps .current a,.wizard>.steps .current a:hover,.wizard>.steps .current a:active {
background: #2184be;
color: #fff;
cursor: default
}
.wizard>.steps .done a,.wizard>.steps .done a:hover,.wizard>.steps .done a:active {
background: #9dc8e2;
color: #fff
}
.wizard>.steps .error a,.wizard>.steps .error a:hover,.wizard>.steps .error a:active {
background: #ff3111;
color: #fff
}
.wizard>.content {
background: #eee;
display: block;
margin: .5em;
min-height: 35em;
overflow: hidden;
position: relative;
width: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px
}
.wizard.vertical>.content {
display: inline;
float: left;
margin: 0 2.5% .5em 2.5%;
width: 65%
}
.wizard>.content>.body {
float: left;
position: absolute;
width: 95%;
height: 95%;
padding: 2.5%
}
.wizard>.content>.body ul {
list-style: disc!important
}
.wizard>.content>.body ul>li {
display: list-item
}
.wizard>.content>.body>iframe {
border: 0 none;
width: 100%;
height: 100%
}
.wizard>.content>.body input {
display: block;
border: 1px solid #ccc
}
.wizard>.content>.body input[type="checkbox"] {
display: inline-block
}
.wizard>.content>.body input.error {
background: #fbe3e4;
border: 1px solid #fbc2c4;
color: #8a1f11
}
.wizard>.content>.body label {
display: inline-block;
margin-bottom: .5em
}
.wizard>.content>.body label.error {
color: #8a1f11;
display: inline-block;
margin-left: 1.5em
}
.wizard>.actions {
position: relative;
display: block;
text-align: right;
width: 100%
}
.wizard.vertical>.actions {
display: inline;
float: right;
margin: 0 2.5%;
width: 95%
}
.wizard>.actions>ul {
display: inline-block;
text-align: right
}
.wizard>.actions>ul>li {
margin: 0 .5em
}
.wizard.vertical>.actions>ul>li {
margin: 0 0 0 1em
}
.wizard>.actions a,.wizard>.actions a:hover,.wizard>.actions a:active {
background: #2184be;
color: #fff;
display: block;
padding: .5em 1em;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px
}
.wizard>.actions .disabled a,.wizard>.actions .disabled a:hover,.wizard>.actions .disabled a:active {
background: #eee;
color: #aaa
}
.wizard>.loading {
}
.wizard>.loading .spinner {
}
.tabcontrol>.steps {
position: relative;
display: block;
width: 100%
}
.tabcontrol>.steps>ul {
position: relative;
margin: 6px 0 0 0;
top: 1px;
z-index: 1
}
.tabcontrol>.steps>ul>li {
float: left;
margin: 5px 2px 0 0;
padding: 1px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px
}
.tabcontrol>.steps>ul>li:hover {
background: #edecec;
border: 1px solid #bbb;
padding: 0
}
.tabcontrol>.steps>ul>li.current {
background: #fff;
border: 1px solid #bbb;
border-bottom: 0 none;
padding: 0 0 1px 0;
margin-top: 0
}
.tabcontrol>.steps>ul>li>a {
color: #5f5f5f;
display: inline-block;
border: 0 none;
margin: 0;
padding: 10px 30px;
text-decoration: none
}
.tabcontrol>.steps>ul>li>a:hover {
text-decoration: none
}
.tabcontrol>.steps>ul>li.current>a {
padding: 15px 30px 10px 30px
}
.tabcontrol>.content {
position: relative;
display: inline-block;
width: 100%;
height: 35em;
overflow: hidden;
border-top: 1px solid #bbb;
padding-top: 20px
}
.tabcontrol>.content>.body {
float: left;
position: absolute;
width: 95%;
height: 95%;
padding: 2.5%
}
.tabcontrol>.content>.body ul {
list-style: disc!important
}
.tabcontrol>.content>.body ul>li {
display: list-item
}
@media(max-width: 600px) {
.wizard>.steps>ul>li {
width:50%
}
.wizard>.steps a,.wizard>.steps a:hover,.wizard>.steps a:active {
margin-top: .5em
}
.wizard.vertical>.steps,.wizard.vertical>.actions {
display: block;
float: none;
width: 100%
}
.wizard.vertical>.content {
display: block;
float: none;
margin: 0 .5em .5em;
width: auto
}
}
@media(max-width: 480px) {
.wizard>.steps>ul>li {
width:100%
}
}
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<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>
<script src="http://zikro.gr/dbg/html/jquery-steps/jquery.steps/jquery.steps.min.js"></script>
<div id="example-basic">
<h3>Keyboard</h3>
<section>
<div id="summernote">Hello Summernote</div>
</section>
<h3>Effects</h3>
<section>
<p>Wonderful transition effects.</p>
</section>
<h3>Pager</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
</div>
您还可以尝试使用此示例链接:http://zikro.gr/dbg/html/jquery-steps/