voog / wysihtml

Open source rich text editor for the modern web

wysihtml

wysihtml is an extended and less strict approach on xing/wysihtml5 open source rich text editor. The code is library agnostic and has all dependencies bundled: No jQuery, Prototype or similar is required. The currently bundled dependencies are rangy.js (including textrange and selectionsaverestore modules) and base.js.

This project is supported by Voog.

Version 0.6.0 breaking changes

Version 0.6.0 notes for migration.

• Object namespace is now wysihtyml (was previously wysihtml5). This change includes all classnames and event names.
• The default toolbar is separated to independent module (wysihtml.toolbar.js) and must be added separately if used.
• Full command set for backwards compatibility is not bundled and separated to wysihtml.all-commands.js module. Most commands there directly map to formatBlock or formatInline commands and are thus optional and can be replaced with these internal commands.
• Table editing features are now as a separate module

Demos

• Project page with simple demo: http://wysihtml.com
• Minimal demo: https://voog.github.com/wysihtml/examples/simple.html
• Advanced demo: https://voog.github.com/wysihtml/examples/advanced.html
• Editable GitHub page: https://voog.github.com/wysihtml
• Or try it on a working app: https://www.voog.com

Features

• Auto linking of urls as-you-type.
• Generates valid and semantic HTML5 markup (no <font> tags).
• Can use class-names instead of inline styles.
• Unifies line-break handling across browsers (hitting enter will create <br> instead of <p> or <div>).
• Auto-parses content inserted via copy & paste (from Word, Powerpoint, PDF, other web pages, etc.).
• Converts invalid or unknown html tags into valid/similar tags.
• Source code view for users with HTML skills.
• Uses sandboxed iframes in order to prevent identity theft through XSS.
• Editor inherits styles and attributes (placeholder, autofocus, etc.) from original textarea (you only have to style one element).

Extended features not present in xing/wysihtml5:

• Can be used without iframe sandbox when initiated on <div> instead of <textarea>.
• Blocking of image drag drop in editable is removed.
• Table insertion management and cell merging commands.
• Improved parser with options to: unwrap tag instead of remove, keep defined styles, complex object type definitions for allowing elements.
• Ability to add uneditable area inside editor text flow (useful when building modules like video tools, advanced image editor etc).
• Improved formatblock handling.
• Ability for user to remove formating with only collapsed caret without having to select exactly whole text.
• Improved speed.
• Anchor creating and removing logic changed to more universal.
• Default build is without internal toolbar functions and build with -toolbar suffix contains default toolbar functions.

Browser Support

The rich text editing interface is supported in IE9+, FF 29+, Safari 6+, Safari on iOS 6+, Opera 12+ and Chrome. Graceful Degradation: Users with other browsers will see the textarea and are still able to write plain HTML by themselves.

Development

wysihtml can be initialized and built using node package manager:

npm install
npm run build

This adds dependencies (first line) and builds both minified and development versions (second line).

Contributors

See the list of contributors here.

wysihtml's Issues

Firefox range error after format remove

when caret is inside bold and bold formating is removed, firefox returns an error:
Error: Range error: Range is no longer valid after DOM mutation

IE does not convert selected lines to list when using list tool

row 1
row 2
row 3

becomes:

• row 1
  row 2
  row 3

TAB should insert TAB not switch to next editable area

code should be a block element in formatBlock()

I suggest adding 'code' to BLOCK_ELEMENTS_GROUP:
https://github.com/edicy/wysihtml5/blob/master/src/commands/formatBlock.js

Also, is there a way to add a class to the target when calling formatBlock? This could be very useful.

Disable firefox default table handlers for inconsistent behavior

crashes when adding/deleting lists

The editor stops working after adding, deleting and then adding list again. Steps to reproduce:

1. Add a new list with more than one item
2. Remove the list by clicking on the toolbar
3. Add a list to one line
4. Delete the line using keyboard

Gif for demo:

Tested with 0.4.0 and master, Safari 7.0.1, examples/advanced_div.html

fontSizeStyle is dodgy on contentEditable editors

See this jsfiddle: http://jsfiddle.net/C87zP/5/
See this video: https://dl.dropboxusercontent.com/u/26776187/wysihtml5-fontSizeStyle-2.mov

Steps:

1. Set up a contentEditable Editor.
2. Enter some text
3. Select a subset of the characters
4. Perform editor.composer.commands.exec('fontSizeStyle, '54px')
5. Select some small and big text
6. Perform editor.composer.commands.exec('fontSizeStyle, '36px')

Expected: Selected text in step 6 has a font-size of 36px
Actual: Only the text that was made larger in step 4 has a font-size of 36px; the rest of the selection stays at the original size.

It works if all the text is wrapped in spans, which I am using as a not-very-nice workaround for the moment.

Thanks!

Changing text color on selection containing colored text changes color of only colored section.

FormatInline "small" does not get removed

I have written a command to format a text as <small>. This works as expected.
But removing the tag does not work because <small> is declared as a different nodetype than for instance <b>.

The command can be seen here: https://github.com/Waxolunist/bootstrap3-wysihtml5-bower/blob/v0.3.0-wip/src/commands/small.js

I have written a test: https://github.com/Waxolunist/bootstrap3-wysihtml5-bower/blob/v0.3.0-wip/test/bootstrap_editor_commands_test.js

The two last assertions do not work.

change_view does not show HTML when using DIV

When using a DIV, the change_view action is not showing the HTML markup. When using an iframe it does.

The advanced demo shows the HTML in an alert (yikes!). Is there a technical hurdle to getting the div to switch and show the markup?

composer.getValue works on string, so has_visible_content parser method cannot see dimensions

Exception adding a link

I'm getting a

NS_ERROR_DOM_NOT_OBJECT_ERR: Parameter is not an object
caretPlaceholder.parentNode.removeChild(caretPlaceholder);
wysihtml5x-0.0.0-beta2.js (line 4446)

whenever I try to add a link. I'm using wysihtml5x-advanced.js (unchanged). In fact, I get the same error at the demo http://edicy.github.io/wysihtml5/examples/advanced.html

NS_ERROR_DOM_NOT_OBJECT_ERR: Parameter is not an object

var node = this.createContainer(range.endContainer.ownerDocument);

wysiht...eta1.js (line 5041)

This happens on FF17.0.8. Any ideas why? Could it be related to this one: jhollingworth/bootstrap-wysihtml5#138

IE8 problem with lists

Steps to reproduce:

1. Copy rich text content from http://xing.github.io/wysihtml5/ and paste it into advanced example on IE8 (you probably need to apply #19 and #20 first).
2. Select the bullet list and click insertUnorderedList. The bullet points disappear and the list is now text, line by line.
3. Keep the selection or select the same lines, click insertUnorderedList again.

Expected result: The bullet list appears in the same fashion as it was after step 1.
Actual result: Only the first line appears as bullet list. The other lines remain selected. After a second click on insertUnorderedList, the other lines will correctly set as bullet list, however, they are now wrapped in a second <ul>.

How to extend with a general dialog

I'd like to open my own dialog from a button in the toolbar and open a dialog of mine, which will use ajax etc. When the dialog closes I can return the HTML I'd like to insert. Is there a short guide somewhere explaining how to create a new command? I'm reading the source, but some tips would be appreciated.

Editor is a tab trap

I've found that the editor is a tab trap when using the keyboard to navigate through a form. I can tab through preceding elements, but upon reaching the editor the "TAB" key will insert tabs. It would be nice if there was a way out of the editable area via keyboard navigation, or a way to turn on an "ignoreTabs" setting.

(Close one, open another.)

Placeholder and InternetExplorer

If you use a placeholder in textarea-tag, the IE can't delete the text, if the focus on the editor.

Need text alignment with style attribute tool

IE8 support broken

With 38176a4 IE8 cannot load the editor anymore. The reason for that is that 1. compareDocumentPosition is not supported by IE8 and 2. the Node interface is not available in IE8.

Thus _detectedInlineRangeProblems in selection.js cannot be processed.

When a body of text is selected and a formatting option is applied, then pressing enter at the end of the paragraph doesn't turn off the formatting that was applied to the previous paragraph.

https://www.dropbox.com/s/loyy7toi6b3b37w/not%20turning%20off%20formatting%20on%20new%20line.mov

Chrome and Firefox isusses with range

I went to update to v0.4.11 and v0.4.12 and have reserved three errors. Two of them are fatal errors in Firefox and one in chrome.

Here is how I am initializing the wysiwyg.

$(document).ready(function () {
    var editor = new wysihtml5.Editor("id", { // id of textarea element
    toolbar: "wysihtml5-toolbarid", // id of toolbar element
    parserRules: wysihtml5ParserRules, // defined in parser rules set 
    name: 'form-control',
    style: true,
    useLineBreaks: true
});

The first two errors are in Firefox. Is there something I need to set up or is there a fix?

TypeError: sel.nativeSelection is null
sel._ranges.length = sel.rangeCount = sel.nativeSelection.rangeCount;
wysiht...3409491 (line 3453)

NS_ERROR_FAILURE:
that.doc.execCommand("enableObjectResizing", false, "false");
wysiht...3409491 (line 12547)

The last error is in Google Chrome which only happens when you refresh the page.

The given range and the current selection belong to two different document fragments. wysihtml5x-toolbar.js?v=635399841143409491:2982
(anonymous function) wysihtml5x-toolbar.js?v=635399841143409491:2982
(anonymous function) wysihtml5x-toolbar.js?v=635399841143409491:3017
(anonymous function) wysihtml5x-toolbar.js?v=635399841143409491:411
Module.init wysihtml5x-toolbar.js?v=635399841143409491:383
init wysihtml5x-toolbar.js?v=635399841143409491:311
loadHandler wysihtml5x-toolbar.js?v=635399841143409491:469

Thanks or the help.

Permit adding new methods to parse's attributeCheckMethods

The predefined set of methods available when using parserRules is usually sufficient, but sometimes you need to perform some work on attribute value. Unfortunately attributeCheckMethods is not exposed as a wysihtml5 attribute/configurable/extensible.
It would be nice if you could implement rules by your own by augmenting parserRules or by specifying functions directly in check_attributes as in:

a: { check_attributes: { href: function(av) { return [some elaboration on av]; } } }

Version 0.4.4 breaks amd support

In 0.4.3 rangy was exported to window. Now it is exported to global.
May there an option to have rangy as own dependency via bower and provide a version for amd without rangy embedded?

If you use bold, italics, underline and then turn those formats off and type something after it removes the formatting from the earlier text

Text area sometimes looses focus on placeholder clear

Click on empty editable area (with placeholder) removes placeholder but sometimes does not focus caret

Menu bar bug

I have a problem when click on menu bar, the textarea show some weird characters.
For example:

Problem when running in Selenium (with fix)

Disclaimer: This is not a bug in wysihtml5 per se, but it took me some time to track it down and it is in place in the code with some "hack" comments.

Bug: if you open a page with wysihtml5 in Selenium (tested with Firefox and Selenium 2.39.0), it crashes the test with

6:08:42.377 WARN - Exception thrown
java.lang.IllegalArgumentException: Required attributes are not set or any non-null attribute set to null
        at org.openqa.selenium.Cookie.validate(Cookie.java:140)
        at org.openqa.selenium.Cookie.<init>(Cookie.java:86)
        at org.openqa.selenium.Cookie$Builder.build(Cookie.java:225)
        at org.openqa.selenium.remote.RemoteWebDriver$RemoteWebDriverOptions.getCookies(RemoteWebDriver.java:665)
        at org.openqa.selenium.support.events.EventFiringWebDriver$EventFiringOptions.getCookies(EventFiringWebDriver.java:519)
        at org.openqa.selenium.remote.server.handler.GetAllCookies.call(GetAllCookies.java:33)
        at org.openqa.selenium.remote.server.handler.GetAllCookies.call(GetAllCookies.java:1)
        at java.util.concurrent.FutureTask.run(FutureTask.java:262)
        at org.openqa.selenium.remote.server.DefaultSession$1.run(DefaultSession.java:170)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
        at java.lang.Thread.run(Thread.java:724)
16:08:42.377 WARN - Exception: Required attributes are not set or any non-null attribute set to null

This can be fixed by commenting this line (this._unset):

        // This doesn't work in Safari 5 
        // See http://stackoverflow.com/questions/992461/is-it-possible-to-override-document-cookie-in-webkit
        this._unset(iframeDocument, "cookie", "", true);

It seems to me that this line is not necessary (looking at it and the comments above this code), but someone who understands wysihtml better should take a look.

Tab in list should generate nested list

How do i update data on an already constructed Editor?

Hi,

I have some page where i construct this editor and where socket.io is listening in the background. The content of the element that i transformed in this "wysihtml5" could be changed on one of the sochet.io calls and i want to visible in the editor without emiting change.

On a first glance i can do one crude way: destroy the current Editor from the textarea, update the textarea and re-create an Editor. It smells a bit heavy so i hope there is some other magical way to change the content. It is important that the "change" signal is not emitted again when i update it.

Best regards,
Mark

Auto linking on paste does not take into account parser rules.

If parser rules has set attributes target _blank rel="nofollow" for link, the auto created link does not format links accordingly.

focusWithoutScrolling assumes only doc and body are scrollable

If the editor is placed in a scrollable element other than the document or body, focusWithoutScrolling behaves incorrectly. We place Wysihtml5 in a scrollable modal, but focusWithoutScrolling uses the underlying <body> element's scroll position, which is incorrect.

I'm not sure the best solution. It seems this may require a recursive DOM traversal saving every element's scroll property, then focusing, then setting each element back to its original value.

allow hash starting links

IE11/Win8.1

IE11 creates paragraphs instead of <br> tags when hitting Enter

Tested on:
Windows 8.1
IE 11.0.9600.17107

When reaching bottom of editor, enter does not move content upwards

When you press enter key, if you reached bottom of the editor, previously typed content will not scroll up.
It will only scroll up when you type any other letter.
Expected is to move all content up and see cursor (blank)

If selection ends with mouse outside of editor, interaction event is not fired

Multiple instances of editor causes a console error

I have a use-case where I need to create multiple editors. When the second editor is created, the following console error is logged:

Uncaught TypeError: Cannot read property 'document' of null     wysihtml5x-toolbar-0.4.5.js:6712
getDocument                                                     wysihtml5x-toolbar-0.4.5.js:6712
wysihtml5.views.Composer.wysihtml5.views.View.extend._create    wysihtml5x-toolbar-0.4.5.js:11514
sandbox.dom.Sandbox.stylesheets                                 wysihtml5x-toolbar-0.4.5.js:11489
(anonymous function)                                            wysihtml5x-toolbar-0.4.5.js:6746

Disallow new lines/paragraphs/divs

Any idea how to disallow new lines, paragraphs and divs? I can set the rules to unwrap/remove them and that tidies them away while pasting content, but it doesn't stop them from being added by typing.

Make it available on bower

It would be very useful to use version 0.4.x with bower.

Nesting different list types

When you make a nested list (especially of another type) you must do:

<ul>
  <li>blah
    <ol>
      <li>blah</li>
    </ol>
  </li>
</ul>

Where right now it's producing:

<ul>
  <li>blah </li>
    <ol>
      <li>blah </li>
    </ol>
</ul>

This issue is causing my emails to all parse incorrectly when I using the 2 different types of lists together. Any way around this?

When a body of text is highlighted to create a bulleted list, and then it's turned off it, it appears to switch on the formatting settings from the two previous paragraphs above.

Creating ordered/unordered list results caret being outside list not inside new list item

Firefox Issue TypeError: b.nativeSelection is null

This came up recently when the page is loaded. It gives me this error from firebug:

TypeError: b.nativeSelection is null
wysiht...2581355 (line 299)

After the page loads it does not show anything where the text area is supposed to be. An help would be nice.

QUnit tests fail in Firefox 30.0

As the title says, the QUnit test suite fails for several tests in my current environment.
(Firefox 30.0, Fedora 20 x64)

Chrome passes the tests 100%, PhantomJS fails some test and then times out on the Blockquote tests.

What browsers did you execute the tests with? Is it just my current system that's at fault?

Also, would you be interested in setting up a connection to Travis CI and/or SauceLabs for automated cross-browser test execution?

Navigating a table with keys doesn't highlights cells

When I'm navigating a table with the up and down arrows, the newly entered cells don't get the wysiwyg-tmp-selected-cell class. Only selecting cells with the mouse will do so.

Likewise the data-wysihtml5-hiddentools="table" element gets only shown if I select a table with the mouse. If I enter it by keys, nothing happens.

'keyup' method not being called correctly with wysihtml.

I have code such as:

    $(text).keyup(function() {
      console.log("called");
      updateCountdown(text, countdown, chars);
    });

which I use to count characters in a text box. However, once adding the 'wysihtml5' class to the textbox, it is no longer called, even though it worked perfectly fine without it. Is it possible that wysi is intercepting this regular method, and not dispatching a new one?

Linked page loads inside the iframe when link is clicked in iOS device

On the iphone (iOS 7) when clicking on a link added to the wysihtml5x iframe, the linked page loads inside the iframe, instead of showing the toolbar with the http address of the link.

Link target seems to blank allways. configutarion does not work

Caret not showing / blinking

You can see that behaviour in the advanced example.

Steps to reproduce:

• Type some text.
• Press the createLink button, enter a link, press Enter (Pressing OK works correctly)
• The caret is on its position but not blinking. If you press a key the caret is moving and blinking again.

Probably the same issue:
Once entered a link, beginning a new line, the caret is not blinking after pressing enter.

And the third one, probably again the same issue:
Type some text, start a bunch of new lines until at the end of the textarea. Type some text, press Enter. The new line is not visible. The scrollable element is not moving. Type some text, the new line is showing.

This all is not happening in the demo: http://edicy.github.io/wysihtml5/

What is different here?

Chrome: 'Range.detach' is now a no-op, as per DOM

In Chrome I get an warning which reads:
'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach).

It appears to be in wysihtml5x-toolbar.js at line 2989

Focus move up one line after press enter key

I have this bug, when press enter key once, then press it again, the cursor will first move down, then move up to the line before. and this is only affecting Chrome, anybody help? this is not from sysihtml5, but this http://jhollingworth.github.io/bootstrap-wysihtml5/

getValue doesn't cleanup wysiwyg-tmp-selected-cell class