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
good work thanks for this but it miss how to add custom button to the editor
I’m planning to have the ability to add custom buttons done by tomorrow or the next day. I have a few other changes I need to test first which is what’s slowing it down.
I’ve updated the editor to now support custom commands and added a How To here.
Pingback: Adding custom commands to SCEditor | Sam's Site