SCEditor – A WYSIWYG HTML & BBCode editor

Posted on by

If you sent me an e-mail about a setWysiwygEditorBBCode function, I can’t reply because the e-mail bounced.

Update: SCEditor now has it’s own site on GitHub pages. It has a few demos and examples so far. I will still keep this page updated for now.

SCEditor is a lightweight jQuery based WYSIWYG HTML and BBCode editor.

The aim of SCEditor is to be lightweight while still having all the features that would ever be wanted and being a good BBCode WYSIWYG editor. A demo is available here.

Features

  • Bold, underline, italic, superscript and subscript
  • Left, center, right and justify text
  • Text size, color and font
  • As You Type emoticon conversion
  • Tables
  • Lists
  • Code and quote tags
  • Images and links
  • I18n support

Compatibility

SCEditor should work in at least:

  • IE 6+
  • FF 3.5
  • Chrome
  • Opera 9.5+
  • Safari 4+

It may work in earlier versions I’m just unable to test them. If you find any problems, please let me know.

Getting SCEditor

You can download SCEditor here (ZIP) or grab source code from GitHub.

License

SCEditor is dual licensed under the MIT and GPL.

Donating

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

Changelog

Version 1.3.1 (21-April-2012):
	Add emoticonsRoot option. Allows adding a root URL to be prepended to all emoticons. - Thanks to @primehalo for the idea
	Fix IE9 bug showing resize handles
	Fix IE ranges sometimes causing the last typed charecter to be unselected
Version 1.3.0 (18-April-2012):
	Add package.json file
	Add Contribute to README
	Add GitHub pages page
	Fix newline bug. This greatly improves the BBCode to HTML parsers handling of newlines.
Version 1.2.9 (13-April-2012):
Started on improving accessibility
	Added charset option
	Updated quote command to support authors
	Fix Webkit based bug causing newlines not to be added sometimes
		- Thanks to Robin for reporting and extra help providing information
	Added Swedish translation kindly submitted by Robin
	Added French translation kindly submitted by Nicolas
	Fix extra newlines being included in quotes
	Removed undo/redo commands as they cause Safari to reopen closed tabs if they have been closed
		after the point being undone.
		- This happens with other editors and also on plain HTML text inputs. Thanks to Robin for finding and reporting.
	Fixed header (h1, h2, h3, ect.) releated BBCode bug
	Removed Undo/Redo images from the sprite
	Small tweak to BBCode parser to improve IE UX
	Make BBCode parser strip unsused whitespace to improve copying HTML from websites
	Fix newline problem with code tag
	Started adding unit tests to what can be tested
		- WYSIWYG will still need manual testing as faking user input is ugly or just not possible
	Fix IE < 8 newlines bug
Newer Comments →
  • Danny

    dude it doesn’t work , try submiting something with it,you can’t get the content of textarea after submiting.

    • sam

      Ah, there was a typo! I’ve fixed it now and update the demo to show the output when you click post.

  • http://punbb.informer.com hcs

    How to add new button, or change the behavior of an existing one, such as image-button?

    • sam

      Currently you have to modify jquery.sceditor.js to add/update commands. I intend to make an easy way of adding/updating commands I just haven’t gotten around to it yet. I will try in the next few days to update the editor with an easier method of updating/adding commands.

      Currently all the commands are stored in an object commands. See line 122 of jquery.sceditor.js.

      Each command should be an object with the following properties:
      exec: (a string which is passed to the browsers execCommand or a function which will be called when the command is clicked)
      tooltip: (a string which is shown when the user hovers over the command)

      The image command is on line 368 of jquery.sceditor.js if you want to change it. I will try get the editor updated soon to make adding/changing commands easier.

    • sam

      I’ve updated the editor to now support custom commands. There is also a How To here.

  • karev

    amazing work i like it ,but a simple tutorial how to integrate the bbcode parse class with the editor and adding custom button it will be kindfull :D

    • sam

      To integrate the parser with the editor should be fairly straightforward. Before the HTML form is submitted the editor should set the bbcode as the value of the textarea it replaces meaning it can be treated as if it were a normal textarea.

      To then parse the BBCode it should simply be:
      $parser = new SBBCodeParser_Document();
      echo $parser->parse($_POST['name_of_textarea_replaced_by_the_editor'])
      ->detect_links()
      ->detect_emails()
      ->detect_emoticons()
      ->get_html();

      I can add a tutorial with a better description if needed.

      To add a custom command see the above comment. I will try add the option sometime this week and create a how to.

      • karev

        cheers sounds good ok a how to ? will be very useful thanks again for the amazing work :)

        • sam

          I’ve posted a How To here for using SCEditor with SBBCodeParser.

          I will try get the ability to add/change the editors commands done soon.

        • sam

          The editor now supports custom commands! :) I’ve added a How To here.

  • http://alcogol.su Alexander

    I have used many WISYWYG BBCode editor but you deserves special attention! I think he’s the best. But not without sin) I would like to add in manual mode bbcode tags button would work. Then your editor would be the price was not! In any case, I would inject it into their CMS, although it is so good!

  • Alex

    I noticed a bug in the BBCode plugin:
    when used in text tables, and item type when there is a switching mode WISYWYG to Source and back to editor inserts a blank line! How to fix this bug? (ps sorry for my english)

  • Igor

    How to add this SCEditor into wordpress…?

  • AwesomeEditor

    The demo no longer works for me. I have tried the latest Internet Explorer,Google Chrome, and Firefox.

    I really like using the demo to generate bbcode.I cant even find a standalone program that does as well as this. I hope you can get it working soon.

    After pasting in some formatted text and clicking “Post” The resulting BBCode generated is the BBcode from the Demo that is there by default. Not the BBcode generated by my formatted text.
    “BBCode SCEditor

    Give it a try!

    Red text! Blue?

    •A simple list
    •list item 2

    If you are using IE9+ or any non-IE browser just type :) and it should be converted into as you type.”

    • sam

      Thank you very for letting me know! It was caused by a bug which had been fixed, I had just forgotten to update the demo! Should be working now.

      You may need to refresh the page/clear your browser cache for you to get the updated files. I don’t bother with any cache control on the demo as I only expected people to look at it once.

  • Vincent

    Hi,

    It’s been a week I’m in search of a good way to edit my pages…
    Your solution seems to be the best ! Thank you for sharing.

    I would like bringing my help to report some bugs. I would use your script everywhere if this one become entirely stable for my use.

    The bugs. When I switch between WYSIWYG and Source mode :
    - The [code][/code] tags delete the break line I entered in the texte inside.
    - Break lines are added in the [table] tags (if I switch 7 times, I get 7 new break lines).

    I’m using Google Chrome 16.0.912.75 on Windows 7

    Ask me if you want more details.
    Thank you for your work.

    Vincent.

    • sam

      Thanks for reporting those bugs! I was just about to do some bug fixes so I will hopefully be able to fix those bugs at the same time.

    • sam

      The bugs should now be fixed. Thanks for reporting them!

  • feg16

    Needed tab indent for [ul][li]bullet[/li][ol][li]numeric[/li][/ol][/ul]

    • sam

      Do you mean that lists should be indented in the WYSIWYG mode or that there should be an indent button?

      If the former then they should be indented, just check the editor styling. If the latter I do plan to add that at some point but as so few BBCode parsers support it and this is mostly for BBCode it’s not been a priority.

  • Robert

    Hallo,
    SCEditor is the best WISYWYG editor i’ve ever seen but I have a question. Is it possible to get the $_POST request over the jQuery function $(“form”).serialize()

    thanks

    (sorry for the bad english)

    • sam

      Yes it is, you need to call the SCEditor method updateTextareaValue() before calling serialize() and then it should work.

      e.g.:

      $("textarea").data('sceditor').updateTextareaValue();
      $('form').serialize()

Newer Comments →