index.html

---
layout: default
title: SCEditor - A lightweight WYSIWYG HTML and BBCode editor
menuTitle: Home
navtitle: Home
---

{% if paginator.page != 1 %}
	{% include posts.html %}
{% else %}
	<link rel="stylesheet" href="minified/themes/default.min.css" />
	<script src="minified/jquery.sceditor.bbcode.min.js"></script>
	<script>$(function() {
		$("textarea").sceditor({
			plugins: 'bbcode',
			width: '100%',
			style: "minified/jquery.sceditor.default.min.css"
		});
	});</script>
	<p><textarea style="width:600px; height:300px">[center][size=3][b]SCEditor[/b][/size][/center]

Give it a try! :)

[color=#ff00]Red text and [/color][color=#3399ff]blue text![/color]

[ul][li]A simple list[/li][li]With two items[/li][/ul]

If you are using IE9+ or any non-IE browser just type [b]:[/b]) and it should be converted into :) as you type.</textarea></p>

	<div class="row-fluid">
		<div class="span12">
			<h3>Quick Start</h3>

			<h4>
				Include the
				<abbr title="JavaScript">JS</abbr>
				&amp;
				<abbr title="Cascading Style Sheet">CSS</abbr>:
			</h4>
			<pre class="prettyprint linenums">
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="minified/themes/default.min.css" /&gt;
&lt;script src="minified/jquery.sceditor.bbcode.min.js">&lt;/script&gt;</pre>
		</div>
	</div>

	<div class="row-fluid">
		<div class="span6">
			<h4>BBCode</h4>
			<pre class="prettyprint linenums scrollable">&lt;script&gt;
$(function() {
    // Replace all textarea tags with SCEditor
    $('textarea').sceditor({
        plugins: 'bbcode',
        style: 'minified/jquery.sceditor.default.min.css'
    });
});
&lt;/script&gt;</pre>
		</div>
		<div class="span6">
			<h4>XHTML</h4>
			<pre class="prettyprint linenums">&lt;script&gt;
$(function() {
    // Replace all textarea tags with SCEditor
    $('textarea').sceditor({
        plugins: 'xhtml',
        style: 'minified/jquery.sceditor.default.min.css'
    });
});
&lt;/script&gt;</pre>
		</div>
	</div>

	<h4>Finished!</h4>

	<p>
		<a class="btn btn-primary btn-large" href="{{ site.sceditor.download }}">Download</a>
		or <a class="btn btn-large" href="/documentation/">Read the docs</a>
	</p>
{% endif %}