Lightweight XHTML and BBCode WYSIWYG Editor - SCEditor

Lightweight XHTML and BBCode WYSIWYG Editor - SCEditor
File Size: 537 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

SCEditor is a lightweight jQuery based WYSIWYG BBCode (Bulletin Board Code) & XHTML editor. Good for forum or CMS.

WYSIWYG editor is a system in which content (text and graphics) displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product,[1] which might be a printed document, web page, or slide presentation. (More info).

Bulletin Board Code is a lightweight markup language used to format posts in many message boards. (More info)

You might also like:

How to use it:

1. Include jQuery library and SCEditor JS on your page

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sceditor.bbcode.min.js"></script>
<!-- For XHTML use jquery.sceditor.xhtml.min.js -->

2. Include a theme css on your page. All themes:

  • Default
  • Modern
  • Office Toolbar
  • Office
  • Square
<link rel="stylesheet" href="jquery.sceditor.min.css" type="text/css" media="all" />

3. The Html

<textarea name="bbcode_field"></textarea>

4. Initialise the plugin

// To enable the BBCode plugin
<script>
$(function() {
    $("textarea").sceditor({
        plugins: "bbcode",
        style: "minified/jquery.sceditor.default.min.css"
    });
});
</script>

// To enable the XHTML plugin
<script>
$(function() {
    $("textarea").sceditor({
        plugins: "xhtml",
        style: "minified/jquery.sceditor.default.min.css"
    });
});
</script>

Change Log:

v1.4.5 (2014-04-16)

  • Added command shortcuts to tooltips.
  • Added Portuguese translation.
  • Added list indent and outdent commands.
  • Added Ukrainian translation.
  • Thanks to @aqrln for translating
  • Fixed bug with BBCode source editor creating links with [img] tags selected.
  • Fixed issue with insert() and FF.
  • Fixed in IE8 and below with XHTML font size attribute converstion.
  • Fixed typo in German translation.
  • Removed build.sh as grunt now does everything build.sh could.
  • Added Italian translation.
  • Fixed bug when insert empty node.
  • Fixed FF bug with dropdowns not opening via shortcuts.
  • Improved inserting so only scrolls if the end of the inserted HTML isn't in view.
  • Added zh-TW translation.
  • Updated Polish translation.
  • Fix possible XSS if editing loading BBCode that someone else has written.
  • Fixed default font size.
  • Added Japanese translation.
  • Fixed bug with XHTML plugin stripping iframes.
  • Fixed bug with IE11 newline handling.
  • >

This awesome jQuery plugin is developed by samclarke. For more Advanced Usages, please check the demo page or visit the official website.