A lightweight HTML and BBCode WYSIWYG editor

Overview

SCEditor v3.1.1

Build Status SemVer License

A lightweight WYSIWYG BBCode and XHTML editor.

SCEditor preview

For more information visit sceditor.com

Usage

Include the SCEditor JavaScript:

<link rel="stylesheet" href="minified/themes/default.min.css" />
<script src="minified/sceditor.min.js"></script>
<script src="minified/formats/bbcode.js"></script>
<script src="minified/formats/xhtml.js"></script>

Then to convert a textarea into SCEditor, simply do:

var textarea = document.getElementById('id-of-textarea');

sceditor.create(textarea, {
	format: 'xhtml',
	style: 'minified/themes/content/default.min.css'
});

or for a BBCode WYSIWYG editor do:

var textarea = document.getElementById('id-of-textarea');

sceditor.create(textarea, {
	format: 'bbcode',
	style: 'minified/themes/content/default.min.css'
});

Finally, to get the contents of the editor:

var textarea = document.getElementById("id-of-textarea");

sceditor.instance(textarea).val();

Options

For a full list of options, see the options documentation.

Building and testing

You will need Grunt installed to run the build/tests. To install Grunt run:

npm install -g grunt-cli

Next, to install the SCEditor dev dependencies run:

npm install

That's it! You can now build and test SCEditor with the following commands:

# Minify the JS and convert the LESS to CSS
grunt build

# Run the linter, unit tests and coverage
grunt test

# Creates the final distributable ZIP file
grunt release

You can also run the dev server to test changes without having to do a full build by running:

npm run dev

and then going to http://localhost:9000/tests/

Contribute

Any contributions and/or pull requests would be welcome.

Themes, translations, bug reports, bug fixes and donations are greatly appreciated.

Donate

If you would like to make a donation you can via PayPal or via Flattr

License

SCEditor is licensed under the MIT license:

Copyright (C) 2011 - 2017 Sam Clarke and contributors – sceditor.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Credits

Nomicons: The Full Monty Emoticons by: Oscar Gruno, aka Nominell v. 2.0 -> [email protected] Andy Fedosjeenko, aka Nightwolf -> [email protected]

Icons by: Mark James (http://www.famfamfam.com/lab/icons/silk/) Licensed under the Creative Commons CC-BY license.

Comments
  • [code] tag gets reproduced on every new line

    [code] tag gets reproduced on every new line

    Assuming this project is dead and no one is maintaining it. It will be worth a try at least to report a bug.

    When marking text and clicking the code button, then [code] gets printed on every single line rather than the beginning and the end of the block.

    $('textarea[name="message"]').sceditor({
      format: "bbcode",
      plugins: "plaintext",
      pastetext: {
        addButton: true,
        enabled: true,
      },
      style: "/vendor/sceditor/themes/content/default.min.css",
      locale: "en",
      emoticonsEnabled: false,
      enablePasteFiltering: true,
      toolbar: "bold,italic,underline,strike|removeformat|bulletlist,orderedlist,table|code,quote|horizontalrule,image,link,unlink|source",
      bbcodeTrim : true,
      parserOptions: {
        breakBeforeBlock: false,
        breakStartBlock: false
      },
      width: "auto"
    });
    

    image

    Bug 
    opened by timint 35
  • chrome freezes when removing formatting from bullets

    chrome freezes when removing formatting from bullets

    To reproduce: in chrome (latest version) select multiple lines of text, click bullets on toolbar. The lines stay selected and bullets appear, but if you click the bullets button on the toolbar again to remove them, it freezes.

    Code used to initialize:

            $("#editplayfootnotes").sceditor({
                plugins: 'bbcode',
                style: 'lib/SCEditor/minified/jquery.sceditor.default.min.css',
                toolbar: 'bold,italic,underline,size|left,center,right|bulletlist,orderedlist|link,unlink',
                resizeEnabled: false,
                enablePasteFiltering: true
            });
    

    You also need an event listener on the "blur" event which accesses the current value from sceditor (in our app we need to do something with the data as soon as the editing box loses focus).

    $("#editplayfootnotes").sceditor('instance').unbind("blur", playFootnotesListener).bind("blur", playFootnotesListener);
    
    function playFootnotesListener(e){
        var test = $("#editplayfootnotes").sceditor('instance').val();
    }
    

    Edit: With further testing I've determined that calling the .val() function (to read the value) after the list already exists in the editor will cause it to freeze when trying to remove it. You don't actually need it on a blur event.

    happens in chrome on pc, and chrome/safari on mac... but firefox and internet explorer on pc work fine. Might be related to webkit then? Removing bullets one line at a time doesn't cause the freeze, it only happens when trying to remove bullets from multiple lines at once.

    task manager shows the chrome process for that tab stuck at 25% (infinite loop on a single core out of 4?).

    Bug 
    opened by taekvideo 30
  • Kindly help me in sceditor for my forum with forumotion.com

    Kindly help me in sceditor for my forum with forumotion.com

    This is Ram,

    I am not strong knowledge in JavaScript.

    We have a Tamil language forum got from forumotion.com. Forumotion now upgraded old editor to new Sceditor for all his forums.

    Old editor textarea has a id attribute like "text_editor_textarea", we have using Google Tamil indic web version so worked perfectly.

    But in Sceditor the textarea has no such id attribute, so that we can't type in Tamil or any other languages(Except English).

    How to assign id attribute to that textarea? or any other way to use google tamil indic in this sceditor?

    Time being we are using Google Input Tools Desktop version

    Google indic web version JavaScript code given below: http://amarkkalam.com/Tools/tamileditor.html

    We also giving demo user id and password

    Site name: http://www.amarkkalam.net/login Username: demo123 Password: [removed]

    Screenshot: http://i.stack.imgur.com/Txsjw.jpg

    Kindly help us.

    Warm Regards & Thanks Ram

    Question 
    opened by ramgp01 30
  • Is this project maintained or abandoned?

    Is this project maintained or abandoned?

    Hello,

    I'd like to know if this project is maintained or was abandoned?

    There is no activity by the author for pretty long time. All I see is @brunoais and @q2apro activity in adding/responding to the issues...

    Would like to know the status in order to decide whether I will spend more time trying to fix some very annoying (for me) bugs or switch to another solution.

    Thanks.

    opened by abetis 24
  • How to insert text outside the editor?

    How to insert text outside the editor?

    Say I want to have a button on comments on my website saying "Quote" and if someone presses it, it then inserts the text from that comment wrapped in quotes tags into the editor, is that easily possible?

    Question 
    opened by LiamDawe 23
  • bullets does not work in Sceditor

    bullets does not work in Sceditor

    Hi,

    When I try to paste bullet listed content in sceditor textarea , only content is displaying without bulletlist. Please can anyone help me in this.

    Thank you in advance.

    Question Cannot Reproduce 
    opened by GouriSancroj 21
  • Bug: When focussing the editor a <br /> is inserted in the beginning.

    Bug: When focussing the editor a
    is inserted in the beginning.

    I am focussing the editor, when the user clicks on a button:

    window.sceditorInstance_c20_content = $('textarea[name="c20_content"]').sceditor('instance');
    window.sceditorInstance_c20_content.focus();
    

    This works, the focus is set to the scedtior field and the cursor blinks at first position. If the users starts to type now, the typing appears in the second line, not in the first as expected.

    capture

    Checking the HTML source of the editor, it shows:

     <p>
        <br />test
     </p>
    

    Test it:

    1. open http://www.q2apro.com/forum/94/test-question-to-insert-image
    2. click button "comment"
    3. start to type
    4. Result: Typing starts in line 2 not line 1.

    ~ Firefox 30.0, Win7 64bit

    Minor Bug 
    opened by q2apro 21
  • newline won't appear when added to the editor

    newline won't appear when added to the editor

    In the current stable version used with PHP when quoting someone I just put this into the editor:

    "[quote={$username}]" . $quote_info['comment_text'] . '[/quote]' . "\n\r"

    In the previous version the "\n\r" worked fine and after the quoted text it had a new line, now it doesn't work so when someone quotes the SCEditor starts inside the quote and cannot break out, forcing you into the code view.

    Bug 
    opened by LiamDawe 20
  • SCEditor - Cross-site Scripting (XSS) - Fix:

    SCEditor - Cross-site Scripting (XSS) - Fix:

    https://github.com/mufeedvh fixed the vulnerability associated with Cross-site Scripting (XSS). This fix is being submitted on behalf of https://github.com/mufeedvh - they have been awarded $25 for fixing the vulnerability through the huntr bug bounty program. Think you could fix a vulnerability like this - get involved (https://huntr.dev). Q | A Version Affected | ALL Bug Fix | YES Further References | https://github.com/418sec/SCEditor/pull/2

    opened by huntr-helper 19
  • Bug: iframe not full width when multiple instances?

    Bug: iframe not full width when multiple instances?

    Note: The links stated below do not trigger the bug anymore. I have programmed a workaround via PHP. The bug, however, still exists!

    Former Headline: "Appending an Image resizes SCeditor's iframe" Update: Behaviour not only on upload, see below.

    Situation: I have multiple instances of SCEditor on my page. Example: http://www.q2apro.com/forum/74/sceditor-with-mobiles-test-post-q2a

    If you click on comment and then on button Browse (to upload an image), jquery will upload the image immediately after the file has been chosen.

    Problem now, after the successful uploaded, SCEditor resizes not only the image but also the iframe:

    sceditor-bug

    The web inspector shows me before the upload:

    <iframe tabindex="0" style="width: 524px; height: 307px;" frameborder="0"></iframe>

    and after the image upload:

    <iframe tabindex="0" style="width: 90px; height: 339px;" frameborder="0"></iframe>

    So something must be resing the editor's iframe.


    Update: Just now I realized that the hidden iframe is already resized when clicking on the "comment" button in my forum to fade in the editor.

    iframe

    You can try it here, click on the comment button and insert text and you will notice it: http://www.q2apro.com/forum/74/sceditor-with-mobiles-test-post-q2a

    What could be the bug?

    Thanks, Kai

    PS: When resizing the entire browser window, the iframe seems to get updated and displays correctly.

    opened by q2apro 19
  • SUB bug: When subbing and then un-subbing, sub is still active

    SUB bug: When subbing and then un-subbing, sub is still active

    Obviously there is a bug when unsubbing in certain situations, please see videoclip:

    vorschau

    The HTML that was shown after clicking the source button - from the test above:

    <p>
        Test per Maus: x<sub>1</sub> = richtig
    </p>
    <p>
        x<sub>2 = falsch</sub> = war noch mal geklickt
    </p>
    <p>
        x<sub>3</sub> = richtig
    </p>
    <p>
        Nun per Tastatuturkürzel: x4 -- geht nicht mehr. Jap, ein Bug....<br />
    </p>
    

    With another test, I had always the subbing in the last line, that was the HTML source:

    <p>
         x<sub>1</sub> = test 
    </p>
    
    <p>
         x<sub>1</sub> = test 
    </p>
    
    <p>
         x<sub>2 = test</sub> 
    </p>
    
    <p>
         <br /> 
    </p>
    

    Even though, there is only a <br /> element in the end, it sub'ed the input in the new line. However, when loading the editor anew and pasting the HTML directly in source mode, and then writing into the last line, the sub was gone.

    Cannot understand where the bug is coming from.

    System: Win 7, Firefox 33.0.3

    Bug 
    opened by q2apro 17
  • Pasting from Word - Bullet points are ignored

    Pasting from Word - Bullet points are ignored

    Steps to reproduce the problem

    Issue: Bullet points are converted to font and size Expectation: Bullet points are converted to list items [li] ... [/li]

    1. Pasting text from word

    Google Chrome: Version 107.0.5304.107 (Offizieller Build) (64-Bit)

    From Word image

    After Pasting image

    Result after pasting

    Test [font=Symbol]·[size=1][font=Times New Roman]         [/font][/size][/font]1 [font=Symbol]·[size=1][font=Times New Roman]         [/font][/size][/font]2 [b]Test[/b][i]click here[/i] some other text

    Expected result for pasting Test [ul] [li]1[/li] [li]2[/li] [/ul] [b]Test[/b][i]click here[/i] some other text

    Enhancement 
    opened by mnp-mid 1
  • Pasting from Word - Whitespace is removed

    Pasting from Word - Whitespace is removed

    Steps to reproduce the problem

    1. Paste specific text from word
    2. White space is removed by clicking or by pasting

    Issue: The white space is removed on the left side after Test.

    Tested in Google Chrome: Version 107.0.5304.107 (Offizieller Build) (64-Bit)

    From Word image

    After pasting image

    Enhancement 
    opened by mnp-mid 1
  • editor.insert could not insert custom html tags

    editor.insert could not insert custom html tags

    i try to insert custom html tag <lottie-player>Test</lottie-player> but it inserts only text - Test. olso i try wysiwygEditorInsertHtml - but no effect. text area are emty - <p><br></p> image

    Bug 
    opened by fedot199614 3
  • How to clear undo/redo history

    How to clear undo/redo history

    I'm currently using the undo plugin. Is there any way to clear the undo history after I empty the editor using .val("")?

    If not, how can I implement something like

    	function clear() {
    		undoStates = []
    	}
    	sceditor.plugins.undo.clear = clear;
    }(sceditor));
    
    Enhancement 
    opened by jagaxa 1
  • Initialize link dropdown description

    Initialize link dropdown description

    At present, when you select text and use the "link" command, a dropdown menu appears for the url itself and the description. However, the initial selected text is not propagated to the "description" box, which is confusing. Populate this box with any text that was selected before the url button was hit.

    lib 
    opened by JeffreyOfYOSPOS 2
  • Text input bug on mac chrome

    Text input bug on mac chrome

    I have a mac chrome user who when entering text into the editor it appears to disappear (see attached video). https://user-images.githubusercontent.com/1218445/173471977-69859a05-a0dc-4eaf-875d-6e934985e301.mp4

    When view is switched to editor view it shows one letter per line image

    Changing the text alignment to anything other than left seems to work around it.

    Bug Needs Info 
    opened by cstdenis 6
Releases(v3.1.1)
The next generation Javascript WYSIWYG HTML Editor.

Froala Editor V3 Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. Slim - only add the plugins that you need (

Froala 5k Jan 1, 2023
Pure javascript based WYSIWYG html editor, with no dependencies.

SunEditor Pure javscript based WYSIWYG web editor, with no dependencies Demo : suneditor.com The Suneditor is a lightweight, flexible, customizable WY

Yi JiHong 1.1k Jan 2, 2023
A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Raphael Cruzeiro 1.7k Dec 12, 2022
Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co

Quill 34.3k Jan 2, 2023
The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.

CKEditor 4 - Smart WYSIWYG HTML editor A highly configurable WYSIWYG HTML editor with hundreds of features, from creating rich text content with capti

CKEditor Ecosystem 5.7k Dec 27, 2022
An Easy and Fast WYSIWYG Editor

Simditor Simditor is a browser-based WYSIWYG text editor. It is used by Tower -- a popular project management web application. Supported Browsers: IE1

彩程设计 5k Jan 3, 2023
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

If you would be interested in helping to maintain one of the most successful WYSIWYG text editors on github, let us know! (See issue #1503) MediumEdit

yabwe 15.7k Jan 4, 2023
Simple, beautiful wysiwyg editor

This repo is no longer maintained. bootstrap3-wysiwyg is much better Overview Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create

James Hollingworth 4.2k Dec 30, 2022
Raptor, an HTML5 WYSIWYG content editor!

Raptor Editor Raptor Editor is a user-focused extensible WYSIWYG website content editor - check out the Demo. It is designed to be user and developer

PANmedia 533 Sep 24, 2022
Super simple WYSIWYG editor

Summernote Super simple WYSIWYG Editor. Summernote Summernote is a JavaScript library that helps you create WYSIWYG editors online. Home page: https:/

Summernote 11k Jan 7, 2023
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

TOAST UI Editor v3 major update planning ?? ?? ?? TOAST UI Editor is planning a v3 major update for 2021. You can see our detail RoadMap here! GFM Mar

NHN 15.5k Jan 3, 2023
A powerful WYSIWYG rich text web editor by pure javascript

KothingEditor A powerful WYSIWYG rich text web editor by pure javascript Demo : kothing.github.io/editor The KothingEditor is a lightweight, flexible,

Kothing 34 Dec 25, 2022
WYSIWYG editor developed as jQuery plugin

RichText WYSIWYG editor developed as jQuery plugin. Requirements jQuery (v.3+, v.3.2+ recommended) FontAwesome (v.4.7.0 / v.5+) src/jquery.richtext.mi

Bob 95 Dec 30, 2022
A JS library for building WYSIWYG editors for HTML content.

For information on the ContentTools 2.x roadmap please view the: Roadmap repo ContentTools A JS library for building WYSIWYG editors for HTML content.

getme 3.9k Jan 8, 2023
A toolkit for building WYSIWYG editors with Mobiledoc

Mobiledoc Kit Mobiledoc Kit is a framework-agnostic library for building WYSIWYG editors supporting rich content via cards. Libraries This repository

Bustle 1.5k Jan 3, 2023
A markdown editor. http://lab.lepture.com/editor/

Editor A markdown editor you really want. Sponsors Editor is sponsored by Typlog. Overview Editor is not a WYSIWYG editor, it is a plain text markdown

Hsiaoming Yang 2.8k Dec 19, 2022
Override the rich text editor in Strapi admin with ToastUI Editor.

strapi-plugin-wysiwyg-tui-editor ⚠️ This is a strapi v4 plugin which does not support any earlier version! A Strapi plugin to replace the default rich

Zhuo Chen 12 Dec 23, 2022
A chrome extension which helps change ace editor to monaco editor in web pages, supporting all features including autocompletes.

Monaco-It Monaco-It is a chrome extension turning Ace Editor into Monaco Editor, supporting all features including autocompletes. 一些中文说明 Supported Lan

null 3 May 17, 2022
lightweight (~5kb) code editor custom element with syntax highlighting

code-edit lightweight (~5kb) code editor custom element with syntax highlighting ?? Install · ?? Example · ?? API docs · ?? Releases · ???? Contribute

stagas 5 Apr 14, 2022