Lightweight XHTML BBCode WYSIWYG Editor SCEditor - Free Download Lightweight HTML and BBCode WYSIWYG Editor - SCEditor

Free Download Lightweight HTML and BBCode WYSIWYG Editor – SCEditor

Posted on

This time I will share jQuery Plugin and tutorial about Lightweight HTML and BBCode WYSIWYG Editor – SCEditor, hope it will help you in programming stack.

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

SCEditor is a lightweight jQuery & vanilla JavaScript based HTML and BBCode WYSIWYG editor for the web. Great for forum and CMS.

Note that the SCEditor v2.x/v3.x has dropped the jQuery dependency. You can download the SCEditor v1.x here.

A 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:

Table Of Contents:

How to use it (Vanilla JS Version):

1. Load the main JavaScript files in the document.

1 <script src="minified/sceditor.min.js"></script>
2 <script src="minified/formats/bbcode.js"></script>
3 <script src="minified/formats/xhtml.js"></script>

2. Load lanugage files if needed. You can find all language files under the languages folder.

1 <script src="languages/de.js"></script>

3. Convert a textarea element into a BBCode or HTML editor.

1 // bbcode editor
2 sceditor.create(textarea, {
3   format: 'bbcode'
4 });
5  
6 // html editor
7 sceditor.create(textarea, {
8   format: 'xhtml'
9 });

4. Set the theme. All Available themes:

01 <!-- Default theme -->
02 minified/themes/default.min.css
03  
04 <!-- Dark theme -->
05 minified/themes/defaultdark.min.css
06  
07 <!-- Modern theme -->
08 minified/themes/modern.min.css
09  
10 <!-- Office theme -->
11 minified/themes/office.min.css
12  
13 <!-- Office+Toolbar theme -->
14 minified/themes/office-toolbar.min.css
15  
16 <!-- Square theme -->
17 minified/themes/square.min.css
1 sceditor.create(textarea, {
2   format: 'bbcode',
3   style: 'minified/themes/defaultdark.min.css'
4 });

5. Enable a plugin on the editor. All possible plugins.

  • AutoSave: auto save data into the local storage
  • AutoYoutube: auto convert Youtube links
  • DragDrop: enable file drag and drop functionality
  • Plaintext: auto remove formatting when pasting
  • Undo: enable undo/redo functionality
1 sceditor.create(textarea, {
2   plugins: 'undo, autosave'
3 });

6. All possible options.

001 /** @lends jQuery.sceditor.defaultOptions */
002 /**
003  * Toolbar buttons order and groups. Should be comma separated and
004  * have a bar | to separate groups
005  *
006  * @type {string}
007  */
008 toolbar: 'bold,italic,underline,strike,subscript,superscript|' +
009   'left,center,right,justify|font,size,color,removeformat|' +
010   'cut,copy,pastetext|bulletlist,orderedlist,indent,outdent|' +
011   'table|code,quote|horizontalrule,image,email,link,unlink|' +
012   'emoticon,youtube,<a href="https://www.jqueryscript.net/time-clock/">date</a>,time|ltr,rtl|print,maximize,source',
013  
014 /**
015  * Comma separated list of commands to excludes from the toolbar
016  *
017  * @type {string}
018  */
019 toolbarExclude: null,
020  
021 /**
022  * Stylesheet to include in the WYSIWYG editor. This is what will style
023  * the WYSIWYG elements
024  *
025  * @type {string}
026  */
027 style: 'jquery.sceditor.default.css',
028  
029 /**
030  * Comma separated list of fonts for the font selector
031  *
032  * @type {string}
033  */
034 fonts: 'Arial,Arial Black,Comic Sans MS,Courier New,Georgia,Impact,' +
035   'Sans-serif,Serif,Times New Roman,Trebuchet MS,Verdana',
036  
037 /**
038  * Colors should be comma separated and have a bar | to signal a new
039  * column.
040  *
041  * If null the colors will be auto generated.
042  *
043  * @type {string}
044  */
045 colors: '#000000,#44B8FF,#1E92F7,#0074D9,#005DC2,#00369B,#b3d5f4|' +
046     '#444444,#C3FFFF,#9DF9FF,#7FDBFF,#68C4E8,#419DC1,#d9f4ff|' +
047     '#666666,#72FF84,#4CEA5E,#2ECC40,#17B529,#008E02,#c0f0c6|' +
048     '#888888,#FFFF44,#FFFA1E,#FFDC00,#E8C500,#C19E00,#fff5b3|' +
049     '#aaaaaa,#FFC95F,#FFA339,#FF851B,#E86E04,#C14700,#ffdbbb|' +
050     '#cccccc,#FF857A,#FF5F54,#FF4136,#E82A1F,#C10300,#ffc6c3|' +
051     '#eeeeee,#FF56FF,#FF30DC,#F012BE,#D900A7,#B20080,#fbb8ec|' +
052     '#ffffff,#F551FF,#CF2BE7,#B10DC9,#9A00B2,#9A00B2,#e8b6ef',
053  
054 /**
055  * The locale to use.
056  * @type {string}
057  */
058 locale: attr(document.documentElement, 'lang') || 'en',
059  
060 /**
061  * The Charset to use
062  * @type {string}
063  */
064 charset: 'utf-8',
065  
066 /**
067  * Compatibility mode for emoticons.
068  *
069  * Helps if you have emoticons such as :/ which would put an emoticon
070  * inside http://
071  *
072  * This mode requires emoticons to be surrounded by whitespace or end of
073  * line chars. This mode has limited As You Type emoticon conversion
074  * support. It will not replace AYT for end of line chars, only
075  * emoticons surrounded by whitespace. They will still be replaced
076  * correctly when loaded just not AYT.