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.
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.
2 |
sceditor.create(textarea, { |
7 |
sceditor.create(textarea, { |
4. Set the theme. All Available themes:
02 |
minified/themes/default.min.css |
05 |
minified/themes/defaultdark.min.css |
08 |
minified/themes/modern.min.css |
11 |
minified/themes/office.min.css |
14 |
minified/themes/office-toolbar.min.css |
17 |
minified/themes/square.min.css |
1 |
sceditor.create(textarea, { |
3 |
style: 'minified/themes/defaultdark.min.css' |
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' |
6. All possible options.
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|' + |
019 |
toolbarExclude: null , |
027 |
style: 'jquery.sceditor.default.css' , |
034 |
fonts: 'Arial,Arial Black,Comic Sans MS,Courier New,Georgia,Impact,' + |
035 |
'Sans-serif,Serif,Times New Roman,Trebuchet MS,Verdana' , |
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' , |
058 |
locale: attr(document.documentElement, 'lang' ) || 'en' , |