SCEditor

SCEditor is a lightweight JavaScript WYSIWYG editor that converts a standard HTML textarea into a rich-text editing interface for BBCode or XHTML output. Developed by Sam Clarke and contributors, the project is distributed under the MIT license and runs entirely in the browser using the contenteditable API.

What is SCEditor?

SCEditor is a dependency-free WYSIWYG editor that enhances a plain HTML textarea with a visual editing surface. It accepts a textarea element and configuration options, then provides a formatted output value that can be read back programmatically. The editor is built for two output formats: BBCode and XHTML, making it suitable for forums, CMSs, and any application that needs user-generated formatted content.

Key Features

• Dual format support — SCEditor can output BBCode or XHTML depending on the format option passed to sceditor.create.
• Lightweight distribution — The minified build includes a core script plus separate format scripts for BBCode and XHTML, along with a default theme stylesheet.
• Simple JavaScript API — Create an editor with sceditor.create(textarea, options) and retrieve the current value with sceditor.instance(textarea).val().
• Theming system — Styles are split into a UI theme (minified/themes/default.min.css) and a content theme (minified/themes/content/default.min.css), both toggleable via the style option.
• Build & test tooling — Grunt tasks handle minification, LESS-to-CSS conversion, linting, unit tests, coverage, and release ZIP creation; a dev server is available through npm run dev.
• Bundled emoticons and icons — Ships with Nomicons: The Full Monty Emoticons and Silk icons by Mark James (CC-BY licensed).
• Documented options — A full list of configuration options is maintained at sceditor.com.

Who is it for?

• Web developers integrating a rich-text editor into a CMS or admin panel, especially when the backend expects BBCode or sanitized XHTML.
• Forum administrators who want to offer users a WYSIWYG experience while storing posts as BBCode.
• JavaScript developers needing a lightweight, framework-free editor that can be set up with a few script tags and one API call.

What can you do with SCEditor?

• Forums: Turn post textareas into a visual BBCode editor so users can format posts with buttons while the stored value remains standard BBCode.
• CMS content editing: Use the XHTML format to generate clean HTML content for pages, then read the value via the API and save it.
• Prototyping: Quickly replace any plain textarea with a rich editor by including the stylesheet and scripts and calling sceditor.create, then retrieve the value without a page refresh.

How does SCEditor work?

Include the default theme CSS, the minified editor script, and the BBCode and XHTML format scripts. Then call sceditor.create on the target textarea, passing options such as format and style. The textarea remains in sync with the editor; call sceditor.instance(textarea).val() to get the formatted output.

Pricing

SCEditor is free and open source under the MIT license, so there are no licensing fees for personal or commercial use.

Alternatives

• TinyMCE — a widely used WYSIWYG editor with a large plugin ecosystem.
• CKEditor — another popular rich-text editor that supports HTML output and a range of plugins.

FAQ

Is SCEditor free?

Yes, SCEditor is distributed under the MIT license, allowing free use in commercial and personal projects.

What output formats does SCEditor support?

SCEditor supports BBCode and XHTML. You select the format via the format option when creating the editor.

How do I get the editor's content?

Use sceditor.instance(textarea).val() to retrieve the current formatted content from the original textarea element.

Does SCEditor require a framework?

The usage examples only include plain JavaScript with no framework dependency; the library's code examples use vanilla DOM calls and no external libraries are listed.

How do I build SCEditor from source?

Run grunt build to minify JS and convert LESS to CSS, grunt test for linting and unit tests, and grunt release to create the distributable ZIP. For development, npm run dev starts a local server at http://localhost:9000/tests/.