Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
328 lines (303 sloc) 15.1 KB
<!DOCTYPE html>
<html>
<head>
<title>WYSIWYG Editors</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="vendors/bootstrap-wysihtml5/src/bootstrap-wysihtml5.css"></link>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Admin Panel</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-user"></i> Vincent Gabriel <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="#">Profile</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="login.html">Logout</a>
</li>
</ul>
</li>
</ul>
<ul class="nav">
<li class="active">
<a href="#">Dashboard</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Settings <b class="caret"></b>
</a>
<ul class="dropdown-menu" id="menu1">
<li>
<a href="#">Tools <i class="icon-arrow-right"></i>
</a>
<ul class="dropdown-menu sub-menu">
<li>
<a href="#">Reports</a>
</li>
<li>
<a href="#">Logs</a>
</li>
<li>
<a href="#">Errors</a>
</li>
</ul>
</li>
<li>
<a href="#">SEO Settings</a>
</li>
<li>
<a href="#">Other Link</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Other Link</a>
</li>
<li>
<a href="#">Other Link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Content <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="#">Blog</a>
</li>
<li>
<a tabindex="-1" href="#">News</a>
</li>
<li>
<a tabindex="-1" href="#">Custom Pages</a>
</li>
<li>
<a tabindex="-1" href="#">Calendar</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="#">FAQ</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Users <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="#">User List</a>
</li>
<li>
<a tabindex="-1" href="#">Search</a>
</li>
<li>
<a tabindex="-1" href="#">Permissions</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2" id="sidebar">
<ul class="nav nav-list bs-docs-sidenav nav-collapse collapse">
<li>
<a href="index.html"><i class="icon-chevron-right"></i> Dashboard</a>
</li>
<li>
<a href="calendar.html"><i class="icon-chevron-right"></i> Calendar</a>
</li>
<li>
<a href="stats.html"><i class="icon-chevron-right"></i> Statistics (Charts)</a>
</li>
<li>
<a href="form.html"><i class="icon-chevron-right"></i> Forms</a>
</li>
<li>
<a href="buttons.html"><i class="icon-chevron-right"></i> Buttons & Icons</a>
</li>
<li class="active">
<a href="editors.html"><i class="icon-chevron-right"></i> WYSIWYG Editors</a>
</li>
<li>
<a href="interface.html"><i class="icon-chevron-right"></i> UI & Interface</a>
</li>
<li>
<a href="#"><span class="badge badge-success pull-right">731</span> Orders</a>
</li>
<li>
<a href="#"><span class="badge badge-success pull-right">812</span> Invoices</a>
</li>
<li>
<a href="#"><span class="badge badge-info pull-right">27</span> Clients</a>
</li>
<li>
<a href="#"><span class="badge badge-info pull-right">1,234</span> Users</a>
</li>
<li>
<a href="#"><span class="badge badge-info pull-right">2,221</span> Messages</a>
</li>
<li>
<a href="#"><span class="badge badge-info pull-right">11</span> Reports</a>
</li>
<li>
<a href="#"><span class="badge badge-important pull-right">83</span> Errors</a>
</li>
<li>
<a href="#"><span class="badge badge-warning pull-right">4,231</span> Logs</a>
</li>
</ul>
</div>
<!--/span-->
<div class="span10">
<div class="row-fluid">
<div class="span12" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">CKEditor Standard</div>
</div>
<div class="block-content collapse in">
<textarea id="ckeditor_standard"></textarea>
</div>
</div>
<!-- /block -->
</div>
</div>
<div class="span12" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">CKEditor Full</div>
</div>
<div class="block-content collapse in">
<textarea id="ckeditor_full"></textarea>
</div>
</div>
<!-- /block -->
</div>
</div>
<div class="span12" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">TinyMCE Basic</div>
</div>
<div class="block-content collapse in">
<textarea id="tinymce_basic"></textarea>
</div>
</div>
<!-- /block -->
</div>
</div>
<div class="span12" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">TinyMCE Full</div>
</div>
<div class="block-content collapse in">
<textarea id="tinymce_full"></textarea>
</div>
</div>
<!-- /block -->
</div>
</div>
<div class="span12" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Bootstrap WYSIWYG</div>
</div>
<div class="block-content collapse in">
<textarea id="bootstrap-editor" placeholder="Enter text ..." style="width:98%;height:200px;"></textarea>
</div>
</div>
<!-- /block -->
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p>&copy; Vincent Gabriel 2013</p>
</footer>
</div>
<!--/.fluid-container-->
<script src="vendors/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
<script src="vendors/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
<script src="vendors/ckeditor/ckeditor.js"></script>
<script src="vendors/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="vendors/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="assets/scripts.js"></script>
<script>
$(function() {
// Bootstrap
$('#bootstrap-editor').wysihtml5();
// Ckeditor standard
$( 'textarea#ckeditor_standard' ).ckeditor({width:'98%', height: '150px', toolbar: [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], // Defines toolbar group without name.
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
]});
$( 'textarea#ckeditor_full' ).ckeditor({width:'98%', height: '150px'});
});
// Tiny MCE
tinymce.init({
selector: "#tinymce_basic",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
// Tiny MCE
tinymce.init({
selector: "#tinymce_full",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
</script>
</body>
</html>