<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jHtmlArea Live Demo - WYSIWYG HTML Editor for jQuery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/crpietschmann/jHtmlArea@v1.0.1/dist/css/jHtmlArea.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/crpietschmann/jHtmlArea@v1.0.1/dist/css/jHtmlArea.ColorPickerMenu.css">
<style>
body{
position: relative;
padding-top: 50px;
}
h1 .text-muted {
font-size: 0.7em;
}
.bs-header {
font-size: 21px;
padding: 30px 30px 40px;
border-bottom: solid 1px #e5e5e5;
}
.bs-header h1 {
font-size: 50px;
}
textarea {
width:100%;
height:200px;
}
</style>
</head>
<body>
<!-- Docs master nav -->
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container">
<a href="/jHtmlArea" class="navbar-brand">jHtmlArea</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Getting started</a></li>
<li><a href="https://github.com/crpietschmann/jhtmlarea/wiki">Documentation</a></li>
<li><a href="https://github.com/crpietschmann/jHtmlArea">Download</a></li>
<li><a href="https://github.com/crpietschmann/jHtmlArea">Source code</a></li>
<li><a href="https://www.nuget.org/packages/jHtmlArea/">Nuget package</a></li>
</ul>
</div>
</div>
</div>
<!-- Docs page layout -->
<div class="bs-header">
<div class="container">
<h1>jHtmlArea <span class="text-muted">Getting started</span></h1>
<p>An overview of jHtmlArea, how to download, basic use, examples and more.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="bs-sidebar">
<ul class="nav bs-sidenav">
<li>
<a href="#overview">Overview</a>
<ul class="nav">
<li><a href="#overview-advantages">Advantages</a></li>
<li><a href="#overview-nuget">Available on Nuget</a></li>
</ul>
</li>
<li>
<a href="#usage">Basic Usage</a>
</li>
<li>
<a href="#usage-custom-toolbar">Custom Toolbar</a>
</li>
</ul>
</div>
<p>
<div class="alert alert-info">
Source code available at <a href="https://github.com/crpietschmann/jHtmlArea">crpietschmann/jHtmlArea</a> GitHub project.
</div>
</p>
</div>
<div class="col-lg-9">
<div class="bs-docs-section">
<div class="page-header">
<h1 id="overview">Overview</h1>
<button class="btn btn-primary">Deneme</button>
</div>
<p class="lead">A simple, light weight, easily extensible WYSIWYG Html Editor built on top of jQuery. This component allows you to easily display a WYSIWYG Html Editor in place of any <code class="prettyprint language-html"><textarea/></code> Html element. The minified script alone is only 9.21kb.</p>
<h3 id="overview-advantages">Advantages</h3>
<p>Here are some key advantages to using jHtmlArea:</p>
<p>
<ul>
<li>Free, open source (Microsoft Publis License)</li>
<li>Simple and Lightweight - 9.21kb minified</li>
<li>Supports all mainstream browsers</li>
<li>Built on top of jQuery</li>
<li>Full Documentation</li>
</ul>
</p>
<h3 id="overview-nuget">Available on Nuget</h3>
<p>jHtmlArea is conveniently available as a Nuget package.</p>
<p><a href="http://nuget.org/packages/jHtmlArea"><img src="content/jHtmlArea_Nuget_Install.png" /></a></p>
</div>
<div class="bs-docs-section">
<div class="page-header">
<h1 id="usage">Basic Usage</h1>
</div>
<p class="lead">jHtmlArea is really easy to use!</p>
<p>Example:</p>
<p><textarea id="txtUsage1"><H1>jHtmlArea is simple to use!</H1><p>It's also light weight and extensible!</p></textarea></p>
<p>Source:</p>
<pre class="prettyprint language-java">// Turn all <textarea/> tags into WYSIWYG editors
$(function() {
$("textarea").htmlarea();
});
</pre>
</div>
<div class="bs-docs-section">
<div class="page-header">
<h1 id="usage-custom-toolbar">Custom Toolbar</h1>
</div>
<p class="lead">Specifying a custom set of toolbar buttons</p>
<p>Example:</p>
<p><textarea id="txtCustomToolbar"><h1 style="color: #ffcc66">Custom Toolbar!</h1><p>You can specify your own custom toolbar with all the buttons you want to make available to your users.</p></textarea></p>
<p>Source:</p>
<pre class="prettyprint language-java">$(function() {
$("textarea").htmlarea({
toolbar: ["html", "|",
"forecolor", // <-- Add the "forecolor" Toolbar Button
"|", "bold", "italic", "underline", "|", "h1", "h2", "h3", "|", "link", "unlink"] // Overrides/Specifies the Toolbar buttons to show
});
});
</pre>
</div>
<p>
<div class="footer">
Copyright (c) 2013 <a href="http://pietschsoft.com">Chris Pietschmann</a>
</div>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/crpietschmann/jHtmlArea@1.0.1/dist/js/jHtmlArea.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/crpietschmann/jHtmlArea@1.0.1/dist/js/jHtmlArea.ColorPickerMenu.min.js"></script>
<script src="scripts/Prettify/run_prettify.js"></script>
<script>
$('#txtUsage1').htmlarea();
$('#txtCustomToolbar').htmlarea({
toolbar: ["html", "|",
"forecolor", // <-- Add the "forecolor" Toolbar Button
"|", "bold", "italic", "underline", "|", "h1", "h2", "h3", "|", "link", "unlink"] // Overrides/Specifies the Toolbar buttons to show
});
</script>
{% if site.google.analytics.tracking_id %}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google.analytics.tracking_id }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ site.google.analytics.tracking_id }}');
</script>
{% endif %}
</body>
</html>
