How to use SCEditor

First include the editors CSS and JavaScript files:

<link rel="stylesheet" href="minified/jquery.sceditor.min.css" type="text/css" media="all" />
<script type="text/javascript" src="minified/jquery.sceditor.min.js"></script>


You then need a HTML form with a textarea in it. No special attributes or classes are required, e.g.:

<form action="post">
	<label for="name">Name:</label>
	<input type="text" name="name" id="name" />

<label for="message">Message:</label> <textarea name="message" id="message"></textarea>
<input type="submit" value="Post message" /> </form>

Finally initialise SCEditor on the form textarea(s) you want with the following JS:

$(document).ready(function() {
	/* change #message to the correct selector for your textarea(s) */
	$("#message").sceditorBBCodePlugin({ /*change sceditorBBCodePlugin to sceditor if you want a HTML editor instead of a BBCode editor */

/* insert any options here, see the readme for full list. (https://github.com/samclarke/SCEditor/blob/master/README.md) */
/* this is the CSS file for styling of the WYSIWYG input (styling for the text being edited).*/ style: "minified/jquery.sceditor.default.min.css" }); });

In the above example “#message” is selector used to select the textarea(s) to initialise the editor on. For more information on jQuery selectors see the jQuery docs.

That’s it, the textarea(s) should be replaced with the editor and when the form is sent, the BBCode (or HTML if you’re using sceditor for HTML editing) should be set as the value of the textarea the editor is replacing. The post data can then be treated the same way a normal textarea would be, i.e. for PHP to get the posted BBCode it should be: $_POST['message']

Using SBBCodeParser with SCEditor

To parse the BBCode produced by the editor simply run the $_POST['message'] variable through the SBBCodeParser and you’re done.

// include the BBCode parser
require_once('SBBCodeParser.php');

// create the BBCode parser $parser = new SBBCodeParser_Document(true, false);
$parsed_message = $parser->parse($_POST['message']) // parse the posted string $_POST['message'] ->detect_links() // detect non-linked links and converted them into links ->detect_emails() // detect non-linked e-mails and convert them into linked emails ->detect_emoticons() // detect emoticons ->get_html(); // get the HTML string
echo $parsed_message; // show the parsed HTML

You can download the above SCEditor example here.

4 thoughts on “How to use SCEditor

  1. Pingback: Adding custom commands to SCEditor | Sam's Site

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>